Hacker News new | ask | show | jobs
by sieve 526 days ago
Ruby annotations?[1] They were originally meant to provide pronunciation hints for Asian languages. The hints naturally float above or below the corresponding word. You do not have to play around with tables/grids/flex to make this happen.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ru...

2 comments

+1 to this, they're an excellent little feature. Just bear in mind that the rendering differs substantially by browser, and some fonts (for the ruby text) work better than others. I'd recommend overriding as much as possible, including the font of the ruby text.
I primarily test with Chrome and Firefox (Epiphany, occasionally). And my usecase requires that I provide downloadable fonts as not all fonts have nice-looking Devanagari renderings. So, the overriding happens naturally.
Yeah, I also target Chrome and Firefox. I'll occasionally test on Edge.

I had a user report that pinyin was looking funny on Reddit. Turns out they use a system font stack which includes Verdana (and so only shows up on Windows), and Verdana does really poorly with Pinyin ruby (iirc it was a generic ruby thing, not just Pinyin).

I just replaced it with a custom system font stack without Verdana.

Not a difficult fix, but something to be aware of.

What's the function of the non-rendered rp-elements?
Backwards compatibility for browsers that do not support this feature. You put your opening and closing parenthesis tokens within the "rp" tags and such browsers will show the hints within those parentheses.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp