やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > HTML文書におけるルビの振り方について考える（<ruby><rp><rt>）

HTML文書におけるルビの振り方について考える（<ruby><rp><rt>）

HTML

　前回、HTMLをテキスト化するときルビの表示がいくつかのパターンに分かれた。では、どう書くべきか？　気になったので考えてみた。

成果物

ルビ

プレーンテキストでの表示結果

HTML プレーンテキスト表示
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby> 漢字(かんじ)
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby> 漢(かん)字(じ)
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby> 漢かん字じ
<ruby>漢字<rt>かんじ</rt></ruby> 漢字かんじ

HTMLでの表示結果

kanji.html

<html>
<body>
<p><ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby></p>
<p><ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby></p>
<p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby></p>
<p><ruby>漢字<rt>かんじ</rt></ruby></p>
</body>
</html>

zenity --text-info --html --filename=kanji.html

　画像は小さくて見づらいかもしれないが、<rt>が1つのときと2つのときとではスペースの空き方が違う。振るべき字に対して中央寄せされている。

いつ、どれを使うべきか？

　ルビが表示されるHTMLなら、漢字1字ずつふりがなを振るほうが正確。

　だが、ルビが振れないプレーンテキストなら、単語全体で1つのルビにしないとウザい。漢(かん)字(じ)のように。

　また、単語がとぎれるため、一致検索にも問題が出る。もし文章検索なら、ルビのせいでルビも含めないと一致しなくなってしまう。たとえば漢字ですと検索したくても漢字(かんじ)ですに一致せねばヒットしないなど。

選択肢

　ルビに関しては以下のような選択肢がありうる。

  • ルビは振らない
  • ルビを振る（単語全体<rp>）
  • ルビを振る（単語全体）
  • ルビを振る（漢字1字<rp>）
  • ルビを振る（漢字1字）

　プレーンテキスト化まで考慮するなら<rp>を使う。それを嫌うなら<rt>のみ。それぞれには先述の問題があるので回避するなら、ルビを振らない。

折衷案

　ルビを振らないほうが良さそう。だが、読めない字をいちいち検索するのも面倒。人名など特殊なケースでは検索しても見つからない場合すらありうる。そこで、その単語が最初に登場するときだけルビを振るという手もある。

　書籍では見かける方法。ただし、これがHTMLでどれほど通用するかわからない。<title>,<h1>タグ内などでも使えるだろうか？

kanji.html

<html>
<head><title><ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby></title></head>
<body>
<h1><ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby></h1>
<p><ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby></p>
<p><ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby></p>
<p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby></p>
<p><ruby>漢字<rt>かんじ</rt></ruby></p>
</body>
</html>

zenity --text-info --html --filename=kanji.html

　<title>ではダメ。<h1>ではOK。

　また、ルビを振る「最初」とは、その記事の最初であって、ブログ全体の記事ででてくる最初ではない。つまりHTMLファイル単位である。本なら、本に出てくる最初であって、ページの最初ではない。この差は大きい。HTMLのほうがルビを振る頻度が高いだろう。つまり、ルビ振りを最小限にしたくても難しい。もっとも、HTMLが本のような構成なら、本と同様でよいかもしれないが。

　ブログのように1HTMLあたり個別の内容になりうるなら、ルビ振りはHTML文書単位にすることになるだろう。

別案

　用語にリンクを貼る。そのページにてルビ振りする。ブログごとに用語辞典をつくる感じ。

　または<span title="かんじ">漢字</smapn>のように、マウスオーバーしたときにだけ表示されるようにする。

　ただし、どちらもルビがプレーンテキストに出てくることはない。

優先順におけるルビ対応

HTML5

HTML プレーンテキスト表示
<ruby>漢字<rt>かんじ</rt></ruby> 漢字かんじ

　メリットは短く書けること。可読性もよい。

　デメリットは、プレーンテキストではルビが()で括られない。ルビ非対応ブラウザも同じ。

HTML4

HTML プレーンテキスト表示
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby> 漢(かん)字(じ)

　メリットは広い環境で正確に伝えられること。ルビ対応ブラウザでは対応する字にセンタリングされてルビ振りされる。どの字に対するルビかわかる。ルビ非対応ブラウザやプレーンテキストでは、その字の直後に(ルビ)と表示される。

　デメリットは可読性の悪さ。HTMLコードはもちろん、ルビ非対応・プレーンテキストにおける出力結果が漢(かん)字(じ)のようになってしまい、読みづらい。

HTML4(単一ルビ)

HTML プレーンテキスト表示
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby> 漢字(かんじ)

　メリットは広い環境でルビが表示されること。ルビ非対応ブラウザやプレーンテキストでは、その単語の直後に(ルビ)と表示される。1単語あたりルビ1つなら許容範囲か。

　デメリットは比較的小さい。強いて言うなら、コードの可読性と、ルビが表示されてしまうこと。ルビ非対応ブラウザやプレーンテキストにおいて、漢字ですと検索したかったのに、漢字(かんじ)ですと検索せねばヒットしないということが起こりうる。

ルビなし

　漢らしくルビは一切振らない。読めない？　ｇｇｒｋｓ

　メリットはルビ対応・非対応・プレーンテキストにおける表示の差がないこと。自動化するならこれが最も安定しそう。

　デメリットは、読みがわからないとき検索せねばならないこと。

ルビなし（リンク先参照）

　ルビは振らない。ただし単語のリンク先にルビを振った表示をさせる。

　メリットはルビ対応・非対応・プレーンテキストにおける表示の差がないこと。自動化するならこれが最も安定しそう。

　デメリットは、そのページやそのプレーンテキストではルビ表示されないこと。ブラウザでリンク先を見ねばならない。

派生形また、この派生形として、<span title="かんじ">漢字</smapn>のようにする案もある。マウスオーバー時にルビが一時的に表示される。

所感

　素直にルビなしが楽。ルビを振るなら<rp>の単一ルビがバランスとれてるか。

対象環境

$ uname -a
Linux raspberrypi 4.19.42-v7+ #1218 SMP Tue May 14 00:48:17 BST 2019 armv7l GNU/Linux