CSS3 Pre-Reference



ruby-position

ルビの位置

試す

コード

<p><ruby style="ruby-position:before;">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby style="ruby-position:after;">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby style="ruby-position:right;">新幹線<rt>しんかんせん</rt></ruby></p>

<p style="writing-mode:tb-rl"><ruby style="ruby-position:before;">新幹線<rt>しんかんせん</rt></ruby></p>
<p style="writing-mode:tb-rl"><ruby style="ruby-position:after;">新幹線<rt>しんかんせん</rt></ruby></p>
<p style="writing-mode:tb-rl"><ruby style="ruby-position:right;">新幹線<rt>しんかんせん</rt></ruby></p>

サンプル

指定された方向にルビが表示されていれば正解です。

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

以下はIE用です。

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

新幹線しんかんせん

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
5~

パラメータ

before | after | right
初期値 before
適用 ”display: ruby-text”な要素を持つ親要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS3 Ruby Module#4.1 Ruby positioning: the 'ruby-position' property

解説

ルビの位置を指定します。

InternetExplorerでは対応していますが、値がabove | inlineの2種類で、内容も異なります。

豆知識ですが、実はCSS3を最も早く実装を開始したのはInternetExplorerだという事実をご存じでしょうか。実はInternetExplorerの5から、実に1999年から導入しているものだから驚きです。

before
ルビをベースの前に配置します。つまり横書きだと上に、縦書きだと右に表示されます。
after
ルビをベースの後に配置します。つまり横書きだと下に、縦書きだと左に表示されます。
right
ルビをベースの右側に配置します。縦書きであっても横書きであっても、です。
above
MSIE独自。”before”と同様です。
inline
MSIE独自。ルビをインラインで表示します。つまりルビタグがないのと同じ挙動をします。

トラックバック

投稿されたコメント