959.txt

[44] 
[[CSS]]
の
[DFN[auto-hiding]]
は、
[[ルビ文字列]]と[[親文字列]]が[[一致]]するとき、
[[ルビ文字列]]を非表示にする機能です。

[45] 
つまり対応[[Webブラウザー]]で表示したときだけ、
特定条件で[[ルビ]]が消えてしまいます。

* 仕様書

[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]]
に[[ルビ]]対応しました!と提供できる状態とは思えません。

[32] 「非表示」とはどういう状態か?
<https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%E2%96%A0%3Cbr%3E%5B%3Cruby%3EA%3Crt%3E%3Cspan%20style%3D%22display%3Ainline-block%3Bwidth%3A10em%3Bbackground%3Aurl(404)%22%3EA%3C%2Fspan%3E%3C%2Fruby%3E%5D%3Cscript%3E%0Avar%20e%3Ddocument.querySelector(%27rt%27)%3B%0Avar%20s%3DgetComputedStyle(e)%3B%0Adocument.write(s.display%2C%27%2C%27%2Cs.visibility)%3B%0A%3C%2Fscript%3E>

- [33] [CODE[rt]] が表示されたとする場合の表示サイズはまったく無視され、
[CODE[rt]] の[[子孫]]が存在しない場合のようにレイアウトされる。
- [36] ただし [CODE[rt]] が存在することによる[[ルビ文字列]]1行分の[[行]]の高さの加算は生かされる。
- [34] [CODE[display]] の[[算出値]]は [CODE[ruby-text]] のまま。
- [35] [CODE[visibility]] の[[算出値]]は [CODE[visible]] のまま。
- [37] [CODE[rt]] の[[子孫]]に [[CSS]] [CODE[url()]] を指定すると、
[[fetch]] は行われる。
[WEAK[(他の非表示の場合と比べると: [CODE[display:none]] のときは [[fetch]] されない。 [CODE[visibility:hidden]] のときは [[fetch]] される。)]]


[49] [CITE@ja[ruby vs. text-emphasis]], [TIME[2016-12-25T13:09:05.000Z]], [TIME[2021-11-12T07:10:15.549Z]] <https://hitkey.nekokan.dyndns.info/ruby-vs-text-emphasis.htm>

[[Firefox]] は[[親文字列]]に対する[[圏点]]の[[レンダリング]]において、
非表示の [CODE[rt]] も存在するものとして[[圏点]]を配置します。
[TIME[2021-11-12T07:11:21.100Z]]

[50] [CITE@en[Re: '''['''css-text-decor''']''' Emphasis marks and auto-hiding ruby annotation]], [[Xidorn Quan]], [TIME[2015-11-20 19:35:41 +09:00]], [TIME[2020-01-17T22:52:29.000Z]], [TIME[2021-11-12T07:12:32.687Z]] <https://lists.w3.org/Archives/Public/www-style/2015Nov/0278.html>

[[Firefox]] がそう実装した事情。

[51] 世間一般での[[ルビ]]と[[圏点]]の処理の具合は[[ルビ]]参照。



