WHATWG HTML仕様書の例からいくつか抜粋
♥☘✶
この例は表意文字と行間注釈の関係をよく表していると思う。</rt>
を足すべきだが)
<ruby>
♥ <rt> Heart <rt lang=fr> Cœur
☘ <rt> Shamrock <rt lang=fr> Trèfle
✶ <rt> Star <rt lang=fr> Étoile
</ruby>
この例をW3C HTML5風に変形すると、dl
要素にそっくりだ:
Description List | Annotation List |
---|---|
|
|
これはあくまでInterlinear Annotationであって、振り仮名のようなreading aidsではない。前述の例の変形:
- A turtle 乌龟 ♥ loves 喜欢 a keyboard 键盘
<ruby>
<rt> A turtle </rt><rt lang="zh-Hans">乌龟</rt>
♥<rt> loves </rt><rt lang="zh-Hans">喜欢</rt>
<rt> a keyboard </rt><rt lang="zh-Hans">键盘</rt>
</ruby>
rt
A turtle loves a keyboard Base ♥ rt
+rt
乌龟 喜欢 键盘
Ruby-BaseとRuby-Textの視覚的な対応を切れば、WHATWG型でも機械に優しい文を書けないわけではない。
- ♥
<ruby>
♥<rt> A turtle loves a keyboard </rt><rt lang="zh-Hans">乌龟喜欢键盘</rt>
</ruby>
W3C HTML5 (Firefox 38+)なら、
で同様のtextを提供できる。 - I❤NY
<ruby>I❤NY <rt><span style="color: transparent;">I</span> love New York</rt></ruby>
love New York I❤NY - ご注文を承りました。
<ruby
>ご注文を承りました。<rp>(</rp
><rt
><span style="color: transparent;">ご</span
>ちゅうもん<span style="color: transparent;">を</span
>うけたまわ<span style="color: transparent;">りました。</span
></rt
><rp>)</rp
></ruby>
うけたまわりました うけたまわ した 承りま
悪いstyleと悪いtextの二択を迫られる状況は地獄でしかない。rb
rtc
要素を知らないbrowserがde facto standardである間は、CSSによる手当てを行うか、以下の例のように頁を分けるのが良さそう。
- わたしたちのできること-It's About Ability-障害者権利条約の話(HTML版)<ルビあり>
- わたしたちのできること-It's About Ability-障害者権利条約の話(HTML版)<ルビなし>
turtleneckを“neck”と書くとき、そのInline Rubyは“
東南
次の例はWHATWG仕様において両面rubyとして描画される予定。Blink
<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角
Firefox 38+では入れ子の注釈が一箇所に重なってしまうので、CSS Rubyを指定してもらえると助かる:
<ruby style="ruby-position: under;"
><ruby style="ruby-position: over;"
>東<rt>とう</rt>南<rt>なん</rt
></ruby
><rt>たつみ</rt
></ruby>の方角
Base 2 |
| ||||||
---|---|---|---|---|---|---|---|
Text 2 | たつみ |
WHATWG HTML仕様は、ruby
要素の無制限の入れ子を禁止している。
The content model of
ruby
elements consists of one or more of the following sequences:
- One or the other of the following:
- Phrasing content, but with no
ruby
elements and with noruby
element descendants- A single
ruby
element that itself has noruby
element descendants- One or the other of the following:
したがって、次の多段注釈は、WHATWG HTMLにおいてInvalid:
<ruby
><ruby
><ruby
><ruby
>東<rt>とう</rt>南<rt>なん</rt
></ruby
><rt>たつみ</rt
></ruby
><rt lang="zh-Latn">dōngnán</rt
></ruby
><rt lang="en">Southeast</rt
></ruby>
東南。Firefox 38+では注釈が重なりすぎて真っ黒に見えているが、どうしようもない。
Text 4 | Southeast | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Base 4 |
|
“dōngnán”を“dōng + nán”に句切りたい場合は、構造を変える必要がある。これは入れ子制限もむべなるかな:
<ruby
><ruby
>東<rt>とう</rt><rt lang="zh-Latn">dōng</rt
>南<rt>なん</rt><rt lang="zh-Latn">nán</rt
></ruby
><rt>たつみ</rt><rt lang="en">Southeast</rt
></ruby>
東南。
Text 2a | たつみ | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
Base 2 |
| |||||||||
Text 2b | Southeast |
WHATWG型の利点は、再帰的な処理でごり押しできそうなことと、plain text用のrubyによって表現できそうなことだろうか。いまのところ行間注釈文字はrp
rb
rtc
要素に相当する制御文字を持たない。
- Interlinear Annotation Characters




東
とう

南
なん

たつみ

dōngnán

Southeast
の方角。- 16進数値文字参照は便宜上のもの。直接書くと、『東とう南なんたつみdōngnánSoutheastの方角』。Blink
/Tridentで豆腐あらわる。 - 青空文庫方式
- ||||東《とう》|南《なん》《たつみ》《dōngnán》《Southeast》の方角。
- 入れ子を受け付けてくれる変換器はあるのだろうか。普通は先に文字数制限に抵触しそう。
W3C HTML5 Rubyなら、多段注釈は普通に書ける:
<ruby>
<rb>東</rb><rb>南</rb><rp>(</rp>
<rtc><rt>とう</rt><rt>なん</rt></rtc><rp>、</rp>
<rtc>たつみ</rtc><rp>、</rp>
<rtc lang="zh-Latn"><rt>dōng</rt><rt>nán</rt></rtc><rp>, </rp>
<rtc lang="en">Southeast</rtc><rp>)</rp>
</ruby>
rtc
要素に"ruby-position: under"
を適用すると
Text 4 | Southeast | |
---|---|---|
Text 3 | dōng | nán |
Text 2 | たつみ | |
Text 1 | とう | なん |
Base | 東 | 南 |
Text 2 | たつみ | |
---|---|---|
Text 1 | とう | なん |
Base | 東 | 南 |
Text 3 | dōng | nán |
Text 4 | Southeast |
Inline-Ruby: 東南( とうなん、 たつみ、 dōngnán, Southeast)
Base | Yes, it's me. |
---|---|
Text 1 | \ ヽ | / / |
Text 2 | \ ヽ | / / |
Text 3 | \ / |
Text 4 | _ わ た し で す _ |
Text 5 | / ̄\ |
Text 6 | ― |^o^| ― |
Text 7 | \_/ |
Text 8 |  ̄  ̄ |
Text 9 | / \ |
Text 10 | / / | ヽ \ |
Text 11 | / / | ヽ \ |