diff --git a/.changeset/sour-mayflies-visit.md b/.changeset/sour-mayflies-visit.md new file mode 100644 index 0000000..eb9586f --- /dev/null +++ b/.changeset/sour-mayflies-visit.md @@ -0,0 +1,37 @@ +--- +'@capsizecss/core': patch +--- + +createFontStack: Ensure provided \`size-adjust\` is factored into metric overrides + +Ensures a custom `size-adjust` value provided via the `fontFaceProperties` option is factored into the calculations for the metric overrides. + +#### Example + +If a custom `size-adjust` value is provided: + +```ts +createFontStack( + [ merriweatherSans, arial ], + { + fontFaceProperties: { + sizeAdjust: '300%' + } + }, +) +``` + +The resulting metric overrides are now adjusted accordingly: + +```diff + @font-face { + font-family: "Merriweather Sans Fallback"; + src: local('Arial'); +- ascent-override: 92.3409%; ++ ascent-override: 32.8%; +- descent-override: 25.619%; ++ descent-override: 9.1%; + line-gap-override: 0%; + size-adjust: 300%; + } +``` \ No newline at end of file diff --git a/packages/core/src/createFontStack.test.ts b/packages/core/src/createFontStack.test.ts index 7d40d10..48ccf34 100644 --- a/packages/core/src/createFontStack.test.ts +++ b/packages/core/src/createFontStack.test.ts @@ -509,10 +509,10 @@ describe('createFontStack', () => { "fontFaces": "@font-face { font-family: "Merriweather Sans Fallback"; src: local('Arial'); - size-adjust: 300%; - ascent-override: 92.3409%; - descent-override: 25.619%; + ascent-override: 32.8%; + descent-override: 9.1%; line-gap-override: 0%; + size-adjust: 300%; }", "fontFamily": ""Merriweather Sans", "Merriweather Sans Fallback", Arial", } diff --git a/packages/core/src/createFontStack.ts b/packages/core/src/createFontStack.ts index ab31cbe..cdb0a25 100644 --- a/packages/core/src/createFontStack.ts +++ b/packages/core/src/createFontStack.ts @@ -3,6 +3,7 @@ import { round } from './round'; import type { FontMetrics, SupportedSubset } from './types'; const toPercentString = (value: number) => `${round(value * 100)}%`; +const fromPercentString = (value: string) => parseFloat(value) / 100; export const toCssProperty = (property: string) => property.replace(/([A-Z])/g, (property) => `-${property.toLowerCase()}`); @@ -40,11 +41,13 @@ interface OverrideValuesParams { metrics: FontStackMetrics; fallbackMetrics: FontStackMetrics; subset: SupportedSubset; + sizeAdjust?: AtRule.FontFace['sizeAdjust']; } const calculateOverrideValues = ({ metrics, fallbackMetrics, subset, + sizeAdjust: sizeAdjustOverride, }: OverrideValuesParams): AtRule.FontFace => { // Calculate size adjust const preferredFontXAvgRatio = @@ -52,11 +55,15 @@ const calculateOverrideValues = ({ const fallbackFontXAvgRatio = resolveXWidthAvg(fallbackMetrics, subset) / fallbackMetrics.unitsPerEm; - const sizeAdjust = + const calculatedSizeAdjust = preferredFontXAvgRatio && fallbackFontXAvgRatio ? preferredFontXAvgRatio / fallbackFontXAvgRatio : 1; + const sizeAdjust = sizeAdjustOverride + ? fromPercentString(sizeAdjustOverride) + : calculatedSizeAdjust; + const adjustedEmSquare = metrics.unitsPerEm * sizeAdjust; // Calculate metric overrides for preferred font @@ -185,12 +192,14 @@ type FontFaceFormatObject = { const resolveOptions = (options: Parameters[1]) => { const fontFaceFormat = options?.fontFaceFormat ?? 'styleString'; const subset = options?.subset ?? 'latin'; - const fontFaceProperties = options?.fontFaceProperties ?? {}; + const { sizeAdjust, ...fontFaceProperties } = + options?.fontFaceProperties ?? {}; return { fontFaceFormat, subset, fontFaceProperties, + sizeAdjust, } as const; }; @@ -206,7 +215,7 @@ export function createFontStack( [metrics, ...fallbackMetrics]: FontStackMetrics[], optionsArg: CreateFontStackOptions = {}, ) { - const { fontFaceFormat, fontFaceProperties, subset } = + const { fontFaceFormat, fontFaceProperties, sizeAdjust, subset } = resolveOptions(optionsArg); const { familyName } = metrics; @@ -230,10 +239,8 @@ export function createFontStack( metrics, fallbackMetrics: fallback, subset, + sizeAdjust, }), - ...(fontFaceProperties?.sizeAdjust - ? { sizeAdjust: fontFaceProperties.sizeAdjust } - : {}), }, }); });