Expand Playfair Display's character map to include super/subscripts & fix PNG exports #2791
Conversation
There was a problem hiding this comment.
I can confirm this fixes the rendering of sups 'n' subs 👍
before
after
Similarly for content on the site, one of these is the literal and one is in sub tags:
Unless @marcelgerber notices something in the fiddly details of this change, it's all good on my end.
samizdatco
changed the title
samizdatco
force-pushed
the
fix-fonts-in-exports-v2
branch
2 times, most recently
from
3de0704 to
77ed4a3
Compare
samizdatco
force-pushed
the
fix-fonts-in-exports-v2
branch
from
565f78f to
2ad133a
Compare
| @@ -200,23 +213,14 @@ export class IRSuperscript implements IRToken { | |||
| return <sup key={key}>{this.text}</sup> | |||
| } | |||
| toSVG(key?: React.Key): JSX.Element { | |||
| // replace numerals with literals, for everything else let the font-feature handle it | |||
| const style = { fontFeatureSettings: '"sups"' } | |||
| const text = this.text.replace(/./g, (c) => | |||
There was a problem hiding this comment.
| const text = this.text.replace(/./g, (c) => | |
| const text = this.text.replace(/[0-9]/g, (c) => |
There was a problem hiding this comment.
<extremely-theoretical>Matching . and using get to do the default-if-undefined replacement means we could conceivably add non-digit ordinal characters (like ª and º) to the mapping someday.</extremely-theoretical>
There was a problem hiding this comment.
You're right; when I first looked at that code I thought these would be every IRText node that we would run the replace on.
But since IRSuperscript nodes are rare (and usually short) this is totally fine.
- svg downloads are unlikely to have working fonts, so we can't rely on `sups` support being there
- semibold causes too much line-wrapping
- there's a tricky race condition between font-loading and canvas rendering which the `StaticChartRasterizer` class now orchestrates
samizdatco
force-pushed
the
fix-fonts-in-exports-v2
branch
from
97b41de to
696c1f9
Compare
| @@ -200,23 +213,14 @@ export class IRSuperscript implements IRToken { | |||
| return <sup key={key}>{this.text}</sup> | |||
| } | |||
| toSVG(key?: React.Key): JSX.Element { | |||
| // replace numerals with literals, for everything else let the font-feature handle it | |||
| const style = { fontFeatureSettings: '"sups"' } | |||
| const text = this.text.replace(/./g, (c) => | |||
There was a problem hiding this comment.
You're right; when I first looked at that code I thought these would be every IRText node that we would run the replace on.
But since IRSuperscript nodes are rare (and usually short) this is totally fine.
packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx
Outdated
Show resolved
Hide resolved
packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx
Outdated
Show resolved
Hide resolved
| else rej(new Error("Failed to generate bitmap blob")) | ||
| }) | ||
| } catch (err) { | ||
| rej(err) |
There was a problem hiding this comment.
It would be nice if in the case where the png generation fails for whatever reason, we could still display the svg version.
But only do this if it's easy to do, no need to go down another massive rabbit hole.
The stock version of Playfair Display includes support for super- and subscript numerals through the opentype 'sups' and 'subs' features, but does not actually provide direct access to those glyphs through their standard unicode codepoints. This PR adds a new script (
devTools/fonts/fix-numerals.py) to the recipe that builds our custom fonts. It usesttxfromfonttoolsto merge in the missing character→glyph mappings before generating our webfonts and latin subsets.PNG exports now use Playfair & Lato instead of falling back to Georgia and Arial as they did previously on any system that didn't have the fonts installed locally. PNG rendering has been moved into a new helper class,
StaticChartRasterizer, which handles font-embedding, client-side rendering, and a workaround for a (truly infernal) race condition between font-loading and image rendering.