1210388 - [Wikipedia] Japanese wikipedia has weird ruby usage which causes issue on small size screen

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Xidorn Quan [:xidorn] UTC+10]

There is a widely used template "Template:読み仮名" in the Japanese Wikipedia. It uses ruby, but explicitly sets "display: inline" to <rt> tag.

However, since <ruby> still have the default value, the inlined <rt> is actually recognized as another <rb>. It doesn't really have issue in normal case, but when the screen width is narrow, the text inside <ruby> won't have proper line breaking behavior, because we never break inside <rb>.

You can open page like https://ja.m.wikipedia.org/wiki/Mozilla with Responsive Design View in Firefox Desktop for this issue.

I did a change to that page to revert all styles specified in the default style sheet and make it completely inline [1], but for some reason (which I cannot understand), it is reverted by another editor [2].

Could anyone in Japan evaluate this issue and try to find a way to fix it in the wikipedia?

[1] https://ja.wikipedia.org/w/index.php?title=Template:%E8%AA%AD%E3%81%BF%E4%BB%AE%E5%90%8D&diff=prev&oldid=57025005
[2] https://ja.wikipedia.org/w/index.php?title=Template:%E8%AA%AD%E3%81%BF%E4%BB%AE%E5%90%8D&diff=next&oldid=57025005

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

The default style sheet for ruby: https://drafts.csswg.org/css-ruby-1/#default-stylesheet

Comment 2

[Mike Taylor [:miketaylr]]

Karl, could you ask if someone from Mozilla Japan has contacts at Wikipedia?

Comment 3

[Karl Dubost💡 :karlcow]

Kudo-san,

Could you help us to find out if there are reasons why the change has been reverted?


Xidorn, 
Do you have the link to your specific reverted change history?
Thanks.

Comment 4

[Xidorn Quan [:xidorn] UTC+10]

This reverts my change: https://ja.wikipedia.org/w/index.php?title=Template:%E8%AA%AD%E3%81%BF%E4%BB%AE%E5%90%8D&diff=57025943&oldid=57025005

Actually it is totally unclear to me why Japanese wikipedia inlines the ruby. Chinese wikipedia seem to have the normal ruby usage.

Comment 5

[Karl Dubost💡 :karlcow]

Taking a piece of markup into
https://ja.m.wikipedia.org/wiki/Mozilla


<ruby style="ruby-position:inline; 
             display:inline;">
    <rb style="display:inline; 
               white-space:normal; 
               font-variant-east-asian:normal">
        <span lang="en"><a href="/wiki/Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a></span>
    </rb>
    <span class="rp">（</span>
    <rt style="display:inline; 
               white-space:normal; 
               font-size:inherit; 
               font-variant-east-asian:normal">モジラ・ファイアーフォックス</rt>
    <span class="rp">）</span>
</ruby>


The `ruby-position: inline` is ignored and `display: inline` is taking over.

Xidorn it seems to work as you wished?

Comment 6

[Xidorn Quan [:xidorn] UTC+10]

Yes. Just need to ensure that all ruby elements have display:inline. If the change isn't reverted, we can close this bug.

Comment 7

[Karl Dubost💡 :karlcow]

Closing as fixed. :)