font choice and alignment

Open robx opened this issue 5 years ago • 1 comments

There's no concrete issue, this is rather to collect some research about how text is rendered in the puzzles.

the generated svg only appears to specify "sans-serif" for the font
on firefox / macos, the font ends up as "Hiragino Kaku Gothic", which turns out to be the default Japanese font, and this choice appears down to p.html staring with <html lang="ja"> (regardless of pzpr language setting)
it appears that text is aligned by the top, using a computed font height via candle.js; compare candle.metrics.js which appends an element to the document for font measurement, and candle.svg.js for user-agent specific tweaks
png export would typically not use the Japanese font, possibly explaining the difference in appearance, compare #134

The font alignment doesn't always seem to work well. On macos / firefox / retina, it looks great by default

while numbers appear too low with lang="en"

This does not seem to be consistent over devices.

Some things that might be worth considering:

go over the alignment computation to improve the poorly aligned cases
make font choice less arbitrary; it would be great if we always used the same font for PNG export as for in-browser display; this might tie in with #97; we could specify fonts more precisely than just serif/sans-serif, and perhaps even serve a specific font explicitly
SVG export should ideally specify font well enough so that the vertical alignment matches whichever font is used for rendering

Feb 25 '20 17:02 robx

Another set of "ja"/"en" screenshots on macos / retina / chrome due to @montelucci

montelucci-ja montelucci-en

Feb 25 '20 17:02 robx