Template:ルビ/doc

文字列の読み仮名を与えるテンプレートです。ruby タグの代わりにCSSを利用することで、ruby と等価の機能が使えるようになります。適切に設定された視覚式ユーザーエージェントは読み仮名を本文文字列の上側に小さく表示（ルビ）するようになります。

ルビの表示にはウィキペディアへのログインとアカウントの設定または、ユーザーエージェント（ウェブブラウザなど）でのユーザースタイルシート設定が必要です。設定していない場合はかっこ「（～）」内に表示されます。

またこれは、{{音声ルビ}} テンプレートとは第3無名引数の既定値が異なるだけの等価なテンプレートです。

使い方

基本の使い方は文字列とその読み方を指定するものです。

記述	HTML
{{ルビ|文字列|読み方}}	<span class="ruby"><span class="rb" style="speak:none">文字列</span><span class="rp" style="speak:none">（</span><span class="rt">読み方</span><span class="rp" style="speak:none">）</span></span>

ただし、第3無名引数を「非表示」にすれば、読み方が表示されないようになります。これは {{音声ルビ}} テンプレートの既定の動作と同じです。

記述	HTML
{{ルビ|文字列|読み方|非表示}}	<span class="ruby"><span class="rb" style="speak:none">文字列</span><span class="rp" style="speak:none;display:none">（</span><span class="rt" style="display:none">読み方</span><span class="rp" style="speak:none;display:none">）</span></span>

また、第3無名引数を「補助表示」にすれば、補助として読み仮名を表示します。

記述	HTML
{{ルビ|文字列|読み方|補助表示}}	<span class="ruby"><span class="rb">文字列</span><span class="rp" style="speak:none">（</span><span class="rt" style="speak:none">読み方</span><span class="rp" style="speak:none">）</span></span>

また、読み方の言語コードは「lang=言語コード」パラメーターで指定できますので、ハングルなどの表音文字も使用可能です。さらに、本文の言語コードは「rblang=言語コード」パラメーターで指定できます。読み方の言語と本文の言語が同じ場合は、lang 属性の指定は ruby クラスを持つ span 要素に集約されます。

記述	HTML
{{ルビ|本文|読み方|lang=読み方の言語}}	<span class="ruby"><span class="rb" style="speak:none">本文</span><span class="rp" style="speak:none">（</span><span class="rt" style="" lang="読み方の言語" xml:lang="読み方の言語">読み方</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|本文|読み方|rblang=本文の言語}}	<span class="ruby"><span class="rb" style="speak:none" lang="本文の言語" xml:lang="本文の言語">本文</span><span class="rp" style="speak:none">（</span><span class="rt" style="">読み方</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|本文|読み方|lang=読み方の言語|rblang=本文の言語}}	<span class="ruby"><span class="rb" style="speak:none" lang="本文の言語" xml:lang="本文の言語">本文</span><span class="rp" style="speak:none">（</span><span class="rt" style="" lang="読み方の言語" xml:lang="読み方の言語">読み方</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|本文|読み方|lang=同じ言語|rblang=同じ言語}}	<span class="ruby" lang="同じ言語" xml:lang="同じ言語"><span class="rb" style="speak:none">本文</span><span class="rp" style="speak:none">（</span><span class="rt" style="">読み方</span><span class="rp" style="speak:none">）</span></span>

使用例

難読な人名

奇抜な当て字の名前など、読み方が一般的でないもの。また、「長万部町」「中城村」など、記事の読者にとって難読だと思われる地名にも必要に応じて {{ルビ}} テンプレートを使うと良いかもしれません。

記述	結果	HTML
{{ルビ|希星|きらら}}	希星（きらら）	<span class="ruby"><span class="rb" style="speak:none">希星</span><span class="rp" style="speak:none">（</span><span class="rt">きらら</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|希星|きらら|非表示}}	希星（きらら）	<span class="ruby"><span class="rb" style="speak:none">希星</span><span class="rp" style="speak:nonedisplay:none">（</span><span class="rt" style="display:none">きらら</span><span class="rp" style="speak:nonedisplay:none">）</span></span>

文字の本来の読み方とは異なる読み方のもの

