UDブラウザのHTMLモードで漢字等の読み方を指定する方法

更新日:2020年3月12日


  1. はじめに
  2.  UDブラウザで自作教材を作成する際、漢字や数式等を指定した読み方で音声読み上げさせたいことがあると思います。例えば、「熊猫」と書いて「パンダ」と読ませたいときや「ml」を「ミリリットル」と読ませたい場合の方法について説明します。なお、読み上げ用のルビの指定方法は、2019年度より少し変更になりましたので、ご了承ください。

  3. 準備
  4.  読み上げ用のルビを指定するためには、現段階では、HTMLファイルを編集する必要があります。そのため、HTMLファイルの作成経験が必要なのでご了承ください。


  5. 原理
  6.  UDブラウザでは、本文の漢字仮名交じり文をアップル標準の自動解析ツールで分析して、読み上げをしています。しかし、自動解析ツールではすべての文章を正確に漢字を読み上げることは出来ません。

     そこで、UDブラウザのリフローモードでは、本文にルビが振られていたら、本文は無視して、ルビを読み上げるようにプログラミングしてあります。そのため、もしも、本文を正確に読み上げさせたい場合には、ルビを設定してください。

     また、ルビは表示したくないけれども、読み上げは正確に行いたいという場合には、非表示のルビを使うことを可能にしてあります。

     以下、非表示ルビタグの付け方について解説します。


  7. ヘッダー
  8.  UDブラウザで、読み上げ用の非表示ルビを扱えるようにするためには、HTMLのヘッダーに以下の記載を入れてください。

    <style type="text/css">
    rt.invisible {visibility: hidden;}
    </style>

     PDF版拡大図書では、以下のように標準的なヘッダー内に記載しています。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>タイトルを入れる</title>
    <style type ="text/css">
    div {padding: 10px; margin-bottom: 10px; border: 1px solid #333333;}
    </style>
    <style type="text/css">
    rt.invisible {visibility: hidden;}
    </style>
    </head>

  9. 読み方をルビとして表示させる方法
  10.   UDブラウザでは、漢字にルビが振ってあった場合、ルビを読み上げるように設計されています。そのため、以下のように指定すれば、ルビを表示すると同時にルビを読み上げてくれます。

    例1

    <ruby>
    <rb>熊猫</rb>
    <rt>パンダ</rt>
    </ruby>

    熊猫 パンダ

    例2

    <ruby>
    <rb>ml</rb>
    <rt>ミリリットル</rt>
    </ruby>

    ml ミリリットル

  11. ルビは表示させずに、読み方だけを指定する方法
  12.  上述の方法では、漢字等に必ずルビが表示されてしまいます。しかし、ルビを画面上に表示しないで読み上げのみに反映させる方法を以下に紹介します。以下に例示した通り、ルビのクラスを"invisible"にすれば、画面に表示させずに、読み上げのみを指定することが可能です。

    <ruby>
    <rb>熊猫</rb>
    <rt class="invisible">パンダ</rt>
    </ruby>

    熊猫

  13. おわりに
  14.  UDブラウザver.2.12.0以降では、非表示の読み上げ用ルビを表示させるオプションがありますので、ご活用ください。

    以上

PDFをダウンロード
<戻る>