959.txt

* 仕様書

[REFS[
- [1] [CITE@en[CSS Ruby Layout Module Level 1]], [TIME[2020-11-27T09:59:05.000Z]], [TIME[2020-11-27T12:41:21.355Z]] <https://drafts.csswg.org/css-ruby/#autohide>
]REFS]

* 処理

[10] 
[[CSS Ruby]]
は、
[[親文字列]]と[[ルビ文字列]]が同じとき、
[[ルビ文字列]]を非表示にすると定めています。
[SRC[>>1]]



[2] [[Firefox]] は実装しています。
[[Chrome]]
は実装していません。
[TIME[2020-11-27T12:41:54.300Z]]

-*-*-

[5] 
[[仕様書]]は、
[[要素]]を無視した
[CODE[textContent]]
の比較で、
[CODE[white-space]]
や
[CODE[text-transform]]
の適用''前''を使って同じかどうか判断するとしています。
[SRC[>>1]]

[4] 
[[Firefox]]
で試してみると、
[[子孫]]の[[テキスト]]だけを見ていて、
[[子孫]]の[[要素]]構造は無視するようです。

[[テキスト]]は
[CODE[U+0020]]
を1文字入れるだけでも違いが生じれば隠されません。

しかし
[CODE[script]]
[[要素]]の[[子孫]]は無視されます。

[CODE[img]]
[[要素]]は
[CODE[alt]]
[[属性値]]に置き換えられて評価されます。

[CODE[::after]] [[疑似要素]]で
[CODE[content]['content']]
を設定すると、それも評価に反映されるようです(!)。

[CODE[display:none]] の[[子孫]]は無視されるようです(!)。
[CODE[display:block]] など他の値は影響しないようです。

([CODE[innerText]]
と同じ変換でしょうか。
[[仕様書]]の規定とはぜんぜん違う挙動です。)

[11] [[Firefox]]:
[CODE[text-transform]]
は結果に影響しません (仕様書 [SRC[>>1]] 通り)。
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EA%3Crt%3Ea%3C%2Fruby%3E%3Cruby%3EA%3Crt%20style%3D%22text-transform%3Auppercase%22%3Ea%3C%2Fruby%3E%3Cruby%3E%3Cb%20style%3D%22text-transform%3Alowercase%22%3EA%3C%2Fb%3E%3Crt%3Ea%3C%2Fruby%3E>

[12] [[Firefox]]:
[CODE[white-space]]
は結果に影響しません (仕様書 [SRC[>>1]] 通り)。

[13] [[Firefox]]:
[CODE[[[visibility]]:hidden]]
は結果に影響しません。

[14] [[Firefox]]:
[[入れ子]]の [[auto-hiding]] は結果に影響しません。
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EAB%3Crt%3EA%3Cruby%3EB%3Crt%3EB%3C%2Fruby%3E%3C%2Fruby%3E>

[15] [[Firefox]]: [CODE[br]]
は特別扱いされません。

[20] [[Firefox]]:
[CODE[ol]] > [CODE[li]]
の
[[marker]]
は評価に影響しません。

[16] 
[[Firefox]]:
[[影木]]が評価に影響します (!!!)。

[[影木]]の[[テキスト]]が評価に反映され、[[光木]]の[[子孫]]が無視される:
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EAB%3Ca-b%3EC%3C%2Fa-b%3E%3Crt%3EABC%3C%2Fruby%3E%3Cscript%3Edocument.querySelector(%27a-b%27).attachShadow(%7Bmode%3A%22open%22%7D).appendChild(document.createTextNode(%27x%27))%3C%2Fscript%3E>

[[影木]]の [CODE[slot]] の順序に合わせて入れ替わって評価される:
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EAB%3Ca-b%3E%3Cb%20slot%3D1%3EC%3C%2Fb%3E%3Cb%20slot%3D2%3ED%3C%2Fb%3E%3C%2Fa-b%3E%3Crt%3EABDC%3C%2Fruby%3E%3Cscript%3Evar%20f%3Ddocument.querySelector(%27a-b%27).attachShadow(%7Bmode%3A%22open%22%7D)%3B%0Af.appendChild(document.createElement(%27slot%27)).name%3D2%3B%0Af.appendChild(document.createElement(%27slot%27)).name%3D1%3B%0A%3C%2Fscript%3E>


[17] 
[[Firefox]]:

[CODE[details]] + [CODE[summary]] は、
表示中か隠れているかによって違って評価されます。
[CODE[summary]]
の左にレンダリングされる「▶」は評価に影響しません。
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EA%3Cdetails%20open%3E%3Csummary%3E%3C%2Fsummary%3EB%3C%2Fdetails%3E%3Crt%3EAB%3C%2Fruby%3E%0A>

