CSS Ruby

仕様書

[7] CSS Ruby Layout Module Level 1, 2020-11-27T09:59:05.000Z, 2020-11-27T12:31:27.122Z https://drafts.csswg.org/css-ruby/

レンダリング

`display` の Web 非互換問題

[234] 1746562 - ruby with display: inline mangles the position of the annotation characters (2021-12-29 23:28:36 +09:00) https://bugzilla.mozilla.org/show_bug.cgi?id=1746562
[235] www.ghibli.jp - Ruby element is not rendered correctly · Issue #96604 · webcompat/web-bugs · GitHub (2021-12-29 23:29:23 +09:00) https://github.com/webcompat/web-bugs/issues/96604

[236] Firefox だけが実装している CSS Ruby の display 指定が Web互換ではないため、 Firefox でだけ表示が崩れる。 Firefox の開発者は仕様通りとして INVALID にした >>234。

[9] Chrome も実装したら同じように崩れるだろと言っているけど、もう何年も未対応のままで、しかもWeb互換性の問題まで見つかったものを、今後 Chrome や Safari が実装する日は来るのだろうか? 誰でも実装できて Web互換性の問題が無い形に CSS Ruby を作り直した方が良いような...

[11] 差別をなくすために差別を温存している? 『「社会正義」はいつも正しい』の読みどころを訳者・山形浩生が解説!|Hayakawa Books & Magazines(β), 2022-12-07T05:33:15.000Z https://archive.md/2022.11.17-025441/https://www.hayakawabooks.com/n/n3856ec404c2f

だからこの人たちの癇に<ruby style="background-repeat:no-repeat;border-bottom-color:rgb(8, 19, 26);border-bottom-style:solid;border-bottom-width:0px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(8, 19, 26);border-left-style:solid;border-left-width:0px;border-right-color:rgb(8, 19, 26);border-right-style:solid;border-right-width:0px;border-top-color:rgb(8, 19, 26);border-top-style:solid;border-top-width:0px;box-sizing:border-box;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-indent:0px;" >障<rt style="background-repeat:no-repeat;color:rgba(8, 19, 26, 0.66);font-size:9px;border-bottom-color:rgba(8, 19, 26, 0.66);border-bottom-style:solid;border-bottom-width:0px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgba(8, 19, 26, 0.66);border-left-style:solid;border-left-width:0px;border-right-color:rgba(8, 19, 26, 0.66);border-right-style:solid;border-right-width:0px;border-top-color:rgba(8, 19, 26, 0.66);border-top-style:solid;border-top-width:0px;box-sizing:border-box;display:block;line-height:normal;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:start;text-indent:0px;-webkit-text-emphasis-color:rgba(8, 19, 26, 0.66);-webkit-text-emphasis-style:none;" >さわ</rt></ruby>った(「トリガーした」)言説は、それだけで有罪確定だ。

[12] rt に display:block が指定されているので、 Chrome では正常に上ルビとして表示されるのに、 Firefox では親文字列の右側にルビ文字列が表示されてしまう。 2022-12-07T05:34:59.00Z