PowerCMS X ブログ

2021-10-22

やさにちウォッチのルビ(ruby - ふりがな)のスタイル

ここ数日「ルビ」に関するいくつかのニュースが出ていました。私たちは「やさにちウォッチ 別ウィンドウで開きます」というやさしい日本語についてのオウンドメディアを運営していて、PowerCMS X / PowerCMSにはエディタにルビを振る機能を付けていて、Webサイトに自動でルビをつける Webサービス「伝えるウェブ 別ウィンドウで開きます」を運営しています。ということもあり、では、やさにちウォッチのルビの実装はどうなっているのかを確認しつつ、今日の午前中に CSSを少し調整してみました。

※ 画面下部 (ソースの末尾) のセレクタからこのページにルビを付けることができます。

セミナーでも取り上げられていたいくつかの課題について、すべて現状で解決できるわけではありませんが、ある程度のことは解決できます(この記事についてはEPUBではなく、Webの話です)。

やさにちウォッチの画面

課題と解決したい問題

  • 親文字(rb要素)とルビ(rt要素)が近すぎて読みにくい問題
  • ルビが小さすぎて読みにくい問題
  • 行を折り返した時にルビが上の行と近すぎるとどちらに対するルビなのかがわかりにくい問題
  • スクリーンリーダーなどでの読み上げが不自然になる問題

親文字(rb要素)とルビ(rt要素)が近すぎて読みにくい問題

最初の課題はこれです。基本的には、行間を開けることで適度な距離が空き、読みさすさが向上します。

ruby {
    line-height: 2.8em;
}

ところが、Chromeなどのブラウザでは相変わらず近いままです。CSSで位置調整をしようとしてもブラウザによってCSSの適用結果が異なり、一部のブラウザでは位置調整のための指定をしても効いてくれません。Firefoxでは適度な距離が開くのですが、Chrome / Edge / Safariなどでは近いままです。

CSSのプロパティtransformを利用する

Chrome / Edge / Safariでは rt 要素に transformプロパティを指定することでルビの位置を変えることができます。ルビが小さすぎて読めない問題もあわせて解決するために、以下のようにしました。ただし、Chrome / Edgeと Safari では、距離の空き方が微妙に違います(Chrome / Edgeのほうが距離が近い)。

rt {
    transform: translateY(-.06rem);
    font-size: 70%;
}

行を折り返した時にルビが上の行と近すぎるとどちらに対するルビなのかがわかりにくい問題

どういうことかというと、transformプロパティで距離を開けすぎると、行間が足りなければ上の行と被ってしまったり、被らないまでも上の行に極端に近くなって、いったいどちらのテキストに対するルビなのかがわかりにくくなってしまうのです。

前の行のテキストのほうが近く、わかりにくい

この件についてやっかいなのは、iOSのSafari (どちらが正しいかは別として) などで、行間を開けたバランスと、ルビの距離のバランスが悪く、距離を開けすぎると上の行と近くなってしまい、その対策で行間を開けすぎると他のブラウザで行間が空きすぎてしまいます。

この問題に対しては(本当はやりたくなかったのですが)「transformプロパティはSafariにあわせて指定、Chrome / Edge は jQueryで調整」としました。

var userAgent = window.navigator.userAgent;
if ( userAgent.indexOf('Chrome') != -1 ) {
  $('rt').css('transform', 'translateY(-.4rem)');
}

スクリーンリーダーなどでの読み上げが不自然になる問題

この問題については、このサイトの立ち上げ時から意識していて、画面の上部に「ふりがな」「わかちがき」ボタンを付けておき、Cookieをセットして状態を保てるようにしています。jQueryで body にhide--furiganaクラスを追加して、display :none しているだけです。VoiceOverで意図した読み上げにされることを確認しました。とはいえ、あくまでも rt要素を隠しているだけなので、rt要素に異なる読みを指定していても読み上げには反映されません。

ふりがなと分かち書きのON/OFFボタン

body.hide--furigana rt {
    display: none !important;
}
body.hide--furigana ruby {
   line-height: 1.5 !important;
}

※ ruby要素だけに line-height 指定をすると、ルビを含まない行の行間が不自然になるので、実際はルビが使われる部分を囲っているブロックに line-heightを設定しています。

最終的なルビのスタイルについては、サイトをぜひご覧ください。また、お気づきの点などがあればお気軽にご指摘・お問い合わせください 別ウィンドウで開きます

解決されていない問題

CSSやJavaScriptによる「ハック」のようなもので、将来のブラウザの実装や対応状況によって結果が変わってしまうといういわゆる「堅牢性・互換性」に問題があるのは別にして、解決されていない問題としては以下のようなものがあります。

  • ブラウザ内のテキスト検索 (ふりがなボタンでルビを削除しても検索されません)
  • 読み上げは不自然にはならないものの、指定したルビが読み上げに反映されない
  • モノルビ、グループルビ問題、熟語問題、改行問題

検索エンジン・SEO問題

その他に、Googleなどの検索エンジン問題があると思われます。ルビを付けることが SEOに悪影響があるかもしれないとなると、そもそも Webにおけるルビの普及を妨げる要因になりかねません。

Google検索結果ではルビを除外して文章を解釈しているようには見えない

余談 : Amazon Polly のSSML

「伝えるウェブ」で提供している、Webページ読み上げには Amazon Polly 別ウィンドウで開きます を利用しています。辞書に登録されている語が読み上げるテキストに含まれている時、SSMLで読み方を渡せるようにしています(設定でOn/Offを指定できる)。

Pollyは非常に自然なイントネーションで上手く日本語のテキストを読み上げてくれます。ただ、以下のような渡し方だと、登録した辞書と読み上げ方は完全に一致するものの、読み上げのイントネーションは非常に不自然になります(11月17日追記 : subではなく、phonemeを使うと不自然さは回避できます)。イントネーションをあわせて指定しなければならないのですが、Pollyが解釈したオリジナルの漢字の読み方とわたされたひらがなが一致する場合はオリジナルのテキストを利用するなどしてくれるようになると、指定も煩雑ではなくなり、品質も上がることが期待されます。

<speak xml:lang="ja-JP">
<prosody rate="default" pitch="default">
<sub alias="つたえるうぇぶ">伝えるウェブ</sub>は「やさしい<sub alias="にほんご">日本語</sub>」での<sub alias="じょうほう">情報</sub><sub alias="はっしん">発信</sub>を<sub alias="しえん">支援</sub>します。
</prosody></speak>

phonemeタグを利用して自然な読み上げを実現する例

<speak xml:lang="ja-JP">
<prosody rate="default" pitch="default">
<phoneme type="ruby" ph="なんば">難波</phoneme>の次の駅は<phoneme type="ruby" ph="にっぽんばし">日本橋</phoneme>です。
</prosody></speak>

カテゴリー:サイト制作全般

投稿者:Junnama Noda

ブログ内検索

アーカイブ