Ruby tags break rendering and search context

[mosaic-roll]

Hi, I found two issues regarding <ruby> tags in foliate-js (also reproducible in Readest).

1. Rendering Issue:
Line breakings inside the HTML are treated as unexpected spaces around words.
Workaround: I have to manually strip all blanks in my backend.

2. Search Issue:
Searching is broken when a word contains Ruby tags. For example, if I search for "麦" in the sample below, the result only returns a single character "麦" in isolation, instead of retrieving the full sentence context. It seems the search engine ignores the surrounding context of the <ruby> block.

Sample HTML:

<p class="calibre">　この村では、見事に実った<ruby>

    <rb>麦</rb>

<rt>むぎ</rt>

    <rb>穂</rb>

<rt>ほ</rt>

    </ruby>が風に揺られることを<ruby>

    <rb>狼</rb>

<rt>オオカミ</rt>

    </ruby>が走るという。</p>

[johnfactotum]

Can you clarify what you mean by "Line breakings inside the HTML are treated as unexpected spaces around words"? Is it rendering the HTML any differently from a regular web page?

[mosaic-roll]

Can you clarify what you mean by "Line breakings inside the HTML are treated as unexpected spaces around words"? Is it rendering the HTML any differently from a regular web page?

Take Readest as an example.

If you have line breaks or spaces inside <ruby> tags, they get treated as actual spaces in the rendered text.

That sentence becomes this.
（These line breaks are treated as spaces on screen, and become real breaks when copied.)

　この村では、見事に実った

    麦



    穂



    が風に揺られることを

    狼



    が走るという。

However, the proper rendering should be:

この村では、見事に実った麦穂が風に揺られることを狼が走るという。

[johnfactotum]

Well, I made a sample EPUB from your HTML above: ruby-test.zip

Opening the EPUB in https://johnfactotum.github.io/foliate-js/reader.html in Firefox, it is rendered like so:

Which seems fine to me, and it's also how it's rendered if you extract the XHTML and open it in the browser directly.

And in WebKitGTK:

In Chromium:

So WebKitGTK and Chromium look kind of similar and somewhat different from Firefox. But that would be a browser bug.

Copying the text in Firefox produces:

　この村では、見事に実った 麦 穂 が風に揺られることを 狼 が走るという。

Again, it's the same in foliate-js's demo, and when opening the XHTML file directly.

Using WebKitGTK, the text becomes (both foliate-js's demo, and when opening the XHTML file directly)

　この村では、見事に実った 麦 むぎ 穂 ほ が風に揺られることを 狼 オオカミ が走るという。

Chromium seems to produce the exact same result as WebKitGTK.

So the copied text is different in Firefox and WebKitGTK/Chromium, though that would, again, be a browser bug.

Is this correct? Or are you using some setup where the browser renders and copies differently?

[mosaic-roll]

I'm not on a computer now. I tested with Readest. The line breaks seem to be a Readest issue, sorry.

But what I really care about is whitespace inside <ruby> tags.

As you can see, there are extra spaces around the <rb> element. Although <rt> should be displayed separately, <rb> is part of the sentence. It would be better if a reader removes those spaces.

The extra spaces would affect searching results, or scenarios like looking up words in dictionaries.

But I'm not sure if it should be handled by Foliate-js or the reader itself, as replacing these spaces is pretty easy.

[johnfactotum]

According to MDN, Blink and WebKit have "support for parsing the rb element, but not for rendering rb content as expected." So this is indeed a browser issue. The rendering in Firefox appears to be right, even though there is still a space between 麦 and 穂, though the copied text seems wrong and does not match the rendered text. One can check the spec at https://drafts.csswg.org/css-ruby/.

So anyway, probably the right place to fix it would be the browser engines. Sure, they'll tell you that <rb> is obsolete and so they don't care. But we can say to them, "Shouldn't any of the supposedly super-intelligent AI models that you're selling be able to one-shot it?" But you probably don't even need to invoke this reason. With the amount of money they are making they could just hire any random human and get it done in no time if they wanted to.

[mosaic-roll]

replacing these spaces is pretty easy.

By replacing spaces, I mean when the sentence is written in this form, it always displays and copies correctly. For more information:

<p class="calibre">　この村では、見事に実った<ruby><rb>麦</rb><rt>むぎ</rt><rb>穂</rb><rt>ほ</rt></ruby>が風に揺られることを<ruby><rb>狼</rb><rt>オオカミ</rt></ruby>が走るという。</p>

[johnfactotum]

It's doable, but probably not worth it, IMO, unless it's common enough. Most books probably don't use <rb> or use spaces in this way. At least not the one's that I've seen. Considering that it's not rendered correctly in WebKit, which is probably what gets used the most in ebook apps/devices, it seems unlikely to me that it's widely used. One alternative solution would be for the publisher or user to just preprocess any books so that the markup is modernized or the spaces removed once and for all.

[mosaic-roll]

Yes, preprocessing is cheap.
Thank you for making this package