流行り廃りの速い流行語、固有名詞あるいは特定の業界の専門用語であるなどの理由で、読み方が一般的でないもの。

記述	結果	HTML
{{ルビ|関ジャニ∞|かんジャニエイト}}	関ジャニ∞（かんジャニエイト）	<span class="ruby"><span class="rb" style="speak:none">関ジャニ∞</span><span class="rp" style="speak:none">（</span><span class="rt" style="">かんジャニエイト</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|℃-ute|Cute|lang=en}}	℃-ute（Cute）	<span class="ruby"><span class="rb" style="speak:none">℃-ute</span><span class="rp" style="speak:none">（</span><span class="rt" style="" lang="en" xml:lang="en">Cute</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|IEEE|アイトリプルイー}}	IEEE（アイトリプルイー）	<span class="ruby"><span class="rb" style="speak:none">IEEE</span><span class="rp" style="speak:none">（</span><span class="rt" style="">アイトリプルイー</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|SCSI|スカジー}}	SCSI（スカジー）	<span class="ruby"><span class="rb" style="speak:none">SCSI</span><span class="rp" style="speak:none">（</span><span class="rt" style="">スカジー</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|DQN|ドキュン}}	DQN（ドキュン）	<span class="ruby"><span class="rb" style="speak:none">DQN</span><span class="rp" style="speak:none">（</span><span class="rt" style="">ドキュン</span><span class="rp" style="speak:none">）</span></span>

外語発音するもの

下記の例では記号「♥」を「love」、「NY」を「New York」と読ませます。

記述	結果	HTML
{{ルビ|I&hearts;NY|I Love New York|lang=en}}	I♥NY（I Love New York）	<span class="ruby"><span class="rb" style="speak:none">I♥NY</span><span class="rp" style="speak:none">（</span><span class="rt" style="" lang="en" xml:lang="en">I Love New York</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|I&hearts;NY|I Love New York|lang=en|rblang=en}}	I♥NY（I Love New York）	<span class="ruby" lang="en" xml:lang="en"><span class="rb" style="speak:none">I♥NY</span><span class="rp" style="speak:none">（</span><span class="rt">I Love New York</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|I&hearts;NY|I Love New York|lang=en|非表示}}	I♥NY（I Love New York）	<span class="ruby"><span class="rb" style="speak:none">I♥NY</span><span class="rp" style="speak:none;display:none">（</span><span class="rt" style="display:none" lang="en" xml:lang="en">I Love New York</span><span class="rp" style="speak:none;display:none">）</span></span>
{{ルビ|I&hearts;NY|I Love New York|lang=en|rblang=en|非表示}}	I♥NY（I Love New York）	<span class="ruby" lang="en" xml:lang="en"><span class="rb" style="speak:none">I♥NY</span><span class="rp" style="speak:none;display:none">（</span><span class="rt">I Love New York</span><span class="rp" style="speak:none;display:none">）</span></span>

同じ漢字で違う読み方があるもの

記述	結果	HTML
{{ルビ|健|たけし}}	健（たけし）	<span class="ruby"><span class="rb" style="speak:none">健</span><span class="rp" style="speak:none">（</span><span class="rt" style="">たけし</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|健|たける}}	健（たける）	<span class="ruby"><span class="rb" style="speak:none">健</span><span class="rp" style="speak:none">（</span><span class="rt" style="">たける</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|健|けん}}	健（けん）	<span class="ruby"><span class="rb" style="speak:none">健</span><span class="rp" style="speak:none">（</span><span class="rt" style="">けん</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|健|つよし}}	健（つよし）	<span class="ruby"><span class="rb" style="speak:none">健</span><span class="rp" style="speak:none">（</span><span class="rt" style="">つよし</span><span class="rp" style="speak:none">）</span></span>

外語の文字列を発音は正確にさせたいが、視覚的には補助として読み仮名を付ける場合

記述	結果	HTML
Let it go（レリゴー）	{{ルビ|Let it go|レリゴー|補助表示|rblang=en}}	<span class="ruby"><span class="rb" xml:lang="en" lang="en">Let it go</span><span class="rp" style="speak:none">（</span><span class="rt" style="speak:none">レリゴー</span><span class="rp" style="speak:none">）</span></span>

考慮すべき点

