【HTMLルビ】両面ルビ表示を実現するJavaScript、出来ました。

PC版へ 2015年02月07日

ウェブページでどうしてもルビを使いたい / 両面ルビを表示させたい / 最新のHTML5勧告に基づく書式でルビをコーディングしたい…というコンテンツ制作者さんたち、こちらのスクリプトを試してみてください。

→ ruby_enabler2.js - 適切なルビ表示を行うためのJavaScript - freefielder.jp
→ ダウンロードページ

例えば、こんな感じでルビを表示できます。

ruby20150207.png

更なる動作サンプルをご覧になりたいときや動作環境などを確認したい場合は、上記ページを参照してください。

さて。

ほんとうは1月中にやっつけてやろう、と思っていて、まあまあ順調に作業も進んでいたのです。作業の大詰めで、ちょっと古めのバージョンのブラウザで動作チェックをしてみたらこれが全然うまく動かない。どうやら以前の記事で書いたような、

…という現象が、FirefoxやChromeの最新版以外の多くのブラウザで発現するのです。

で、これを直すのに時間を費やしたのがひとつ。

更に、

…という問題の解消に手こずった、というのがひとつ。

ruby_enabler2.js では、rubyタグを inline-table として、ruby内部の rb, rt, rtcタグ等を適切に組み立て表示する…という作業をしています。

それならば、ruby要素に適切な vertical-align スタイルを設定してやれば済む話じゃん…と思うかもしれませんが、事はそう単純ではなくて、素直に vertical-align を設定してやろうとしても、

…という様々な要素が絡んできて一筋縄では行かないのです。パラメータが多すぎて、場合分けで対処するのも難しい。

そんなわけで ruby_enabler2.js では、JavaScript を使って超強引に、しかも絶対にズレないように vertical-align の値を計算する、という方法を採用しました（具体的な方法は、こちら）。この方法を思いつくのに数日を費やしたのですな。

そう言えば何処かで「作業が8〜9割終わったと感じたら、そこがやっと半分だ」みたいな格言的なものをみた気がするのだけれど、正にそのとおりだったのだな。

さて、「絶対にズレない」とか大口を叩いてはみたものの、多分こちらで気づいていない不具合が残っていると思います。ご報告、お待ちしておりますので。

関連記事

コメント

匿名

<ruby>
<rb>佐</rb><rt>さ</rt>
<rb>々</rb><rt>さ</rt>
<rb>木</rb><rt>き</rt>
<rb>希</rb><rt>のぞみ</rt>
</ruby>
よりも、
<ruby>
<rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb>
<rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt>
</ruby>
の方が文章の流れ的にも好ましいと思います。動作確認なのでどっちでもいいんですが。

tyzから匿名への返信

文章が、HTMLタグを無視したプレーンテキストで表示される場合（Googleの検索結果やRSSフィードなど）を考えると、確かに

佐々木希（ささきのぞみ）

と表示される後者の例（rpタグが適宜書かれているものとして考えてください）のほうが文章の流れ的にはよろしいかと。

ただ筆者の「こういう風にルビを振ったんだ」という意図が伝わるのは、最初の例、

佐（さ）々（さ）木（き）希（のぞみ）

…こちらではないかな、と。まあ、たぶん好みですね。どちらでも良いのではないかと思います。

匿名

>「こういう風にルビを振ったんだ」という意図が伝わるのは〜
その場合、困るところは両面ルビですかね。

ところで、仕様書を見る限り、
<ruby>日本<rtc>にほん<rtc>にっぽん<rtc lang=en>Japan<rtc lang=fr>Japon</ruby>
みたいに3つ以上のルビを振れるみたいだが、ベンダーはどのように表示するのか。

木村

便利なjs開発ありがとうございます。

さっそく試させていただいておりますが、
非表示の要素にルビが振ってある場合、vertical-alignは正しく計算されないですか？
その場合、非表示要素を表示させたタイミングで関数を呼んでvertical-alignを再計算するなどは出来ないでしょうか。

ご確認・ご検討よろしくお願いします。

tyzから木村への返信

「非表示の要素」というのは、ページロード時に display:none となっている要素のことで、その要素内にルビがある…ということですよね?

木村からtyzへの返信

tyzさま
説明不足ですみません。
仰る通りページロード時display:noneで当該要素内にルビがあります。

木村からtyzへの返信

tyzさま
こんなに素早くご対応いただけるとは。
ありがとうございます。

ブラウザごとの個別対応になるので大変かと思いますが、これからも開発がんばってください。

tyzから木村への返信

いえいえとんでもないです。

不具合などありましたらお知らせ下さい。