Ruby base box height is not set by the font size of its contents
Categories
(Core :: Layout: Ruby, defect, P3)
Tracking
()
People
(Reporter: pal, Assigned: xidorn)
References
Details
Attachments
(2 files)
Expected result
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
Steps to reproduce:
Visit https://codepen.io/palemieux/pen/BgEqqo
Actual results:
The ruby text ("text") is positioned as if the ruby base ("base") had a font-size of 16px, even though its has a font-size of 36px.
Expected results:
The actual font-size of the ruby base ("base"), i.e. 36px, should set the height of the ruby base box -- see attached and render in Chrome.
|
||
Comment 1•5 years ago
|
||
Hi,
I was able to reproduce the issue on Firefox 68.0 and Nightly 70.0a1 (2019-07-16).
Will set the product to Core and the component to Layout: text and font.
Thanks!
|
||
Comment 2•5 years ago
|
||
Change the status for beta to have the same as nightly and release.
For more information, please visit auto_nag documentation.
|
||
Comment 3•5 years ago
|
||
I haven't studied the ruby spec in detail, but the behavior here seems broken to me (and both Chrome and Safari match the reporter's "expected" result, so we're the odd one out).
A workaround might be to set the font-size on the <ruby> element itself.
|
|
||
Comment 4•5 years ago
•
|
||
Hmm, on looking at the spec, I'm not sure the "expected" result is actually correct for the testcase as given, which has:
<ruby><span>base</span><rt>text</ruby>
with a large font-size applied to the <span> containing the word "base".
The Anonymous Ruby Box Generation section of the spec tells us that the <span> here will be wrapped in an anonymous ruby-base, so it's as if the testcase had
<ruby><rb><span>base</span></rb><rt>text</rt></ruby>
with a large font-size on the <span>.
According to the Ruby Layout section, "its base level is laid out on the line, aligned according to its vertical-align property exactly as if its ruby bases were a regular sequence of inline boxes". But note that the height of an inline box is not increased as a result of a large font-size on a child of the inline; compare
data:text/html,<span style="border:1px solid gray">foo<span style="font-size:36px">bar</span></span>
where the larger font-size of the inner <span> does not affect the height of the outer one. Similarly, in the example above, it seems like the font-size of the <span> should not affect the height of the <rb>, and so it would not affect the positioning of the ruby text.
So AFAICS, on this particular example Firefox may be correct after all, and Safari and Chrome are wrong to increase the height of the ruby base.
However, if I modify the example to use <rb> in place of <span>, with a large font-size on the <rb> element, Firefox still gives the same result, which in this case does seem wrong; the height of the <rb> should take account of its font-size. So we do have a bug here, I think, but it involves a slightly different testcase.
Xidorn, I think you know more about Ruby layout; am I understanding this correctly?
|
Assignee | |
Comment 5•5 years ago
|
||
Yes, I think your understanding is exactly correct.
Chrome and Safari haven't implemented the latest spec, so it's not particularly surprising that they have different behavior. IIRC Chrome may start looking into that after they ship their Layout NG.
Given this, closing this bug as INVALID as Firefox follows the spec and the behavior here is expected. You should set font-size on either <rb> or <ruby> in order to get the result you expect.
|
|
||
Comment 6•5 years ago
|
||
(In reply to Xidorn Quan [:xidorn] UTC+10 from comment #5)
Yes, I think your understanding is exactly correct.
Chrome and Safari haven't implemented the latest spec, so it's not particularly surprising that they have different behavior. IIRC Chrome may start looking into that after they ship their Layout NG.
OK, thanks for confirming this.
You should set
font-sizeon either<rb>or<ruby>in order to get the result you expect.
Ah, but setting it on <rb> doesn't work as expected, AFAICT; try:
data:text/html,<ruby><rb style="font-size:32px">base<rt style="font-size:12px">text</ruby>
|
|
Assignee | |
Comment 7•5 years ago
|
||
Oh, hmmm, yeah. Sounds like that's a bug. Let's reopen this, then. If you cannot set <rb> it can indeed be hard to use for some cases.
|
|
Assignee | |
Comment 8•5 years ago
|
||
I'll look into this maybe next weekend if I have time.
data:text/html,<ruby><rb style="font-size:32px">base<rt style="font-size:12px">text</ruby>
Yes, exactly. Revised codepen below:
|
|
Assignee | |
Comment 10•5 years ago
|
||
I have a patch which seems to work fine. Need to update tests and add new ones.
|
|
Assignee | |
Comment 11•5 years ago
|
||
Writing reftest for ruby is still non-trivial... and that reminds me one possible reason that I didn't do this can be because Japanese fonts on Windows, specifically Meiryo, may have an extensive max height, which may cause the annotation to appear very far from the base by default. But I'm not sure whether that's true, or whether that still matters.
I'll do a try push and check on Windows before digging further.
https://treeherder.mozilla.org/#/jobs?repo=try&revision=897b65373cdbfab82ce17c3ecd27e9eb67350729
|
|
Assignee | |
Comment 12•5 years ago
|
||
Looks like there isn't any different between the current rendering and the post-patch one. I guess we can proceed with that. Will submit patch soon.
|
|
Assignee | |
Comment 13•5 years ago
|
||
|
|
Assignee | |
Comment 14•5 years ago
|
||
Another try push with the new wpt: https://treeherder.mozilla.org/#/jobs?repo=try&revision=ad8861a823cabe326f7e49c8e7ff58912cada6eb
|
|
Assignee | |
Comment 15•5 years ago
|
||
Looks like Windows doesn't really like my new wpt :/
|
|
||
Comment 16•5 years ago
|
||
The other thing I wonder -- you know the spec better, so can probably confirm what would be correct -- is about the effect on the block-size of the enclosing line. Compare the two examples in https://jsfiddle.net/63j94c0r/1/. Should the border around the <p> be extended to surround the ruby text in both cases, or only in the second case?
|
|
Assignee | |
Comment 17•5 years ago
|
||
That's a good question. I think the corresponding content in the spec is in Line Spacing:
if the line-height specified on the ruby container is less than the distance between the top of the top ruby annotation container and the bottom of the bottom ruby annotation container, then additional leading is added on the appropriate side of the ruby base container such that if a block consisted of three lines each containing ruby identical to this, none of the ruby containers would overlap.
I think that means we should add sufficient leading to surround the annotation in both cases. I'm a bit surprised that it doesn't work automatically with this fix actually, but good catch!
|
|
Assignee | |
Comment 18•5 years ago
|
||
|
||
Comment 19•5 years ago
|
||
|
||
Comment 22•5 years ago
|
||
| bugherder | ||
|
||
Comment 24•5 years ago
|
||
Is this something you think would be safe/desirable to uplift to 70?
|
|
||
Updated•5 years ago
|
|
||
Updated•5 years ago
|
Description
•