同じ語が複数ある場合

難読な語・複数の読み方がある同じ語が本文中で繰り返し出てくる場合、視覚式ユーザーエージェントの利用者だけを考慮すると最初の一つ目にだけ読み仮名を付ければ良いだけですが、音声読み上げ式ユーザーエージェントの利用者のことも考慮に入れて、読み仮名の指定はすべての単語で繰り返すべきです。

外語

外語の文字列で、その言語の辞書にあるような一般的な語についてはルビテンプレートではなく lang テンプレートが適切です。

ルビテンプレートを使う記述	代替え案
{{ルビ|bldg.|building|lang=en}}	{{lang|en|bldg.}}

しかし、記事の読者が読めないと思われる言語や少数派の言語や音声読み上げユーザーエージェントが対応していないと思われる言語であれば、このテンプレートを使って読み方を明示する方が良いかもしれません。ただしその場合でも、rblang=言語コード パラメーターで本文の言語を指定すれば視覚式ユーザーエージェントで言語に合ったフォントで表示されることが期待できます。例えば、漢字に関しては日本語の文字集合にない文字がある場合などはそのようにすると良いでしょう。以下は、画面上の本文だけを言語指定しつつ、読み方の部分については言語指定せず、文脈の言語（日本語）で読ませています。

ルビテンプレートを使う記述	結果	HTML
{{ルビ|יהוה|ヤハウェ|rblang=he}}	יהוה（ヤハウェ）	<span class="ruby"><span class="rb" style="speak:none" lang="he" xml:lang="he">יהוה</span><span class="rp" style="speak:none">（</span><span class="rt">ヤハウェ</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|पारमिता|パーラミター|rblang=sa}}	पारमिता（パーラミター）	<span class="ruby"><span class="rb" style="speak:none" lang="sa" xml:lang="sa">पारमिता</span><span class="rp" style="speak:none">（</span><span class="rt">パーラミター</span><span class="rp" style="speak:none">）</span></span>
{{ルビ|內田百閒|うちだひゃっけん|rblang=zh-TW}}	內田百閒（うちだひゃっけん）	<span class="ruby"><span class="rb" style="speak:none" lang="zh-TW" xml:lang="zh-TW">內田百閒</span><span class="rp" style="speak:none">（</span><span class="rt">うちだひゃっけん</span><span class="rp" style="speak:none">）</span></span>

略語

ルビテンプレートは略語の元となった語を示すものではありません。略語の元となった語を示すには {{abbr}} テンプレートを使うか、あるいは、<ref>解説文</ref> を使って脚注で示してください。

ルビテンプレートを使う記述	代替え案
{{ルビ|CERN|Conseil Européen pour la Recherche Nucléaire|lang=fr|rblang=fr}}	{{lang|fr|{{abbr|CERN|Conseil Européen pour la Recherche Nucléaire}}}} {{lang|fr|CERN}}<ref>{{lagn|fr||Conseil Européen pour la Recherche Nucléaire}} の略。</ref>

また、長い名称の省略形を示すのにルビテンプレートを使うべきではありません。

ルビテンプレートを使う記述	代替え案
{{ルビ|睡眠時無呼吸症候群|SAS}}	睡眠時無呼吸症候群 (SAS)

傍点

ルビテンプレートは読み方を示すためのものであり、レイアウトのためのものではありません。ですから傍点を付ける目的でルビテンプレートを使うべきではありません。

ルビテンプレートを使う記述	代替え案
その事故は想定{{ルビ|外|・}}でした。	その事故は想定<strong>外</strong>でした。

スタイルシートの設定

ウィキペディアのアカウントの場合はメニューの 個人設定 - 表示 - カスタムCSS に、ユーザーエージェントの場合はja.wikipedia.org内で有効なように、以下のうちのどちらかのCSSを指定します。なお指定しない場合には、かっこ"（）"がついた通常のテキストとして表示されます。

inline-tableに対応しているブラウザについては、inline-table版の方がきれいに表示されるため、そちらの使用を推奨します。inline-tableに対応していないブラウザについては position 版を使用してください。

inline-table 版

