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

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

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

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

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

2023-06-06 追記：
現在、ruby-position プロパティの 値 under は、safari 以外（IEは問題外）で実装済みのようです。
safari でも、-webkit- プレフィックスをつけた上で、値を after に指定することで、同等のスタイルとなります。
この記事で書いたなんちゃって実装は、不要になりました。よかったね。

ruby-position: under;
-webkit-ruby-position: after;

サンプルコード

<!--  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 要素の挙動はややこしいです。