CSS - ruby-align

トップ > CSSリファレンス > ruby-align

概要

属性名 ruby-align
値 auto | left | center | right | distribute-letter | distribute-space | line-edge
初期値 auto
適用可能要素ルビ
継承継承する
メディアVisual / Ruby
サポートC3 / e5

説明

ruby要素で記述するルビにおいて、ルビテキストの右寄せ、左寄せ等の値を指定します。

値説明
auto自動配置。(C3/e5?)
left左寄せ。(C3/e5?)
center中央寄せ。(C3/e5?)
right右寄せ。(C3/e5?)
distribute-letter両端揃え。(C3/e5?)
distribute-space均等割り。(C3/e5?)
line-edge行の左端では左寄せ、行の右端では右寄せ。(C3)

使用例

HTML
<h5>auto</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:auto"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>left</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:left"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>center</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:center"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>right</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:right"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>distribute-letter</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:distributed-letter"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>distribute-space</h5>
<div style="margin-left:1em">
□□□<ruby style="ruby-align:distributed-space"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>

<h5>line-edge</h5>
<div style="margin-left:1em">
<ruby style="ruby-align:line-edge"漢字漢字漢字漢字漢字<rt>ルビテキスト</rt></ruby>□□□
</div>
表示
auto
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
left
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
center
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
right
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
distribute-letter
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
distribute-space
□□□漢字漢字漢字漢字漢字ルビテキスト□□□
line-edge
漢字漢字漢字漢字漢字ルビテキスト□□□
Copyright (C) 1997-2012 杜甫々
初版：1997年7月27日、最終更新：2012年5月4日
http://www.tohoho-web.com/css/prop/ruby-align.htm