もずはっく日記(2015年2月)

Bug-org 1055676 implement CSS 'ruby-align' property
初回投稿日時: 2015年02月21日19時05分43秒
カテゴリ: CSS Mozilla Core Mozilla38 バグ修正
SNS: Tweet (list)

ルビテキストの配置をコントロールする、ruby-alignも実装されているみたいなので、早速、実験。

前のテキスト
<span style="display: ruby; ruby-align: start;">
  <span style="display: ruby-base;">長いルビベース</span>
  <span style="display: ruby-text;">3文字</span>
</span>
後ろのテキスト

日本語なら、短いルビテキストが左寄せになってるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: center;">
  <span style="display: ruby-base;">長いルビベース</span>
  <span style="display: ruby-text;">3文字</span>
</span>
後ろのテキスト

短いルビテキストが中央寄せになってるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-between;">
  <span style="display: ruby-base;">長いルビベース</span>
  <span style="display: ruby-text;">3文字</span>
</span>
後ろのテキスト

短いルビテキストがtext-align: justify;のように、均等割で配置されているのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-around;">
  <span style="display: ruby-base;">長いルビベース</span>
  <span style="display: ruby-text;">3文字</span>
</span>
後ろのテキスト

日本語のような文字の場合、短いルビが、両端に余裕をもちつつ、間にスペースがあるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-around;">
  <span style="display: ruby-base;">長いルビベース</span>
  <span style="display: ruby-text;">AB CD</span>
</span>
後ろのテキスト

英語のような文字間で改行が発生しない文字の場合、短いルビが、両端に余裕をもちつつ、単語間にだけスペースを持つのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: start;">
  <span style="display: ruby-base;">ベース</span>
  <span style="display: ruby-text;">長いルビテキスト</span>
</span>
後ろのテキスト

日本語なら、短いルビベースが左寄せになってるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: center;">
  <span style="display: ruby-base;">ベース</span>
  <span style="display: ruby-text;">長いルビテキスト</span>
</span>
後ろのテキスト

短いルビベースが中央寄せになってるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-between;">
  <span style="display: ruby-base;">ベース</span>
  <span style="display: ruby-text;">長いルビテキスト</span>
</span>
後ろのテキスト

短いルビベースがtext-align: justify;のように、均等割で配置されているのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-around;">
  <span style="display: ruby-base;">ベース</span>
  <span style="display: ruby-text;">長いルビテキスト</span>
</span>
後ろのテキスト

日本語のような文字の場合、短いルビベースが、両端に余裕をもちつつ、間にスペースがあるのが正解です。

前のテキスト
<span style="display: ruby; ruby-align: space-around;">
  <span style="display: ruby-base;">AB CD</span>
  <span style="display: ruby-text;">長いルビテキスト</span>
</span>
後ろのテキスト

英語のような文字間で改行が発生しない文字の場合、短いルビベースが、両端に余裕をもちつつ、単語間にだけスペースを持つのが正解です。