ルビを下側に振る : ruby-position: under の実装

ルビを下側に振る : ruby-position: under の実装

地名や人名、ちょっと読めない単語などにふりがな(ルビ)を付けたいこと、ありますよね。Web ページでも同様で、ずっと以前から専用のHTML要素(タグ)が用意されています。

それが ruby 要素です。小さな文字のふりがなが、対象テキストの上側にくっつきます。普通、ふりがなは上につけますから。でもでも、下側に付けたいことだって、ありませんか?

この、ふりがなの位置を指定するCSSプロパティが ruby-position です。under を指定すれば下側に付くという仕様。でもこのプロパティは草案段階で、執筆時現在 Edge と Firefox のみの対応となっています。

ruby 要素を使わなければいいじゃない?という声が聞こえてきそうですが、アクセシビリティに配慮した、セマンティックなコーディングを心がけるならば、なるべく使いたいところ。そこで今回は、ruby要素への ruby-position: under を、シンプルな代替手法で実装してみます。

サンプルコード

<!--  HTML  -->

<span class="rubyposition_under"><ruby>IEEE(米国電気電子学会)<rt>アイトリプルイー</rt></ruby></span>
/*  CSS  */

.rubyposition_under{
  display: inline-block;
}
.rubyposition_under ruby{
  display: flex;
  flex-direction: column;
  text-align: justify;  /* この指定は text-align-last を IE に対応させるために必要 */
  text-align-last: justify;
}

サンプルDEMO

IEEE(米国電気電子学会)アイトリプルイー  // デフォルト CSS での指定を何もしなければ、ふりがなはデフォルトで上に付きます。

IEEE(米国電気電子学会)アイトリプルイー  // ruby-position: under ruby-position プロパティの対応ブラウザは、執筆時現在 Edge と Firefox のみ。それ以外では、under を指定しても、ふりがなはデフォルトのとおり上に付きます。

IEEE(米国電気電子学会)アイトリプルイー  // サンプルコード サンプルコードでは、ふりがなは下に付きます。ただし Safari では、執筆時現在 text-align-last に対応していないので、ふりかなが対象テキストに対して両端揃えに広がりません。また、ふりがなと対象テキストとの間隔は、実際には margin や line-height などで調整する必要があるでしょう。

おわりに

始めは ruby 要素の display を inline-block に、rt 要素を block にしてやればいいかなと思ったのですが、safari でうまくいかず。意外に ruby 要素の挙動はややこしいです。