ruby-merge 「ルビの分割」

ルビを分割表示するかを指定します。

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

ruby-merge の指定方法

構文
ruby-merge : separate ｜ collapse \| auto;
プロパティ/設定値	意味
ruby-merge: separate;	ルビを分割する。
ruby-merge: collapse;	ルビを分割しない。
ruby-merge: auto;	ブラウザに依存。
デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

ruby-merge のサンプル


<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-merge-separate{ruby-merge : separate;}
.css-merge-collapse{ruby-merge : collapse;}
.css-merge-auto{ruby-merge : auto;}
</style>
<!-- html -->
<div class="common">
  <div class="cssTitle">ruby-merge:separate<br>（分割表示）</div>
  <div>
  <h5>下記２つは同じ表示結果となる</h5>
  ルビの<ruby class="css-merge-separate">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>かく</rt><rt>にん</rt></ruby>
  ルビの<ruby><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 class="cssTitle">ruby-merge:collapse<br>（分割無表示）</div>
  <div>
  <h5>下記２つは同じ表示結果となる</h5>
  ルビの<ruby class="css-merge-collapse">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>無</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>なし</rt><rt>かく</rt><rt>にん</rt></ruby>
  ルビの<ruby><rb>分割表示無確認</rb><rt>ぶんかつひょうじなしかくにん</rt></ruby>
  </div>
  <div class="cssTitle">ruby-merge:auto<br>（分割表示ブラウザ依存）</div>
  <div>
  ルビの<ruby class="css-merge-auto">
  <rb>分</rb><rb>割</rb><rb>表</rb><rb>示</rb><rb>確</rb><rb>認</rb><rt>ぶん</rt><rt>かつ</rt><rt>ひょう</rt><rt>じ</rt><rt>かく</rt><rt>にん</rt></ruby>
  </div>
</div>