/* Template:ルビ */
.ruby {
  border: none;
  display: inline-table;
  height: 1em;
  line-height: 1;
  margin: 0px;
  padding: 0px;
  text-align: center;
  text-indent: 0px;
  vertical-align: text-bottom;
  white-space: nowrap;
}

.ruby > .rb {
  border: none;
  display: table-row-group;
  line-height: 1;
  margin: 0px;
  padding: 0px;
  text-align: center;
  white-space: nowrap;
  speak: none
}

.ruby > .rt {
  border: none;
  display: table-header-group;
  font-size: 0.625em;
  line-height: 1.1;
  margin: 0px;
  padding: 0px;
  text-align: center;
  white-space: nowrap;
}

.ruby > .rp {
  display: none !important;
  speak: none
}

対応ブラウザ： Firefox, Opera 8, Safari など

position 版

/* Template:ルビ */
.ruby {
  bottom: 0;
  display: inline;
  line-height: 1em;
  padding: 0;
  position: relative;
  top: 0;
}

.ruby > .rb {
  speak: none
}

.ruby > .rt {
  display: inline;
  font-size: 50%;
  left: 0;
  line-height: 1em;
  position: absolute;
  text-indent: 0;
  top: -1em;
  white-space: nowrap;
}

.ruby > .rp {
  display: none !important;
  speak: none
}

a:link .rt,
a:visited .rt {
  text-decoration: none;
}

なおこの方法については、

• ルビが短すぎる場合にはルビが左に偏る
• ルビが長過ぎる場合にはルビを振る対象テキストよりはみ出す

などの問題があります。

使用例

• {{ルビ|漢字|かんじ}} -> 漢字（かんじ）
• スタイルシートを利用しない場合の例 : {{ルビ|漢字|かんじ}} -> 漢字（かんじ）

祇園精舎（ぎおんしょうじゃ）の鐘の声、諸行無常（しょぎょうむじょう）の響きあり。娑羅双樹（しゃらそうじゅ）の花の色、盛者必衰（じょうしゃひっすい）の理（ことわり）をあらわす。おごれる人も久しからず、唯（ただ）春の夜の夢のごとし。たけき者も遂（つい）にはほろびぬ、偏（ひとえ）に風の前の塵に同じ。 — 『平家物語』冒頭

備考：rubyタグの使用について

「ルビ#HTML上のルビ」も参照

<ruby>タグは現行のWikipedia:スタイルマニュアルでは使用不可とされています。ただしシステム的には許容されています（英語版:Help:HTML_in_wikitextを参照）。

非対応ブラウザではルビは丸括弧（）内に表示されます。

規格・ブラウザの対応状況

規格

• HTML 4.01 - 非対応
• XHTML 1.0 - 非対応
• XHTML 1.1 - Ruby Annotation で対応
• HTML5 (勧告候補) - 対応
• HTML5.1 (ワーキングドラフト) - 対応

ブラウザ

• Internet Explorer 5.0以降 - 対応
• Sleipnir 2.8以降 - 対応
• Firefox 17 - 非対応。ただし HTML Ruby アドオンで対応
• Safari 5.0以降 - 対応
• Opera 12.1 - 非対応。ただし HTML Ruby アドオンで対応
• Google Chrome 5.0以降 - 対応
• Android Browser 3.0以降 - 対応
• Blackberry Browser 10.0以降 - 対応

出典: http://caniuse.com/#search=ruby

スクリーンリーダー

• IBM ホームページ・リーダー (販売終了) - 対応
• IBM Easy Web Browsing - 対応
• PC-Talker+IE - 不明
• NetReader - 対応
• 95Reader+IE - 不明
• JAWS+Firefox - 不明。WAI-ARIAには対応。
• JAWS+IE - 不明
• NVDA+Firefox - 未対応[1]
• NVDA+IE - 未対応
• Apple VoiceOver+Safari - 不明。WAI-ARIAには対応。
• Google ChromeVox - 不明。WAI-ARIAには対応。
• Orca+Firefox - 不明
• Window Eyes+IE - 日本語未対応
• Window Eyes+Firefox - 日本語未対応
• ZoomText - 不明
• FoxyVoice+Firefox - 不明

関連項目

• ルビ
• {{読み}}
• {{lang}}
• {{abbr}}

外部リンク

• ルビを振るには。