ruby-align 「ルビの揃え方」

ルビの揃え方を指定します。

CSS Ver.	適用要素	継承
3.0	<ruby> display:rubyの要素	する

ruby-align の指定方法

構文
ruby-align : start ｜ center \| space-between \| space-around;
プロパティ/設定値	意味
ruby-align: start;	先頭に揃える。
ruby-align: center;	中央に揃える。
ruby-align: space-between;	両端を揃える。文字とルビの短い方に均等にスペースを追加して揃える。
ruby-align: space-around;	両端を揃える。文字とルビの短い方の両端と均等にスペースを追加して揃える。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

ruby-align のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-align-start{ruby-align : start;}
.css-align-center{ruby-align : center;}
.css-align-space-between{ruby-align : space-between;}
.css-align-space-around{ruby-align : space-around;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">ruby-align:start<br>（先頭に揃える）</div>
  <div>
  ルビの<ruby class="css-align-start">
  <rb>先頭表示確認</rb><rt>せんとうひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:center<br>（中央に揃える）</div>
  <div>
  ルビの<ruby class="css-align-center">
  <rb>中央表示確認</rb><rt>ちゅうおうひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:space-between<br>（両端に揃える）</div>
  <div>
  ルビの<ruby class="css-align-space-between">
  <rb>両端揃表示確認</rb><rt>りょうはしそろえひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-align:space-around<br>（両端に揃える－両端に空白を追加）</div>
  <div>
  ルビの<ruby class="css-align-space-around">
  <rb>両端揃表示確認</rb><rt>りょうはしそろえひょうじかくにん</rt></ruby>
  </div>
</div>