７　テキスト表現

７．１．１ ルビの範囲　(ruby)

ruby 要素は、ルビ（ふりがな）を振るテキストの範囲を表します。

この要素内に対象のテキストを配置して、rt 要素でルビテキストを指定します。また、ルビに対応していないブラウザ用に rp 要素も使用することができます。

さらに、rb 要素でルビをつけたい文字を分割したり、rtc 要素でルビをグループ化して、2種類のルビをつけることもできます。

日本語の場合、下記の例のように単語ごとに ruby 要素で指定した上で、rt 要素を使用してルビを振るような使い方が考えられます。

記述例

<p><ruby>日本語<rt>にほんご</rt></ruby></p>

７．１．２ ルビ　(rt)

rt 要素は、直前のテキストに対するルビ（ふりがな）を表します。

この要素は、ruby 要素の子要素として使用します。

ルビを付けられるテキストの１文字ずつに、ルビを対応付けられない場合や、テキスト全体に及ぶ意味的な注釈によく使われます。

記述例

<p><ruby>百舌鳥<rt>もず</rt></ruby><br>
<ruby>今日<rt>today</rt></ruby><br>
<ruby>閄<rt>ものかげからきゅうにとびだしてひとをおどろかせるときにはっするこえ</rt></ruby></p>

７．１．３ ルビを囲む括弧記号　(rp)

rp 要素はルビをサポートしていないブラウザのためにルビを囲む括弧記号を表します。

ルビに対応していない環境においては rp 要素の内容はそのまま表示されますが、対応している環境では非表示になります。これにより、ルビを括弧で囲んで記述しておき、その括弧部分を rp 要素で指定しておくことで、ルビに対応する環境においては括弧抜きでルビが表示され、非対応環境では、括弧付きで通常のテキストのように表示されます。

この要素は、ruby 要素の子要素として使用します。

ruby 要素内に複数の rt 要素が存在する場合、ルビ対象テキストとルビを関連付けます。

記述例

<p><ruby>半<rp>(</rp><rt>はん</rt><rp>)</rp>可<rp>(</rp><rt>か</rt><rp>)</rp>通<rp>(</rp><rt>つう</rt><rp>)</rp></ruby></p>

７．２．１ 上付き文字　(sup)

sup 要素は、数式や化学式の添字などで使用される上付き文字で表示したい場合に使用します。

単に文字が上付きになるという表示の見栄えを目的として sup 要素を使用してはいけません。 この要素が無ければ意味が変わってしまう場合にのみ使用します。

記述例

<p>Puis-je parler &agrave; M<sup>lle</sup> Brown ?</p>

上付き文字の大きさはブラウザによります。

７．２．２ 下付き文字　(sub)

sub 要素は、数式や化学式の添字などで使用される下付き文字で表示したい場合に使用します。

単に文字が下付きになるという表示の見栄えを目的として sub 要素を使用してはいけません。 この要素が無ければ意味が変わってしまう場合にのみ使用します。

記述例

<p>ペットボトルで用いられる PETの化学式は (C<sub>10</sub>H<sub>8</sub>O<sub>4</sub>)<sub>n</sub>です。</p>

下付き文字の大きさはブラウザによります。

７．３．１ 詳細情報　(details)

details 要素は、普段は非表示にされているが、ユーザが詳細表示したいときだけ表示される要素を記述します。

通常は、「要約・キャプション」などの概要説明のみが表示され、ブラウザがサポートする何らかの詳細表示ボタン（多くのブラウザでは「詳細」）を押した際に詳細情報が表示されます。

summary 要素を記述しないと、多くのブラウザでは「詳細」と表示されます。

open 属性は、記述されていない場合は「詳細」をクリックすると詳細情報が表示されますが、記述されている場合は最初から詳細情報が表示されています。

記述例

<details>  <-- open なし -->
  <div>詳細１</div>
  <div>詳細２</div>
  <div>詳細３</div>
</details>
    ～
    ～
<details open>  <-- open あり -->
  <div>詳細１</div>
  <div>詳細２</div>
  <div>詳細３</div>
</details>

７．３．２ 概要　(summary)

summary 要素が記述されていたら、「詳細」の代わりに summary の内容が表示されます。

記述例

<details>
  <summary>見出し</summary>
  <div>詳細１</div>
  <div>詳細２</div>
  <div>詳細３</div>
</details>
    ～
    ～
<details>
  <summary>オプション</summary>
  <input type="checkbox">オプション１<br>
  <input type="checkbox">オプション２<br>
  <input type="checkbox">オプション３<br>
</details>
    ～
    ～
<details>
  <summary>瀬を早み</summary>
  <p>岩にせかるる　滝川の　われても末に　逢はむとぞ思ふ</p>
</details>

７．４．１ ダイアログ　(dialog)

dialog 要素は、ダイアログを表示します。

open 属性を指定すると最初から表示されます。

記述例

<dialog open>
  <div>タイトル</div>
  本文１<br>
  本文２<br>
</dialog>

open 属性を指定しない場合は最初からは表示されませんので、Javascript で show() あるいは showModal() で表示する必要があります。

ダイアログからの値は、ダイアログの close イベントで、this.returnValue として受け取ることができます。

「入力」ボタンをクリックしてみてください。

記述例

好きな言葉：<span id="favoriteWord"></span><br>
<dialog id="dialog1" onclose="favoriteWord.textContent = this.returnValue;">
  <div>好きな言葉は？</div>
  <input type="text" id="word">
  <button onclick="dialog1.close(word.value);">OK</button>
</dialog>
<button onclick="dialog1.showModal();">入力</button>

７．５．１ 双方向　(bdi)

bdi 要素は、双方向テキスト書式という目的において、その前後から孤立させることになるテキストの範囲を表します。

例えば、左から右に読む英語と、右から左に読むアラビア語が混ざるような双方向テキストにおいて、周囲の方向と独立して存在する区分を示すのに用いられます。

記述例

<ul>
  <li>太郎 : 2020年05月01日</li>
  <li>أَسْعَد : 2020年05月01日</li>
  <li><bdi>أَسْعَد</bdi> : 2020年05月01日</li>
  <li><bdi style="display:inline-block;">أَسْعَد</bdi> : 2020年05月01日</li>
</ul>

７．５．２ 書字方向 (bdo)

bdo 要素は、テキストに対して明示的に書字方向を指定します。bdo 要素に対する dir 属性は必須属性となり、ltr、rtl、どちらかの値を指定する必要があります。

記述例

<p>أَسْعَد : 2020年05月01日</p>
<p>أَسْعَد<bdo dir="ltr"> : 2020年05月01日</bdo></p>