ruby-position 「ルビの表示位置」

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

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

ruby-position の指定方法

構文
ruby-position : over ｜ right \| under \| left \| inter-character;
プロパティ/設定値	意味
ruby-position: over;	ルビを文字の上に表示。
ruby-position: right;	ルビを文字の右に表示。
ruby-position: under;	ルビを文字の下に表示。
ruby-position: left;	ルビを文字の左に表示。
ruby-position: inter-character;	ルビを文字の間に表示。台湾のルビ用に定義されたようです。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

ruby-position のサンプル


<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-position-over{ruby-position : over;}
.css-position-right{ruby-position : right;}
.css-position-under{ruby-position : under;}
.css-position-left{ruby-position : left;}
.css-position-inter-character{ruby-position : inter-character;}
.css-writing-mode{
  writing-mode: tb-rl;
  height: 200px;
}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">ruby-position:over<br>（上段表示）</div>
  <div>
  ルビの<ruby class="css-position-over">
  <rb>上段表示確認</rb><rt>じょうだんひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-position:right<br>（右側表示）</div>
  <div class="css-writing-mode">
  ルビの<ruby class="css-position-right">
  <rb>右側表示確認</rb><rt>みぎがわひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-position:under<br>（下段表示）</div>
  <div>
  ルビの<ruby class="css-position-under">
  <rb>下段表示確認</rb><rt>げだんひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-position:left<br>（左側表示）</div>
  <div class="css-writing-mode">
  ルビの<ruby class="css-position-left">
  <rb>左側表示確認</rb><rt>ひだりがわひょうじかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-position:inter-character<br>（文字間表示）</div>
  <div>
  ルビの<ruby class="css-position-inter-character">
  <rb>文</rb><rt>も</rt><rb>字</rb><rt>じ</rt><rb>間</rb><rt>かん</rt><rb>表</rb><rt>ひょう</rt><rb>示</rb><rt>じ</rt><rb>確</rb><rt>かく</rt><rb>認</rb><rt>にん</rt></ruby>
  </div>
</div>