[Improvement Request] Ruby Annotation element does not performing well with some font

[larachung]

Ruby character or Rubi character is very common in East Asian language which placed smaller characters above, under or to the right of CJK characters (Chinese, Japanese and Korean) to show the pronunciation. In HTML there are Ruby elements to display ruby characters.

Sample:

<ruby>超電磁砲<rp>（</rp><rt>レールガン</rt><rp>）</rp> → 超電磁砲（レールガン） <ruby>超電磁砲<rp>（</rp><rt>Railgun</rt><rp>）</rp> → 超電磁砲（Railgun）

A setence with normal ruby should look like these. Vertical: Horizontal:

But if the user is using some font with line-height significantly higher than glyph height (Like Source Han Family and PingFang Family which are very common CJK fonts), Firefox displays it like the picture below. Because the line-height of the font is too high, the space between the main character and ruby character is too large, (Incidentally, Safari has the same problem, but Google Chrome can handle this space properly). This is very bad for East Asian language, because the ruby character will propped up the line space.

The ruby character makes the space between the first line and second line far larger than the others, which is bad for Japanese display:

The sample with Source Han Serif under latest Firefox (the space between 超電磁砲 and レールガン is too large):

The sample with Source Han Serif under Google Chrome:

Ruby character is very important in East Asian language, and there are many common CJK fonts(For example, PingFang Family is the default Chinese fonts in Apple devices) with high line height. So, there will have a very negative impact on Asian Firefox users, if Firefox cannot handle the space between ruby characters and main text when the users is using a font has higher line-height than glyph height like Source Han Serif or PingFang TC.

[bewizible]

@larachung Hey there, have you figured out any workaround to this? This has been irritating me too since I started to use firefox

[larachung]

@larachung Hey there, have you figured out any workaround to this? This has been irritating me too since I started to use firefox

Here is a trick, use another font with low line-height in the font fallback list. For example:

@font-face {
  font-family: "Boston";
  src: local("Boston") format('TrueType');
  unicode-range: U+20;
}

body {
  font-family: "Boston", "Source Han Sans";
}

This CSS will use the information from Boston, and not affect the glyphs of Source Han Sans(except U+20, the space character). However, as you can see, this trick has limitations—you can’t customize the CSS everywhere.