mapbox / tiny-sdf

Browser-side SDF font generator
http://mapbox.github.io/tiny-sdf/
BSD 2-Clause "Simplified" License
575 stars 58 forks source link

Switch to using alphabetic baseline #30

Closed ChrisLoer closed 3 years ago

ChrisLoer commented 3 years ago

The "middle" baseline was convenient for placing the glyph in the middle of the canvas when we didn't know the metrics, but for fonts with especially large ascenders or descenders, the middle baseline could shift significantly compared to the "alphabetic" baseline we'd normally expect. Extracting metrics gives us all the information we need to correctly place the glyph on the canvas even when we're using the alphabetic baseline, so this PR switches to alphabetic whenever metrics are available.

Here's an overlay of the Meiryo and YaHei fonts, showing how the alphabetic baseline matches expectations (Meiryo "broke" earlier assumption because it has a very large font descender):

Meiryo vs YaHei baselines

The "top" metric now means "distance from alphabetic baseline to top of glyph" which seems pretty intuitive but notably different from what https://github.com/mapbox/sdf-glyph-foundry generates. GL JS can adjust to bring the two metrics mostly into line.

I did some sanity testing of the resulting glyphs and metrics for the legacy "no metrics" pathway, although I don't think the most recent GL JS runs on any browser that will require going down that pathway. It'll be a nice simplification to remove.

Here are some cross browser/font/platform test results (it would be great to figure out a good way to automate this):

Chrome MacOS Meiryo : Server Arial Chrome MacOS Meiryo : Server Arial Chrome macOS Meiryo:Meiryo Chrome macOS Meiryo:Meiryo Chrome MacOS san-serif all Chrome MacOS san-serif all Chrome MacOS sans-serif: server Arial Chrome MacOS sans-serif: server Arial Chrome Windows 10 : sans-serif all Chrome Windows 10 : sans-serif all Chrome Windows 10 sans-serif : Server Arial Chrome Windows 10 sans-serif : Server Arial Edge Windows 10 sans-serif : Server Arial Edge Windows 10 sans-serif : Server Arial Edge Windows 10 sans-serif all Edge Windows 10 sans-serif all Firefox MacOS san-serif : Server Arial Firefox MacOS san-serif : Server Arial Firefox MacOS sans-serif all Firefox MacOS sans-serif all Firefox Windows 10 sans-serif : Server Arial Unicode Firefox Windows 10 sans-serif : Server Arial Unicode Firefox Windows 10 sans-serif all Firefox Windows 10 sans-serif all

@mourner