[CODE[summary]] なしの [CODE[details]] は、 [CODE[summary]] 相当の部分に
([[日本語]]の場合)
「詳細」と表示されますが、これも評価に影響''します'' ([[インスペクター]]に出てきませんが、[[疑似要素]]か[[影木]]と同じ扱いなのでしょう)。
(「詳細」は [CODE[lang]] 属性によっては変化しません。
利用者設定の言語によって変化するのでしょうか。)
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EA%3Cdetails%20open%3EB%3C%2Fdetails%3E%3Crt%3EA%E8%A9%B3%E7%B4%B0B%3C%2Fruby%3E>

[18] 
[[Firefox]]:
[CODE[object]]
[[要素]]はどう処理されるかによって評価方法が変化します。

[CODE[<object data>]] に[[名前解決]]できない[[ドメイン]]の [[URL]]
を指定すると、
読込中は何も表示されないので、[[子孫]]が無視されて評価されます。
[[fetch]] が失敗に終わると[[子孫]]が表示されるので、
[[子孫]]を考慮して再評価されます。
一瞬なので注意して観察:
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EA%3Cobject%20data%3Dhttps%3A%2F%2Fbaddomain.test%2F%3EB%3C%2Fobject%3E%3Crt%3EAB%3C%2Fruby%3E>
([CODE[standby]] [[属性]]には未対応。)

[19] 
[[Firefox]]:
[CODE[svg]]
[[要素]]内のレンダリングされる、されないが評価に影響します。

[21] 
[[Firefox]]:
[CODE[position:absolute]]
や
[CODE[position:fixed]]
の[[部分木]]は無視して評価されます(!)。
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cruby%3EA%3Cb%20style%3D%22position%3Aabsolute%22%3EB%3C%2Fb%3E%3Crt%3EAB%3C%2Fruby%3E>


[25] 
[[Firefox]]:
[CODE[contenteditable]]
内でも、
通常時と同じように表示されます。
[[カーソル]]位置は、
表示されていてもいなくても同じように変化します。
つまり表示されていない[[ルビ文字列]]中のカーソル位置も保持されているので、
次へ次へとカーソル移動していると[[親文字列]]の次に見えない[[ルビ文字列]]にうつり、
見えないまま次へ次へと進めていればいつか[[ルビ]]付き文字列の次に進む、
という挙動になります。
[[ルビ文字列]]中のどこかわからない位置で何か入力すれば、
[[親文字列]]と[[ルビ文字列]]が一致しなくなるので、
突如[[ルビ文字列]]が表示されます。
[[ルビ文字列]]内で[[かな漢字変換]]すると、
候補が変わるたびに一致したりしなかったりで、
表示されたりされなかったり変わります。

仕組みを知ってる人にとっては当然の挙動ですが、
こんなエディターは使い物になるのでしょうか?
[[HTML]] も [[CSS]]
も知らない一般人が使う
[[CMS]]
に[[ルビ]]対応しました!と提供できる状態とは思えません。

* 需要

[3] 
仕様書 [SRC[>>1]]
は
「振り仮名(ふりがな)」
と
「[RUBY[振][ふ]]り[RUBY[仮名][がな]]」
が同じ
[[HTML]]
で記述できる機能だと説明していますが、
そんなことできて嬉しい人はどれだけいるのでしょうか?
「振り仮名(ふりがな)」
なんて書きたい人ってそんなにいなくないですか。
[WEAK[(敢えて括弧書きにするなら、「振(ふ)り仮名(がな)」の場合の方が多いのでは。そうしないと読む人も括弧がどこにかかっているのか判断できません。)]]
しかもそれをわざわざ
[CODE[ruby]]
要素で記述したい人はそのうちの更に一部でしょう。
[WEAK[(括弧書きしたいだけならわざわざ[[マーク付け]]する必要性はまったくありません。[[ルビ]]でないものを [CODE[ruby]] 要素にしようと発想する人もそれほどいないでしょうし。)]]



[7] 
[[CSS Ruby]]
はこれをデフォルトの挙動としていて、
無効にする手段を提供していません。

[8] 
一応
[CODE[ruby-merge]]
という[[特性]]があって
(他の挙動と抱合せで)
制御できないこともないのですが、
[[Firefox]]
は
[CODE[ruby-merge]]
に未対応です。
[TIME[2020-11-27T12:57:49.0Z]]

[6] 
[[ルビ]]の処理はただでさえ複雑なはずなのに、
こんなレアケースのために複雑な処理は必要なのでしょうか。
(それで[[相互運用性]]を犠牲にしているのですから、...)

