この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

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

2015年2月21日

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

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

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

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

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

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

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

短いルビテキストが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>
後ろのテキスト
前のテキスト 長いルビベース AB CD 後ろのテキスト

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

前のテキスト
<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>
後ろのテキスト
前のテキスト AB CD 長いルビテキスト 後ろのテキスト

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

関連するかもしれないエントリ

bug-org 1055676を含むエントリ

このエントリへのリンク元