[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
コメント投稿フォーム