[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]] ]REFS] * 処理 [10] [CITE[[[CSS Ruby]]]] は、 [[親文字列]]と[[ルビ文字列]]が同じとき、 [[ルビ文字列]]を非表示にすると定めています。 [SRC[>>1]] [2] [[Firefox]] は実装しています。 [[Chrome]] は実装していません。 [TIME[2020-11-27T12:41:54.300Z]] [FIG(important)[ [67] [[Firefox]] ではこの記事の一部が正しく表示されません。ご注意ください。 ]FIG] [68] 以下に示すとおり、 [CITE[CSS Ruby]] の規定と [[Firefox]] の実装は違う点が多いです。 -*-*- [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]] 通り)。 [12] [[Firefox]]: [CODE[white-space]] は結果に影響しません (仕様書 [SRC[>>1]] 通り)。 [13] [[Firefox]]: [CODE[[[visibility]]:hidden]] は結果に影響しません。 [14] [[Firefox]]: [[入れ子]]の [[auto-hiding]] は結果に影響しません。 [15] [[Firefox]]: [CODE[br]] は特別扱いされません。 [20] [[Firefox]]: [CODE[ol]] > [CODE[li]] の [[marker]] は評価に影響しません。 [16] [[Firefox]]: [[影木]]が評価に影響します (!!!)。 [[影木]]の[[テキスト]]が評価に反映され、[[光木]]の[[子孫]]が無視される: [[影木]]の [CODE[slot]] の順序に合わせて入れ替わって評価される: [17] [[Firefox]]: [CODE[details]] + [CODE[summary]] は、 表示中か隠れているかによって違って評価されます。 [CODE[summary]] の左にレンダリングされる「▶」は評価に影響しません。 [CODE[summary]] なしの [CODE[details]] は、 [CODE[summary]] 相当の部分に ([[日本語]]の場合) 「詳細」と表示されますが、これも評価に影響''します'' ([[インスペクター]]に出てきませんが、[[疑似要素]]か[[影木]]と同じ扱いなのでしょう)。 (「詳細」は [CODE[lang]] 属性によっては変化しません。 利用者設定の言語によって変化するのでしょうか。) [18] [[Firefox]]: [CODE[object]] [[要素]]はどう処理されるかによって評価方法が変化します。 [CODE[]] に[[名前解決]]できない[[ドメイン]]の [[URL]] を指定すると、 読込中は何も表示されないので、[[子孫]]が無視されて評価されます。 [[fetch]] が失敗に終わると[[子孫]]が表示されるので、 [[子孫]]を考慮して再評価されます。 一瞬なので注意して観察: ([CODE[standby]] [[属性]]には未対応。) [19] [[Firefox]]: [CODE[svg]] [[要素]]内のレンダリングされる、されないが評価に影響します。 [21] [[Firefox]]: [CODE[position:absolute]] や [CODE[position:fixed]] の[[部分木]]は無視して評価されます(!)。 [25] [[Firefox]]: [CODE[contenteditable]] 内でも、 通常時と同じように表示されます。 [[カーソル]]位置は、 表示されていてもいなくても同じように変化します。 つまり表示されていない[[ルビ文字列]]中のカーソル位置も保持されているので、 次へ次へとカーソル移動していると[[親文字列]]の次に見えない[[ルビ文字列]]にうつり、 見えないまま次へ次へと進めていればいつか[[ルビ]]付き文字列の次に進む、 という挙動になります。 [[ルビ文字列]]中のどこかわからない位置で何か入力すれば、 [[親文字列]]と[[ルビ文字列]]が一致しなくなるので、 突如[[ルビ文字列]]が表示されます。 [[ルビ文字列]]内で[[かな漢字変換]]すると、 候補が変わるたびに一致したりしなかったりで、 表示されたりされなかったり変わります。 仕組みを知ってる人にとっては当然の挙動ですが、 こんなエディターは使い物になるのでしょうか? [[HTML]] も [[CSS]] も知らない一般人が使う [[CMS]] に[[ルビ]]対応しました!と提供できる状態とは思えません。 [32] 「非表示」とはどういう状態か? - [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]] - [52] [[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]] [[Firefox]] がそう実装した事情。 - [53] [CITE@en[CSS Text Decoration Module Level 3]], [TIME[2021-11-12T23:31:15.000Z]], [TIME[2021-11-13T01:14:52.129Z]] - [54] [CITE@en[Re: '''['''css-text-decor''']''' Emphasis marks and auto-hiding ruby annotation]], [[Koji Ishii]], [TIME[2015-11-13 14:32:05 +09:00]], [TIME[2020-01-17T22:52:29.000Z]], [TIME[2021-11-13T01:15:06.025Z]] [55] [[仕様書]]には [[auto-hiding]] であろうが空の[[ルビ注釈]] ([[ルビ文字列]]部分のこと) だろうが、 [[ルビ]]と[[圏点]]があるとき[[ルビ]]の外側に[[圏点]]を置く、 と定めて、[[親文字列]]の''直上''に[[圏点]]を置いた例図があります。 [SRC[>>53]] (例はレンダリング例だけなので、[[ルビ文字列]]が存在しないのか、 [[auto-hiding]] の結果なのか空の[[ルビ注釈]]があるのか、 区別がつきません。) この図を見せられると [[auto-hiding]] も含めて[[親文字列]]の直上に[[圏点]]が接するのが意図したレンダリングに思えますが、 よく読むと「外側」とだけ定められていて接することは求められておらず、 そう解釈する意図で書かれたもの [SRC[>>54]] のようです。 しかもその例は [[auto-hiding]] であるとも空の[[ルビ注釈]]であるとも言っていないので、 [[auto-hiding]] の挙動例であるとも断言できない ([[auto-hiding]] も想定に含めて書かれているらしい [SRC[>>54]] のですが)。 [56] なんにせよ、仕様書だけからではそう読み取るのは至難の業とはいえ、 [[auto-hiding]] の場合とそうでない場合とで[[圏点]]のレンダリング位置が異なる実装は当然に認められる (がそうしなければならないともいえない) [SRC[>>54]] ようです。そして[[著者]]にそれを制御する手段は与えられておらず、 完全に[[Webブラウザー]]依存となります。 [57] あるいは、現状唯一の実装である [[Firefox]] の挙動を前提に、 [[圏点]]の位置を制御したい[[著者]]は [[auto-hiding]] を使うか[[ルビ]]にしないかを選択できる、 ともいえます。 (濫用でしかありませんが、他に手段がなければそうすることになるでしょう。) [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]] [46] 現時点で主要 [[Webブラウザー]]のうち唯一実装している [[Firefox]] が[[仕様書]]と全然違うこんな無茶苦茶な実装状況なのは困ったものです。 果たして[[仕様書]]通りの挙動は実装可能なのでしょうか? [69] [CITE[CSS Ruby]] の規定は現実的に実装可能とは思えないですし、 [[Firefox]] の実装も一般の[[著者]]に理解可能とは思えない奇怪さです。 そして [[Firefox]] 以外の [[Webブラウザー]]が実装する動きもありません。 仮に将来実装するとしても、 [CITE[CSS Ruby]] と [[Firefox]] のどちらかと完全に一致するとは思えません。 どう転んでも[[相互運用性]]の確保は絶望的です。 これだけ難のある仕様がなぜいつまでも撤回されずにいるのか不可解です。 * 抑制 [7] [[CSS Ruby]] はこれをデフォルトの挙動としていて、 無効にする手段を提供していません。 [8] 一応 [CODE[ruby-merge]] という[[特性]]があって (他の挙動と抱合せで) 制御できないこともないのですが、 [[Firefox]] は [CODE[ruby-merge]] に未対応です。 [TIME[2020-11-27T12:57:49.0Z]] [70] 難のある仕様がデフォルト挙動というだけでも迷惑な話なのに、 それを実装しているブラウザーが無効化の手段を提供していないというのは、 迷惑この上ありません。 [[auto-hiding]] 実装前は「何もしない」挙動だったはずなので、 無効化手段の提供はそこまで難しいものではなかったはずです。 なぜこんなことになったのでしょうか。 * 需要 [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] 「名誉き損」は「名誉き損(めいよきそん)」になるのですかね。 なら 「ら致」は「ら致(らち)」になるのでしょうか。 「私たち(わたしたち)にら致監禁(らちかんきん)の疑い(うたがい)を吹っ掛け(ふっかけ)た人物(じんぶつ)を名誉き損(めいよきそん)で訴えて(うったえて)やりたい。」 のように表示されても、判読不能ではありませんか? [59] 「12[RUBY[月][がつ]]21[RUBY[日][にち]]」は「12月21日(12がつ21にち)」にするのですかね。。。 「12[RUBY[月][がつ]][RUBY[1日][ついたち]]」 との辻褄をあわせないと。 [60] 「[RUBY[新][しん]][RUBY[型][がた]]コロナウイルス[RUBY[感][かん]][RUBY[染][せん]][RUBY[症][しょう]]」 は 「新型(しんがた)コロナウイルス感染症(かんせんしょう)」? それとも 「新型コロナウイルス感染症(しんがたころなういるすかんせんしょう)」? 「新型コロナウイルス感染症(しんがたコロナウイルスかんせんしょう)」? 読み仮名もカタカナにしないと [[auto-hiding]] が効かないけど、いいんかなあ? [[ひらがな]]で書いて 「[RUBY[新][しん]][RUBY[型][がた]][RUBY[コロナウイルス][ころなういるす]][RUBY[感][かん]][RUBY[染][せん]][RUBY[症][しょう]]」 になっても、普通の[[日本語]]だと困るよね (逆に[[やさしい日本語]]だと消えてしまう方が困るけど)。 [43] [[ルビ]]は[[文字]]または[[文字]]の列に対して振られるもので、 単語に対して振られるものではない、 という基本的なところで理解を誤ったのではないでしょうか。 [[国語辞典]]が 「ふりがな【振り仮名】」 のように語に仮名表記を与えているのと混同してしまったのかもしれません。 [58] 関連記事: [[仮名漢字混じり語の振り仮名]] [6] [[ルビ]]の処理はただでさえ複雑なはずなのに、 こんなレアケースのために複雑な処理は必要なのでしょうか。 (それで[[相互運用性]]を犠牲にしているのですから、...) * 親文字列と同じルビ文字列 [9] この機能が必要になるレアケースよりも、 [DFN[[[親文字]]と同じ[[ルビ文字列]]]]が必要になるレアケースの方が、 むしろあり得るのではないでしょうか。 こんな特殊な規則があるとは知らず、 なぜかルビが表示されないと困惑する[[Web開発者]]が可哀想です。 [31] 例えば別の入力文書形式から [[HTML]] に変換して出力するようなソフトウェアを開発する人が、 [[auto-hiding]] のことをどれだけ知っているでしょうか (私は最近はじめて知って驚きました)。 こんなケースの動作確認が必要だとも思わんでしょう。 製品を出してみたら、 入力によってルビが表示されたり、されなかったりする不具合としか思えない挙動になってしまうなんて、 開発者を貶める罠としか思えません。 [65] 「[[親文字]]と同じ[[ルビ文字列]]が必要になるレアケース」 ← これ全然レアケースじゃないんだよなあ [66] [[auto-hiding]] の設計者はこの程度の基本的な調査もしないで、 自分達の脳内の理屈だけで仕様を組み立ってているから、 使い物にならなくてしまっているわけで。 [40] 統一的な取り扱いを目的として、 [[仮名]]でもまったく同じ[[仮名]]の[[振り仮名]]を設定する場面は案外多いです。 [SEE[ [[仮名への仮名ルビ]] ]] 例えば: - [26] 人物紹介で漢字の名前の人と仮名の名前の人が混じっている場合のように、 リスト全体の統一性のために機械的にすべてに[[振り仮名]]を与える事例がよくあります。 - [22] [[親文字列]]と[[ルビ文字列]]で記入欄が分かれているとき、 [[親文字列]]が[[仮名]]でも同じ[[ルビ文字列]]を記入するよう求める事例があります。 [23] [CITE@ja[【難読[[漢字]]】「希う」の読み方。これはなんて読む? | ハルメク暮らし]], [TIME[2020-11-28T03:57:40.000Z]] 画像化された文字列 > [L[[RUBY[希う][こいねがう]]]] ([[グループルビ]]) 画像化された文字列 > [L[[RUBY[希む][のぞむ]]]] ([[グループルビ]]) [24] [[行書体]]、[[草書体]]の[[フォント]]で[[親文字列]]を書いて、 [[楷書体]]で[[ルビ文字列]]を書きたいケースもありそう。 ([[変体仮名]]に現行[[仮名]]で書いた例は[[仮名へのルビ]]参照。) [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]] >[RUBYB[近藤][こんどう]][RUBYB[圭一][けいいち]]さんに >[RUBYB[主題歌][しゅだいか]][RUBYB[作って][つくって]] >もらいました!! [29] [CITE[TVアニメ『BLUE REFLECTION RAY/澪』放送直前特番 - 2021/03/16(火) 20:00開始 - ニコニコ生放送]] ([TIME[2021-03-23 10:55:18 +09:00]]) 13分頃 スケブ ([[高倉有加]]の[[手書き]]) 「[L[[RUBY[悩][なや]][RUBY[み][み]]]]」 [[高倉有加]]「「み」要らなかったかな?」 [71] [CITE@ja[ひめ@女体化したい人生だったさんはTwitterを使っています: 「『明治初期長野縣町村字地名大鑑』に千本柳村の小字に「いもり」として載ってました>蜎リ https://t.co/ByUzBEHvGv 登記ねっと上は千本柳までしか候補がないので小字は廃止されているのかも(一方で農地ナビ上は「小玉川原」などが確認できる) https://t.co/pbCIE1ckqX」 / [[Twitter]]]], [TIME[2022-04-12T09:59:04.000Z]], [TIME[2022-04-12T10:09:17.979Z]] [[地名]]の一覧表 ([[明朝体]]) 「[L[[RUBY[せんど道][せんどみち]]]]」 [62] [[ピンイン]]と[[漢字]]を併記した20世紀中期の[[中文]]の新聞の事例 [SEE[ [[上ルビ]] ]] では、 すべての[[文字]]にそれぞれ[[上ルビ]]が振られており、 [[欧州数字]]や[[句読点]]は同じ[[文字]]が置かれていました。 [41] [CITE@ja[だのさんはTwitterを使っています: 「にほへ碑 小笠原神社境内にある 文久2年にやってきた八丈島からの移民の子供らに幕府役人が読み書きを教えた その際使い終えた筆を供養するための筆塚としてこの碑を建てたとされている https://t.co/O6yvIPvX2P」 / [[Twitter]]]], 午後11:34 · 2022年8月26日 [TZ[+09:00]], [TIME[2022-08-28T07:56:09.000Z]] 文化財案内看板 見出し ([[楷書]]) 「[L[[RUBY[に][に]][RUBY[ほ][ほ]][RUBY[へ][へ]][RUBY[碑][のひ]]]]」 [[仮名]]も含めて1文字ずつ[[振り仮名]]。[[助詞]]「の」は[[漢字]]にまとめて振られている。 [63] [CITE@ja[5774.pdf]], [TIME[2023-03-28T07:30:13.000Z]], [TIME[2024-09-01T02:05:26.339Z]] [[地名]]リスト 「[L[[RUBY[山][ヤマ]][RUBY[ノ][ノ]][RUBY[神][カミ]]]]」 ([[明朝体]]) 他多数。漢字・仮名の各文字ごとに読みが片仮名で振られている。[[ルビ]]は[[親文字]]単位で[[左寄せ]]。 [64] [CITE@ja[Xユーザーの長谷川ミュウツーさん: 「なんで https://t.co/H7waYpgYWF」 / X]], [TIME[午後11:05 · 2026年1月18日][2026-01-18T14:05:16.000Z]], [TIME[2026-01-22T05:01:17.000Z]] * メモ [47] いままであまり気にしないで [[Firefox]] で表示した文章を[[コピペ]]してましたけど [WEAK[(表示されてる[[ルビ文字列]]がコピーされないので面倒くさいなーと思いつつw)]]、 実はそれ以外に [[Firefox]] でだけ表示されてない[[ルビ文字列]]が隠れてるかもってことですか。はあ。 困ったなあ。 [61] [[引用]]のときは [[Chrome]] 使うようにしたほうがいいのかなー