[48] 
[CITE@en['''['''css-ruby-1''']''' Should auto-hide match use NFKC and/or strip white space? · Issue #5995 · w3c/csswg-drafts · GitHub]], [TIME[2021-11-12T07:05:38.000Z]] <https://github.com/w3c/csswg-drafts/issues/5995>

[46] 
現時点で主要 [[Webブラウザー]]のうち唯一実装している
[[Firefox]]
が[[仕様書]]と全然違うこんな無茶苦茶な実装状況なのは困ったものです。
果たして[[仕様書]]通りの挙動は実装可能なのでしょうか?

* 抑制

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

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



* 需要

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

[NOTE[
[38] 
括弧書きしたいだけならわざわざ[[マーク付け]]する必要性はまったくありません。
[[ルビ]]でないものを [CODE[ruby]] 要素にしようと発想する人もそれほどいないでしょうし。
強いて言えば
「振り仮名(ふりがな)」
と
「[RUBY[振][ふ]]り[RUBY[仮名][がな]]」
を動的に切り替えられるような表示モードを設けたいときに便利ですが、
そんなことありますか?

[39] 
極めて稀に、日本語学習者向けのサイトで似たような例が無いことも無いのですが、
そういうところは他に「小学[VAR[○]]年生までの[[教育漢字]]以外は仮名書きにする」
のようなオプションも合わせて提供しています。
「振り仮名(ふりがな)」
と
「[RUBY[振][ふ]]り[RUBY[仮名][がな]]」
の切り替えだけ [[HTML]] と [[CSS]] でネイティブに対応できたとしても、
限定的な需要の一部分しかカバーできていないのです。
(しかも「振(ふ)り仮名(がな)」でなく「振り仮名(ふりがな)」にした方が嬉しいかどうかは謎。
後者だと日本語学習者は混乱するのでは。)

]NOTE]




[30] 
「振り仮名」が「振り仮名(ふりがな)」にせなあかんなら、
「振られた」は「振られた(ふられた)」、
「振り出しに戻る」は「振り出し(ふりだし)に戻る(もどる)」にするんやろな。
「振りかぶって」は「振りかぶって(ふりかぶって)」でええんやろか?
「振りハングル」
「振りローマ字」
「身振り手振り」
「ネタ振り」
「大盤振る舞い」
「お振り込み1件」
「全話振り返り一挙放送の実施決定!」
「恋ダンス振り付け動画」
「人の振り見て我が振り直せ」はどこに入れたらええんや???
これもはや[[ルビ]]とは違う何か別の概念ちゃうか?

[42] 
「名誉き損」は「名誉き損(めいよきそん)」になるのですかね。
なら
「ら致」は「ら致(らち)」になるのでしょうか。
「私たち(わたしたち)にら致監禁(らちかんきん)の疑い(うたがい)を吹っ掛け(ふっかけ)た人物(じんぶつ)を名誉き損(めいよきそん)で訴えて(うったえて)やりたい。」
のように表示されても、判読不能ではありませんか?


[43] 
[[ルビ]]は[[文字]]または[[文字]]の列に対して振られるもので、
単語に対して振られるものではない、
という基本的なところで理解を誤ったのではないでしょうか。
[[国語辞典]]が
「ふりがな【振り仮名】」
のように語に仮名表記を与えているのと混同してしまったのかもしれません。




[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[み][み]]]]」

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

[40] [CITE[福岡市には、約1万8千人(平成14年末)の外国人が居住あるいは滞在し、約37万1千人(平成14年)の外国人が入国しています - zyohoteikyonotebiki.pdf]], [TIME[2018-04-13T09:00:41.000Z]], [TIME[2021-05-07T11:57:16.979Z]] <https://www.city.fukuoka.lg.jp/data/open/cnt/3/2341/1/zyohoteikyonotebiki.pdf?20180413163924#page=8>

「[L[[SNIP[]][RUBY[濡][ぬ]]れた[RUBY[シ][し]][RUBY[ー][ー]][RUBY[ツ][つ]]などで[SNIP[]]]]」

「[L[[RUBY[アカウンタビリティー][あかうんたびりてぃー]]]]」 (親とルビの文字が1字ずつ対応する配置)

[41] [CITE@ja[浅井和康さんはTwitterを使っています 「今日は第30話『栄光は誰れのために』ですね。 #ウルトラセブン で最も好きな宇宙人は、プラチク星人と第29話のプロテ星人です。 https://t.co/ma1sFpbbWO」 / [[Twitter]]]], [TIME[2021-10-18T01:29:28.000Z]], [TIME[2021-10-18T01:31:51.814Z]] <https://twitter.com/kazz_asai/status/1449514043786477570/photo/2>

漫画こま (印刷文字)
「[V[[RUBY[ス][す]][RUBY[ペ][ぺ]][RUBY[ー][ー]][RUBY[ス][す]]]]」

(よく見ると地の明朝体 (楷書風仮名) と固有名詞(?)のゴシック体が書き分けられている。
解像度が低くて判然としないが、ルビはどちらの部分でも明朝体 (楷書風仮名)?)

[47] 
[CITE@ja[[[ラジふぁぼ]]公式さんはTwitterを使っています 「本日21時からは #並木のラジふぁぼ 6回目🎉 並木さんお誕生ケーキとパチリ📸🍰 ステキな姫になりますように✨💃 https://t.co/zqbJmAvdmG #並木のラジふぁぼ をつけてツイートしてくださいね❤👆 #ラジふぁぼ https://t.co/qPsXXLYtwa」 / Twitter]], [TIME[2021-11-12T02:26:17.000Z]], [TIME[2021-11-12T03:44:55.878Z]] <https://twitter.com/radifavo/status/1458992958531850249/photo/1>

宣伝画像
「[L[[RUBY[並木さくら][なみき さくら]]]]さん」



* メモ