最終更新日

ruby-positionプロパティ

ruby-positionは、ルビの位置を指定するプロパティです。指定できる値は「before」「after」「inter-character」「inline」のいずれかです。

ruby-positionを指定できる要素は、rt要素を持つruby要素のように、「display: ruby-text;」状態の要素を子に持つ要素です。

以下は、関連プロパティです。

ruby-align
ruby-overhang
ruby-span

CSS3での変更点
・ruby-positionは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
before display: ruby-text;」状態の要素を子に持つ要素(ruby要素 あり
説明
before 横書きの場合は上側に、縦書きの場合は右側にルビを表示します。(初期値
after 横書きの場合は下側に、縦書きの場合は左側にルビを表示します。
inter-character 1文字ずつ、文字の右側にルビを表示します。
inline ルビを適用しないのと同じように、テキストの右側にルビを表示します。
サンプルコード
ruby{
	ruby-position: before;
	ruby-position: after;
	ruby-position: inter-character;
	ruby-position: inline;
	}
参考文献:CSS3 Ruby Module外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。