「テンプレート:RB」の版間の差分
ナビゲーションに移動
検索に移動
(ルビを隠す機能追加) |
|||
17行目: | 17行目: | ||
==== 読み上げについて ==== | ==== 読み上げについて ==== | ||
閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。 | 閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。 | ||
+ | |||
+ | ==== Safariの一部のバージョンについて漢字とルビのフォントサイズが逆になった問題について ==== | ||
+ | css属性の<code>-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;</code>はこれを解決できるみたいです。 | ||
[[Category:記事テンプレート]] | [[Category:記事テンプレート]] | ||
− | </noinclude><includeonly><ruby style="text-indent: 0px;">{{{1}}}{{#switch:{{{hidden}}}|1=<rt style="font-size: 0;">({{{2}}})</rt>|#default=<rt style="font-size: 50%; text-align: start; text-indent: 0px; line-height: normal; -webkit-text-emphasis: none; vertical-align: super;"><small><span style="font-size: 0;">(</span>{{{2}}}<span style="font-size: 0;">)</span></small></rt>}}</ruby></includeonly> | + | </noinclude><includeonly><ruby style="text-indent: 0px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">{{{1}}}{{#switch:{{{hidden}}}|1=<rt style="font-size: 0;">({{{2}}})</rt>|#default=<rt style="font-size: 50%; text-align: start; text-indent: 0px; line-height: normal; -webkit-text-emphasis: none; vertical-align: super;"><small><span style="font-size: 0;">(</span>{{{2}}}<span style="font-size: 0;">)</span></small></rt>}}</ruby></includeonly> |
2022年1月23日 (日) 18:16時点における版
ルビ振り用のテンプレートです。
表示形式
{{RB|漢字|カタカナ}}
と書くと、漢字のようにルビを振ることができます。
記事のプレビュー・目次などルビが振れられない所には漢字(カタカナ)とルビは後付きの括弧の中に入れて表示されます。
IE8とその以前のIEによる閲覧の場合に漢字とルビは上付き文字にして表示されます。
ルビを隠す
{{RB|漢字|カタカナ|hidden=1}}
と書くと、漢字のようにルビは表示されませんが、ルビが振られているかのようにコピーアンドペーストや読み上げソフトに反映されます。同一ページにてルビを振るのを統一するのを推奨しますが、ルビが多過ぎて閲覧に影響を与えた場合に一部を隠すことができます。
コピーアンドペーストについて
漢字とそのルビごとコピーした場合、コピーされるテキストは漢字(カタカナ)となります。ルビの表示形式にはかかわっていません。
読み上げについて
閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。
Safariの一部のバージョンについて漢字とルビのフォントサイズが逆になった問題について
css属性の-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
はこれを解決できるみたいです。