1981106 - Line-box is not appropriately sized when CSS ruby annotations are present both over and under the base text

Status: NEW

(Core :: Layout: Ruby, defect)

Description

[Jonathan Kew [:jfkthame]]

With some fonts on macOS, including standard ones such as Hiragino Sans, we don't appear to be expanding the line box as needed when ruby annotations are present above the base text, with the result that the annotations may extend beyond the line box and clash with preceding content.

Testcase:

data:text/html;charset=utf-8,<div style="border:5px solid red;font:40px Hiragino Sans">
    ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時

Note how the ruby annotation overprints and extends beyond the top border. We should be adding extra ascent to the line-box so that the annotation fits within it.

(With the Osaka font, on the other hand, the issue doesn't occur: we expand the line so that the annotation fits.)

Comment 1

[Jonathan Kew [:jfkthame]]

Attachment: Screenshot showing Firefox / Safari / Chrome rendering of ruby with Hiragino Sans

Comparison of our rendering of the example vs Safari and Chrome, both of which size the line-box better.

Comment 2

[Jonathan Kew [:jfkthame]]

I've been re-reading details of the CSS Ruby spec, in particular §3.6. Line Spacing, and I'm becoming increasingly convinced this is not a bug in quite the form originally filed. (But we do still have an issue here, see below.)

The spec is quite explicit that the behavior it describes

... does not ensure that the ruby annotations remain within the line box. It merely ensures that if all lines had equal spacing and equivalent amounts and positioning of ruby annotations, there would be enough room to avoid overlap.

Annotations are allowed to extend above (or below) the line box, provided the overall line height of the ruby container provides sufficient space for annotations on successive lines to avoid clashing with each other, or with the base text of adjoining lines.

Extending the example to have multiple lines:

data:text/html;charset=utf-8,<div style="border:5px solid red;font:40px Hiragino Sans GB">
    ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時<br>
    ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時<br>
    ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時

we can see that this does hold: although the ruby annotations extend above their line box, there is sufficient space at the bottom of the previous line box for the annotations to be displayed without clashing.

The same holds if the ruby annotations are below the base text:

data:text/html;charset=utf-8,<style>div{border:5px solid red;font:40px Hiragino Sans GB;ruby-position:under}</style>
    <div>
        ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時<br>
        ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時<br>
        ルビと<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を同時

The ruby below the last line may extend below the line box (and hence the containing block).

However, if ruby are present both above and below, then we do need to significantly increase line spacing to avoid the risk of a clash:

data:text/html;charset=utf-8,<style>div{border:5px solid red;font:40px Hiragino Sans GB}ruby.under{ruby-position:under}</style>
    <div style="text-indent: 1em">
        ルビと<ruby class=under>圏<rt>けん</rt></ruby><ruby>点<rt>てん</rt></ruby>を同時<br>
        ルビと<ruby class=under>圏<rt>けん</rt></ruby><ruby>点<rt>てん</rt></ruby>を同時<br>
        ルビと<ruby class=under>圏<rt>けん</rt></ruby><ruby>点<rt>てん</rt></ruby>を同時

In this case we currently fail (e.g. with Hiragino Sans): the ruby annotations below one line and those above the next line are competing for the same space, and may clash.

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: firefox rendering of Hiragino Sans with ruby both above and below

This shows the bad rendering we get with the last example above: note how the ruby annotation below the first line clashes with the annotation above the second line. nsLineLayout::AdjustLeadings is failing to account for this case and create the additional leading needed.

Comment 4

[Jonathan Kew [:jfkthame]]

(unassigning myself for now as I'm not actually working on this, although hope to eventually...)