From 16d8b99b84d6fd75246a06f8587a554a9bb03fed Mon Sep 17 00:00:00 2001 From: Lynn Date: Fri, 21 Apr 2023 00:32:30 +0800 Subject: [PATCH] fix: Handle font-size correctly for element like heading (#452) Close https://github.com/vercel/satori/issues/392 Close https://github.com/vercel/satori/issues/254 --- src/handler/expand.ts | 39 +++++++++--------- ...uld-handle-font-family-fallback-1-snap.png | Bin 873 -> 652 bytes ...rectly-for-element-like-heading-1-snap.png | Bin 0 -> 4267 bytes ...rectly-for-element-like-heading-2-snap.png | Bin 0 -> 3828 bytes ...rectly-for-element-like-heading-3-snap.png | Bin 0 -> 4213 bytes test/font.test.tsx | 35 ++++++++++++++++ 6 files changed, 55 insertions(+), 19 deletions(-) create mode 100644 test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-1-snap.png create mode 100644 test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-2-snap.png create mode 100644 test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-3-snap.png diff --git a/src/handler/expand.ts b/src/handler/expand.ts index a11e8bba..72669b39 100644 --- a/src/handler/expand.ts +++ b/src/handler/expand.ts @@ -301,25 +301,10 @@ export default function expand( } // Calculate the base font size. - let baseFontSize: number = - typeof transformedStyle.fontSize === 'number' - ? transformedStyle.fontSize - : inheritedStyle.fontSize - if (typeof baseFontSize === 'string') { - try { - const parsed = new CssDimension(baseFontSize) - switch (parsed.unit) { - case 'em': - baseFontSize = parsed.value * (inheritedStyle.fontSize as number) - break - case 'rem': - baseFontSize = parsed.value * 16 - break - } - } catch (err) { - baseFontSize = 16 - } - } + const baseFontSize = calcBaseFontSize( + transformedStyle.fontSize, + inheritedStyle.fontSize as number + ) if (typeof transformedStyle.fontSize !== 'undefined') { transformedStyle.fontSize = baseFontSize } @@ -393,6 +378,22 @@ export default function expand( return transformedStyle } +function calcBaseFontSize(size: number | string, inheritedSize: number) { + if (typeof size === 'number') return size + + try { + const parsed = new CssDimension(size) + switch (parsed.unit) { + case 'em': + return parsed.value * inheritedSize + case 'rem': + return parsed.value * 16 + } + } catch (err) { + return inheritedSize + } +} + /** * @see https://github.com/RazrFalcon/resvg/issues/579 */ diff --git a/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-family-fallback-1-snap.png b/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-family-fallback-1-snap.png index 0aa275c2f536432b4ad237a2f9fa04506c1c5f79..edb0dfcd719b1ab63a915bb730740f45d251678e 100644 GIT binary patch literal 652 zcmeAS@N?(olHy`uVBq!ia0vp^DIm)hQB z3-|xOU|+1vcu+zA4zHJ0C1x|bc>%05l)+ShdD`8RF7)vw&G-@q+xx$s;~ zN_vhp(~r4(lkc|HCj9&ro2|pzV1M%r)Ag`vQm=n)p6LIkLukcr^=%0{0qJRCJKnN9 zke{}1Be(U2_=qTmKd0v1&@-LJbX)$!si5S$FK&7)csK7x(?*B6Gb0n;bo>gdOK$w- zR#N_^N9tLA+4-`S8%1vXa{!s_cHWJt^!pL99@bZ9&M+nOzv;N0&i6*}0RJ1_-5c&^ z>acFJpD=alv0WE8Pjt9zyOA}y(aL!9fvwEHf%a@?+4g?o^$4yj(m&_b*{yvuty5Q{ zao6vso3AsKrlmDzyI(PXV!S(f`<~?go1(v;0Q%?^^Up(ag>QAedrP&wjjP}GJg-Kw z{W{+p?dl}^P0>uZ!K%02$L1Ts1O7Ql+{ff@2!5S?tv;t*%DeF`e@g1gjd@>kR07KV za}GufeI)*#+!xl?4aT*EV3-ZQFDu;`)5nV`x!|7R&s z)90D2SH1uGSS|k7P?OXs^*sH``97V!iQ?P5d-ta9-}pTT=pk)y_bb_-?sIRG4fI># zc5Vfj*v0>*ulLSoZtwUT%4N$o9@xx!HM{X|WWZZ5z9c7`4hdKS7`Dux^8YqWPTl;x Suoakv7(8A5T-G@yGywpa!jO9a diff --git a/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-1-snap.png b/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..47f12b6e1f0536fa47d57973a5d8d72204cb68e3 GIT binary patch literal 4267 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 MFtssxW_*qCKLNoCM*si- literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-3-snap.png b/test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-font-size-correctly-for-element-like-heading-3-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..35b5230e822359cc612ddf5954b93147f90bdd9a GIT binary patch literal 4213 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 literal 0 HcmV?d00001 diff --git a/test/font.test.tsx b/test/font.test.tsx index 5c96dc31..33cdcd98 100644 --- a/test/font.test.tsx +++ b/test/font.test.tsx @@ -111,4 +111,39 @@ describe('Font', () => { expect(toImage(svg, 100)).toMatchImageSnapshot() }) + + it('should handle font-size correctly for element like heading', async () => { + const svgs = await Promise.all( + [20, '0.8em', '1.2rem'].map((fontSize) => + satori( +
+

Hello, World

+

Hello, World

+
Hello, World
+
, + { + width: 100, + height: 100, + fonts, + } + ) + ) + ) + + svgs.forEach((svg) => { + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) + }) })