* 親文字列と同じルビ文字列

[9] 
この機能が必要になるレアケースよりも、
[[親文字]]と同じ[[ルビ文字列]]が必要になるレアケースの方が、
むしろあり得るのではないでしょうか。
こんな特殊な規則があるとは知らず、
なぜかルビが表示されないと困惑する[[Web開発者]]が可哀想です。


[31] 
例えば別の入力文書形式から [[HTML]] に変換して出力するようなソフトウェアを開発する人が、
[[auto-hiding]] のことをどれだけ知っているでしょうか (私は最近はじめて知って驚きました)。
こんなケースの動作確認が必要だとも思わんでしょう。
製品を出してみたら、
入力によってルビが表示されたり、されなかったりする不具合としか思えない挙動になってしまうなんて、
開発者を貶める罠としか思えません。




[22] [CITE@ja[[[履歴書]]のふりがなにはルールがある!知っておきたい基礎知識 | cocoiro career (ココイロ・キャリア)]], [TIME[2020-11-28T03:50:23.000Z]] <https://cocoiro.me/career/article/98348#i-4>

>基本的に、数字、カタカナ、ひらがなには、ふりがなを書かないのが一般的です。しかし、氏名欄に関しては、漢字やひらがなに関係なくふりがなを書きます。例えば、名前がひらがなで「あかり」の場合、ふりがなの欄にも「あかり」と記入しましょう。

[23] 
[CITE@ja[【難読[[漢字]]】「希う」の読み方。これはなんて読む? | ハルメク暮らし]], [TIME[2020-11-28T03:57:40.000Z]] <https://halmek.co.jp/culture/c/hobby/1706>

画像化された文字列

>
[L[[RUBY[希う][こいねがう]]]]

([[グループルビ]])

画像化された文字列

>
[L[[RUBY[希む][のぞむ]]]]

([[グループルビ]])


[24] 
[[行書体]]、[[草書体]]の[[フォント]]で[[親文字列]]を書いて、
[[楷書体]]で[[ルビ文字列]]を書きたいケースもありそう。


[FIG(quote)[
[FIGCAPTION[
[26] [CITE[ルビを付けよう:『ロボ辞苑』にルビか? - livedoor Blog(ブログ)]]
([TIME[2020-11-28T12:05:11.000Z]])
<http://blog.livedoor.jp/ruby_furigana/archives/52100373.html>
]FIGCAPTION]

>  2015年12月23日(水)10:05~正午近く、NHKテレビ「輪投げ対決高専ロボコン全国大会」の中で、『ロボ辞苑』の頁に、下記のようにルビが付いていた。
>           まもの      ほーす
>         【 魔 物 】   【 ホース 】

]FIG]

[27] 
[CITE[[[鬼滅の刃]]]]
シリーズのロゴ
「[L[[RUBY[鬼滅の刃][きめつのやいば]]]]」

デザインされた文字のロゴ。[[親文字列]]と[[ルビ文字列]]の対応関係がつかない[[グループルビ]]。


[28] [CITE@ja[[[夜桜さんちの大作戦]]公式さんはTwitterを使っています 「なななんと!JC7巻発売を記念して、#夜桜さんちの大作戦 オリジナル主題歌「DA・DA・DA・DA・I・SA・KU・SEN」を坂道グループなどへの楽曲提供でも知られる近藤圭一さんが描き下ろしてくださいました! 溢れ出るニチアサ感と中毒性!ぜひお聞き下さい! PVはこちら→ https://t.co/uFH0PoxfFn https://t.co/QDumNjdumS」 / Twitter]], 午後8:12 · 2021年3月4日 [TZ[+09:00]], [TIME[2021-03-05T05:55:27.000Z]] <https://twitter.com/OfficialHitsuji/status/1367432756775374851/photo/1>

>[RUBYB[近藤][こんどう]][RUBYB[圭一][けいいち]]さんに
>[RUBYB[主題歌][しゅだいか]][RUBYB[作って][つくって]]
>もらいました!!



[29] [CITE[TVアニメ『BLUE REFLECTION RAY/澪』放送直前特番 - 2021/03/16(火) 20:00開始 - ニコニコ生放送]]
([TIME[2021-03-23 10:55:18 +09:00]])
<https://live.nicovideo.jp/watch/lv330751607>
13分頃

スケブ ([[高倉有加]]の[[手書き]]) 「[L[[RUBY[悩][なや]][RUBY[み][み]]]]」

[[高倉有加]]「「み」要らなかったかな?」




* メモ