Bug 104763 – Line breaks should not occur inside rt

• Component: Layout and Rendering
• Status: NEW

[Yuki Sekiguchi]

Created attachment 178960 [details]
Reproduced content

Simple ruby should not line break.

CSS3 Ruby 3.4 Ruby box and line breaking
http://www.w3.org/TR/2011/WD-css3-ruby-20110630/#ruby-line-breaking

In the attached html content, line break is occurred inside ruby base and ruby text and it looks like it is not ruby.

[Dean Jackson]

Can you explain this to me? The way I read that specification suggests that the ruby text should break, but it didn't explain that it should break from the before box to the after box. Is that what you are suggesting it should do? e.g.

ruby
*ruby*
*base*
text

Where the *text* means it is the ruby base. Sorry for the ugly text diagram.

[Ryosuke Niwa]

Say we have <ruby>ABC DEF<rt>abc def</rt></ruby> and suppose that the word happens at the space between C and D in the base.

I think the spec. is saying that the rendered text should show up as:
abc
ABC
def
DEF

so that the ruby text still shows up right above the ruby base. I don’t think the spec is very clear about this though. It says there’s an example below but then it doesn’t really provide concrete examples :(

[Yuki Sekiguchi]

(In reply to comment #1)
> Can you explain this to me? The way I read that specification suggests that the ruby text should break, but it didn't explain that it should break from the before box to the after box. Is that what you are suggesting it should do? e.g.
> 
> ruby
> *ruby*
> *base*
> text
> 
> Where the *text* means it is the ruby base. Sorry for the ugly text diagram.

Hmm, CSS Ruby don't say anything about line breaking of simple ruby.
"Ruby box and line breaking" only specify line breaking of complex ruby.

I checked CSS 3 Text and it says:

> For line breaking in/around ruby, the base text is considered part of the same inline formatting context as its surrouding content, but the ruby text is not: i.e. line breaking opportunities between the ruby element and its surrounding content are determined as if the ruby base were inline and the ruby text were not there.
> http://www.w3.org/TR/2012/WD-css3-text-20121113/#line-break-details

In my understanding, ruby base inside simple ruby can break, but ruby text cannot break.

I feel this layout is very odd.
Therefore, I ask Ishii-san, who is editor of CSS3 Text and CCed this bug, how to layout.

[Yuki Sekiguchi]

(In reply to comment #2)
> Say we have <ruby>ABC DEF<rt>abc def</rt></ruby> and suppose that the word happens at the space between C and D in the base.
> 
> I think the spec. is saying that the rendered text should show up as:
> abc
> ABC
> def
> DEF
> 
> so that the ruby text still shows up right above the ruby base. I don’t think the spec is very clear about this though. It says there’s an example below but then it doesn’t really provide concrete examples :(

I think the behavior is ideal, too.

[Dean Jackson]

(In reply to comment #2)
> Say we have <ruby>ABC DEF<rt>abc def</rt></ruby> and suppose that the word happens at the space between C and D in the base.
> 
> I think the spec. is saying that the rendered text should show up as:
> abc
> ABC
> def
> DEF
> 
> so that the ruby text still shows up right above the ruby base. I don’t think the spec is very clear about this though. It says there’s an example below but then it doesn’t really provide concrete examples :(

I agree that the spec isn't clear :(

I read it again and I'm still not sure it is suggesting to break the ruby interleaved with the base. I'm not arguing about what the correct result should be, just pointing out that it isn't clear to me at all!

[Ahmad Saleem]

Created attachment 460240 [details]
All browsers differs

Based on attached screenshots of reproduction, all browsers renders / display this differently, should this be raised as "Spec" or "Webcompat" issue? Thanks!

[Ahmad Saleem]

@Alan - is it something will be fixed with your 'Ruby' related work?

[alan]

Created attachment 467959 [details]
IFC

[alan]

(In reply to Ahmad Saleem from comment #7)
> @Alan - is it something will be fixed with your 'Ruby' related work?
Correct. IFC rendering matches FF now.

[Koji Ishii]

Sorry I missed this conversation in the first place, let me tell you why this behavior was chosen. You may want to check relevant people whether the situation has changed or not.

Traditionally, ruby is used only for short text, and for such use cases, wrapping ruby is considered a bad typography. From that reason, JLREQ[1] prohibits line wrapping inside the `<ruby>` element, and CSS Ruby follows the advice.

This has changed in modern Japanese typography. One of the most major categories[2] uses long ruby quite often. They often apply ruby to 10 or more lines of text.

If the line wrapping is prohibited, the base and ruby overflows the box as in the screenshot in comment #8. In the ePUB situation, this usually means the overflowing text is go outside of the screen, making them unreadable. Publishers said that this "text cutoff" is a critical rendering issue that they would stop providing content to eBook stores unless this is resolved. On the other hand, JLREQ didn't agree wrapping ruby is an "established" typography, as "established" typography rules must be used widely for more than 3-4 decades.

So the current behavior is a compromise between the two. Most agreed that the ideal behavior is what the comment #2 says, but this is not easy to define/implement. We showed the current behavior to publishers, and they said it's an "OK" behavior enough to provide their content to eBook stores.

Recently, this issue got attention at JLREQ again. We're discussing how JLREQ can allow wrapping of ruby ([3], sorry thi is still only in Japanese discussion.) In short, the Chromium team is interested in prototyping wrapping ruby, and ask JLREQ for evaluation sometime next year. If this goes well, we might be able to allow wrapping of ruby in JLREQ, and CSS Ruby can update accordingly.

The Chromium team is likely to keep the current behavior for a while more to make sure content providers are happy, though knowing this is not conformant to the CSS spec. We hope the situation will improve sometime next year.

[1] https://www.w3.org/TR/jlreq/?lang=en
[2] https://en.wikipedia.org/wiki/Light_novel
[3] (Japanese) https://lists.w3.org/Archives/Public/public-i18n-japanese/2023JulSep/0179.html