[JavaScript] ruby要素をJSで擬似的に再現する3

「[JavaScript] ruby要素をJSで擬似的に再現する」及び「[JavaScript] ruby要素をJSで擬似的に再現する2」のライブラリを更新した。

音声ブラウザを使用した場合に不具合があるため、該当部分を修正した。

仕組み

このライブラリの仕組みを記載していなかったので、この機会に書いておく。

基本的に JS と CSS の組み合わせによって機能を実現していて、まず、

<span class="ruby">振り仮名（ふりがな）</span>

という HTML を JS（ruby.js）によって、

<span class="ruby four">
<span class="rb">振り仮名</span>
<span class="rp">（</span>
<span class="rt">ふりがな</span>
<span class="rp">）</span>
</span>

に変換している。

この変換された HTML に付加された各クラスに対してスタイルを設定した CSS（ruby.css）が適用される。
CSSの内容はおおざっぱに以下の感じとなる。

class="rp"の要素を非表示にする
class="rt"の要素（ルビテキスト）がうまくルビベースの上に表示されるように調整する

rubyの表示切り替え時は同じ要領でこれの逆をしている。
これによっての切換えを実現している。

不具合の原因

いままでは、上記の「class="rp"の要素を非表示にする」部分は CSS の display:none; によって表示・非表示を切り替えていたが、音声ブラウザでは display:none; の要素で囲まれた文字列は読み上げられないため、「困（こま）った」は「こまこまった」と読まれてしまっていた。

修正内容

「class="rp"の要素を非表示にする」部分を、display:none; から以下のように修正した。

width:0px;
overflow:hidden;
position:absolute;

これによって、「非表示」ではなく「表示しているが幅が 0 のため見えない」という状態にして、音声ブラウザでも通常通り読み上げられるようにした。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/57