行間を一定に保てるルビ

HTMLとCSSで作ったHTMLの部品

最終更新:2019-10-06 スタート:2019-09-17
 HTMLのruby要素を使ってルビを振ると,行間が微妙に変わります。ルビのデザインも,ブラウザまかせです。ここで紹介するルビ独自ルビ使うと,一定の行間が保てます。ルビのデザインも,自分で決めることができます。
Ruby要素との比較
 ruby要素を使ったルビと,独自ルビを比較してみます。行間の変動がわかりやすいように,二段組で表示しました。なお行間の変動は 行高1行の高さによって異なります。

▼行高が2文字分のとき(2文字分の行高は,こひつじの家」標準です。
 ruby要素を使用

 思わぬ雨となって軒下に雨宿あまやどりをしたとき,目の前にある水たまりに落ちてくるてきが,水面に次々とあわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の一生いっしょうは,しばしの時を楽しませてくれました。

 独自ルビを使用

 思わぬ雨となって軒下に雨宿りをしたとき,目の前にある水たまりに落ちてくるが,水面に次々とを作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の 一生は,しばしの時を楽しませてくれました。


▼行高が1.5文字分のとき
 ruby要素を使用

 思わぬ雨となって軒下に雨宿あまやどりをしたとき,目の前にある水たまりに落ちてくるてきが,水面に次々とあわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の一生いっしょうは,しばしの時を楽しませてくれました。

 独自ルビを使用

 思わぬ雨となって軒下に雨宿りをしたとき,目の前にある水たまりに落ちてくるが,水面に次々とを作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の 一生は,しばしの時を楽しませてくれました。


 ruby要素を使用した場合は,行高が小さいほど行間の不揃いが目立ちます。ただしブラウザによって表示は異なります。Firefoxのルビは,比較的よくできていると思います。
 独自ルビを使用した場合は行間の不揃いはありません。
 ruby要素を使用した場合と独自ルビを使用した場合とでは,ブラウザの画面でコンテンツをコピーしたときのテキスト内容が異なります。たとえば「軒下に雨宿りをした」という部分をコピーすると,ruby要素の場合は「軒下に雨宿あまやどりをした」になりますが,独自ルビの場合は「軒下に雨宿りをした」となって,ルビが含まれません。
概要とソース
 はじめに独自ルビのHTML部分ですが,基本的に,
<span rb="ルビ">漢字</span>
という構文になります。rbという属性にルビ〕いう値を与えています。これに対してruby要素を使用した場合は,
<ruby>漢字<rt>ルビ</rt></ruby>
となりますから,独自ルビの方がやや簡素なかたちになります。
 次にCSSの独自ルビ部分を示します。ここでrbは,ルビを付ける働きをする属性〕名前です。思い切り短い名前をつけました。

[rb] {
  position: relative;  /* 漢字の位置を取得 */
  }

[rb]::before {  /* ::before擬似要素によって,contentプロパティの内容を表示 */
  content: attr(rb);  /* rbの値をcontentプロパティに代入 */
  position: absolute;  /* 以下4行は,ルビを振る場所の指定 */
  top: -0.9em;
  left: -0.2em;  /* ルビを振る場所の幅を,ルビを振る漢字の幅よりも少し拡大 */
  right: -0.2em;
  font-size: 0.5em;  /* 漢字1文字について,かな2文字を基準とする */
  text-align: center;  /* ルビは,ルビを振る場所の中央に表示 */
  white-space: nowrap;  /* 長いルビが途中で改行しないように */
  line-height: 1;  /* 以下2行は,*/
  text-indent: 0;  /* ルビを振る位置が親ボックスのプロパティによって変わらないように */
  }

 CSSに詳しいコメントを付けておきましたが,独自ルビの動作原理はおおよそ次のようになります。
 (1)  rb="ルビ" によって,rb属性の値にルビを代入
 (2)  attr(属性)という関数を用いて,属性の値を取得
 (3)  content: attr(属性)によって,属性の値をcontentプロパティに代入
 (4)  ::before擬似要素を用いて,contentを表示
 属性は,span[rb]というように,要素と組み合わせて指定するのが一般的ですが,あえて単独の属性として指定しました。そうすることによって,たとえば
<b rb="ふとじ">太字</b>
と記述するだけで,太字 と表示させることができます。
独自ルビの長所と短所 :長所 :短所)

ルビを振っても行間が変わりません。

HTMLの構文が簡単です。

ルビを自分でデザインすることができます。

ブラウザに依存しないため,意図したデザインで表示されます。

ルビ用のCSSを準備する必要があります。

行間が狭いと,ルビを振ることができません。