「テンプレート:RB」の版間の差分

(ルビを隠す機能追加)
 
(2人の利用者による、間の12版が非表示)
3行目: 3行目:
  
 
==== 表示形式 ====
 
==== 表示形式 ====
<code><nowiki>{{RB|漢字|カタカナ}}</nowiki></code> と書くと、'''{{RB|漢字|カタカナ}}'''のようにルビを振ることができます。
+
<code><nowiki>{{RB|漢字|カタカナ}}</nowiki></code>と書くと、'''{{RB|漢字|カタカナ}}'''のようにルビを振ることができます。
  
 
記事のプレビュー・目次などルビが振れられない所には'''漢字(カタカナ)'''とルビは後付きの括弧の中に入れて表示されます。
 
記事のプレビュー・目次などルビが振れられない所には'''漢字(カタカナ)'''とルビは後付きの括弧の中に入れて表示されます。
  
IE8とその以前のIEによる閲覧の場合に'''<span style="text-indent: 0px;">漢字<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>カタカナ<span style="font-size: 0;">)</span></small></rt></span>'''とルビは上付き文字にして表示されます。
+
IE8とその以前のIEによる閲覧の場合に'''<span>漢字<rt style="font-size: 50%; vertical-align: super;"><span style="font-size: 0;">(</span>カタカナ<span style="font-size: 0;">)</span></rt></span>'''とルビは上付き文字にして表示されます。
 
 
==== ルビを隠す ====
 
<code><nowiki>{{RB|漢字|カタカナ|hidden=1}}</nowiki></code> と書くと、'''{{RB|漢字|カタカナ|hidden=1}}'''のようにルビは表示されませんが、ルビが振られているかのようにコピーアンドペーストや読み上げソフトに反映されます。同一ページにてルビを振るのを統一するのを推奨しますが、ルビが多過ぎて閲覧に影響を与えた場合に一部を隠すことができます。
 
  
 
==== コピーアンドペーストについて ====
 
==== コピーアンドペーストについて ====
17行目: 14行目:
 
==== 読み上げについて ====
 
==== 読み上げについて ====
 
閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。
 
閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。
 +
 +
==== iOS上のSafariの「デスクトップ閲覧」について ====
 +
iOS上のSafariの「デスクトップ閲覧」では、ルビが振れた文字はルビごと全体的に縮小しているように見える。本サイトだけではなく、どのサイトを閲覧してもこういう問題が起こる。これはSafariの「デスクトップ閲覧」だけに存在するバグだと見なされ、現時点では副作用のない解決策はまた見つかっていない。
 +
 +
将来解決策または代用の検討を想定し、この問題に付いての研究を記載する。
 +
 +
その原因として、正文が閲覧に支障が出る程文字サイズが小さくとスマホ上のブラウザに見なされていれば、ブラウザはそれを拡大する。特にパソコンを想定したデスクトップ版ウェブページでは、正文がスマホによって拡大されることが起こしやすい。しかし、Safariの該当機能は{{RB|<nowiki><ruby></nowiki>|ルビ}}など、一部のHTMLタグを対象外とし、拡大せず、周りの正文と比べれば縮小したように見える。
 +
 +
{| class="wikitable"
 +
! !! !!
 +
|-
 +
| 複数列の表の内容はスマホによって拡大されない為、 || {{RB|<nowiki><ruby></nowiki>|ルビ}}が || 縮小するような問題は起こさない。
 +
|}
 +
 +
iOS上のSafariの「デスクトップ閲覧」を想定した上、正文の中での使用を控え、複数列の表に限りルビを使用する。それ以外の場合は「〇〇と書いて(バツバツトヨム)」のような書き方で代用する。
  
 
[[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>{{{1}}}<rt style="font-size: 50%; vertical-align: super;"><span style="font-size: 0;">(</span>{{{2}}}<span style="font-size: 0;">)</span></rt></ruby></includeonly>

2022年1月27日 (木) 15:02時点における最新版

ルビ振り用のテンプレートです。

表示形式編集

{{RB|漢字|カタカナ}}と書くと、漢字カタカナのようにルビを振ることができます。

記事のプレビュー・目次などルビが振れられない所には漢字(カタカナ)とルビは後付きの括弧の中に入れて表示されます。

IE8とその以前のIEによる閲覧の場合に漢字カタカナとルビは上付き文字にして表示されます。

コピーアンドペーストについて編集

漢字とそのルビごとコピーした場合、コピーされるテキストは漢字(カタカナ)となります。ルビの表示形式にはかかわっていません。

読み上げについて編集

閲覧環境にもよるが、「漢字とそのルビがその間に一拍が入るようにそれぞれ読み上げられる」と、「ルビのみが読み上げられる」という二種類のパターンが確認されています。こちらも同じく、ルビの表示形式にはかかわっていません。

iOS上のSafariの「デスクトップ閲覧」について編集

iOS上のSafariの「デスクトップ閲覧」では、ルビが振れた文字はルビごと全体的に縮小しているように見える。本サイトだけではなく、どのサイトを閲覧してもこういう問題が起こる。これはSafariの「デスクトップ閲覧」だけに存在するバグだと見なされ、現時点では副作用のない解決策はまた見つかっていない。

将来解決策または代用の検討を想定し、この問題に付いての研究を記載する。

その原因として、正文が閲覧に支障が出る程文字サイズが小さくとスマホ上のブラウザに見なされていれば、ブラウザはそれを拡大する。特にパソコンを想定したデスクトップ版ウェブページでは、正文がスマホによって拡大されることが起こしやすい。しかし、Safariの該当機能は<ruby>ルビなど、一部のHTMLタグを対象外とし、拡大せず、周りの正文と比べれば縮小したように見える。

複数列の表の内容はスマホによって拡大されない為、 <ruby>ルビ 縮小するような問題は起こさない。

iOS上のSafariの「デスクトップ閲覧」を想定した上、正文の中での使用を控え、複数列の表に限りルビを使用する。それ以外の場合は「〇〇と書いて(バツバツトヨム)」のような書き方で代用する。