【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

ルビじゃない要素に display: ruby と指定して、その中の要素に display: ruby-text を指定すれば、ルビテキストとして表示することができます。

で、本日のINDEX

1. <ruby>関連の要素とそのCSSについて
2. displayプロパティのルビ関連の値
   1. display:ruby と display:ruby-text
   2. その他のルビ関連の値

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに　←今ココ

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

<ruby>関連の要素とそのCSSについて

ルビ関連の要素はもとは IE独自のもので、それが XHTML1.1の仕様に取り入れられたんだそうです。それを WebKit系のブラウザ（Chrome, Safari）が対応し、Mozilla（Firefox）はちょっと遅れて最近対応。
その時点で、Chrome, Safari などは W3Cではなく WHATWGの定義で表示するようになっていて、W3Cの定義で表示するのは今は Firefox だけになっています。

というわけで <ruby>関連の要素の仕様は2パターンあるのが現状。めんどくさいんです。

その <ruby>要素とその関連の要素については、こちらをご覧ください。
WHATWG と W3C の定義を分けて書いています。
[19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）

そしてルビの CSSに関しては、まだドラフトです。

displayプロパティのルビ関連の値

dosplayプロパティのルビ関連の値一覧です。

display のルビ関連の値
ruby	要素は <ruby>要素と同じ性質になります。
ruby-text	要素は <rt>要素と同じ性質になります。
ruby-base	要素は <tb>要素と同じ性質になります。
ruby-base-container	要素は <rbc>要素と同じ性質になります。 <rbc> はXHTMLで定義された要素。ルビベース コンテナを作ります。 HTML5では W3Cでも WHATWGでも定義されていない要素ですが、CSSのドラフトでは残っているんですね。
ruby-text-container	要素は<rtc>要素と同じ性質になります。

値の継承	なし	適用できる要素	全部

display:ruby と display:ruby-text

ここでは <b>要素を display:ruby にして<ruby>要素の役割を与えて、その子要素の <span>要素には display:ruby-text を指定し、ルビテキストを表しています。

漢字かんじ
振ふり仮が名な

★Firefoxでは↓このようにプレビューします。

上のサンプルの HTMLです。

<p id="smp1_1">
<b>漢字<span>かんじ</span></b><br>
<b>振<span>ふ</span></b>り<b>仮<span>が</span></b><b>名<span>な</span></b>
</p>

サンプルの CSSです。

p#smp1_1 {
	border:solid 1px #ccc;
	padding:.8em;
	font-size:130%}
p#smp1_1 b {
	display:ruby;
	font-weight:normal}
p#smp1_1 span {
	display:ruby-text;
	white-space:nowrap;
	font-size:50%;
	font-weight:bold}

ルビ用のテキストは font-size:50% などと小さくする必要があります（11行目）
ほかに white-space:nowrap で勝手に改行されないようにしたり（10行目）。

ルビ関連要素なら、ブラウザのルビ用のデフォルトスタイルが適用されますが、そうじゃない要素を displayプロパティでルビにするなら、手動で font-size:50% などを指定する必要があります。

ルビ関連のブラウザデフォルトのスタイルはこんなかんじです↓（まだドラフトだけど）
クリックで該当ページが開きます。

もう１つサンプルです。
ここでは <abbr>要素を使ってみます。<abbr>要素は略語を示すんでしたね。
<abbr>要素に display:rubyを、そのtitle属性を使ったセレクタに擬似要素を付けて display:ruby-textを指定してみます。

The WHATWG started working on HTML5 in 2004.

★Chrome, Operaは未対応。Firefoxでは↓このようにプレビューしました。

上のサンプルの HTMLです。

<p id="smp1_2">
The
<abbr title=" Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.
</p>

サンプルの CSSです。

p#smp1_2 {
	border:solid 1px #ccc;
	padding:.8em;
	font-size:120%}
p#smp1_2 abbr[title] { /*属性セレクタです。title属性があるabbr要素をセレクタにしています*/
	display:ruby;
	text-decoration:underline;}
p#smp1_2 abbr[title]::after {
	content:attr(title); /*abbr要素のtitle属性の値をコンテンツにします*/
	display:ruby-text;
	white-space:nowrap;
	font-size:50%;
	font-weight:bold}

その他のルビ関連の値

その他の displayプロパティのルビ関係の値は、
display:ruby-base
display:ruby-base-container
display:ruby-text-container
なんですが、
<rb>要素（display:ruby-baseで得る性質）、<rtc>要素（display:ruby-text-containerで得る性質）はW3Cで定義されているけど、ほとんどのブラウザが実装していません。
（WHATWGの仕様を実装しているブラウザが多い。詳しくは [19]ルビをつけてみよう で）
<rbc>要素（display:ruby-base-containerで得る性質）は HTML5では無くなってるんだよね。XHTMLでは定義されているけど。

というわけで、サンプル省略。ルビ関連が落ち着いた頃（っていつになるのかな〜）に先送り！

う〜ん。displayプロパティのルビに関する値は、プレビューできないプラウザが多くて今はあんまり活用できないですね。
素直に <ruby>要素と <rt>要素を使ってたほうがイイみたい。どのブラウザでも見れますから。

次回予告

さて次回は、これまでの流れに沿って、display: ruby などを使うために ルビ用のCSSプロパティを知らなきゃ話になんないのでそれをまとめようと思うのですが、ルビ用のCSSプロパティは、全部まだCSS3のドラフト。ブラウザに実装されているモノが少ないんです。
とりあえず今わかっている範囲でまとめます。