| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| ruby-align: | 振り仮名の配置 | ruby要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 振り仮名 の配置 | left | 左詰めで表示 |
| center | 中央に配置 | |
| right | 右詰めで配置 | |
| distrlbute-letter | 文字列の長さに均等に割付ます。 振り仮名の長い場合は、中央に配置 | |
| distrlbute- space | 前後にスペースを入れて、均等に割付ます。 振り仮名の長い場合は、中央に配置 | |
| line-edge | 振り仮名を付ける文字列が行末又は行頭に ある時は、振り仮名を行端に合わせて表示。 それ以外は中央に配置。 | |
| auto | 自動的に配置。日本語の場合は、distrlbute- spaceが適用されます。(デフォルト) |
ruby-alignプロパティは、文字列に付ける振り仮名の配置方法を指定します。値には、left , center , right, distrlbute-letter, distrlbute-space, line-edge, autoの何れかを指定します。ruby-alignプロパティは、ruby要素に指定して使用します。
●ruby-alignプロパティは、Internet Explorer独自のプロパティです。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
.sampl01{ruby-align:left}
.sampl02{ruby-align:center}
.sampl03{ruby-align:right}
.sampl04{ruby-align:distrlbute-lettr}
.sampl05{ruby-align:distrlbute-space}
.sampl06{ruby-align:edge}
.sampl07{ruby-align:auto}
p{font-size:1.2em;
color:blue;
}
rt{color:red;
font-size:0.5em;
}
span{color:black}
-->
</style>
</head>
<body>
<p><span>leftを指定・・・</span><ruby class="sampl01"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>centerを指定・・・</span><ruby class="sampl02"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>rightを指定・・・</span><ruby class="sampl03"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>distrlbute-lettrを指定・・・</span><ruby class="sampl04"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>distrlbute-spaceを指定・・・</span><ruby class="sampl05"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>edgeを指定・・・</span><ruby class="sampl06"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
<p><span>autoを指定・・・</span><ruby class="sampl07"><rb>一期一会</rb><rp>(</rp><rt>いちごいちえ</rt><rp>)</rp></ruby></P>
</body>
</html>
