CSS3

プロパティ

ruby-position

  編集:2022.07.14 by T.A.

[Edge]△。→mdn

ルビの位置決め。

名前 ruby-position
[ alternate || [over | under] ] | inter-character
初期値 alternate
適用対象 ルビ注釈コンテナ
継承 される
百分率 受容しない
算出値 指定されたキーワード
正準的順序 文法に従う
アニメーション型 離散的

このプロパティは、基底から相対的な、ルビ注釈の位置を制御する。

alternate
先行するレベルの注釈と[overunder]が交替するようにふるまわせる。すなわち、当のルビ注釈コンテナが属するルビ区分において、先行する注釈レベルを成す行間の注釈が:
開始<RUBY style="border:1px solid black;
">テスト<RT>test</RT></RUBY>終了<BR>
開始<RUBY style="border:1px solid red;
 ruby-position:alternate;
">テスト<RT>test</RT></RUBY>終了

over
ルビ注釈は、基底の行上面に現れる。

 ↑横書きレイアウトにおける日本語基底テキストの上面にあるルビ。

 ↑縦書きレイアウトにおける日本語基底テキストの上面(すなわち右端)にあるルビ。

開始<RUBY style="border:1px solid black;
">テスト<RT>test</RT></RUBY>終了<BR>
開始<RUBY style="border:1px solid red;
 ruby-position:over;
">テスト<RT>test</RT></RUBY>終了

under
ルビ注釈は、基底の行下面に現れる。表語的 東アジアの書記体系で利用されるのは 相対的に稀な設定であり、教育用テキストに最も見出され易い。


 ↑横書きレイアウトにおける日本語基底テキストの下面にあるルビ。


 ↑縦書きレイアウトにおける日本語基底テキストの下面(すなわち左端)にあるルビ。

開始<RUBY style="border:1px solid black;
">テスト<RT>test</RT></RUBY>終了<BR>
開始<RUBY style="border:1px solid red;
 ruby-position:under;
">テスト<RT>test</RT></RUBY>終了

inter-character
このルビ注釈コンテナ 注釈コンテナ が属するルビ・コンテナ書字モードに応じて:
縦書きの場合、この値による効果は over と同じになる。
横書きの場合、注釈コンテナ は 文字間 の(inter-character な)ルビ注釈コンテナになる。そのような注釈は、対応する(横書きな)基底たちの右端に現れる。この場合、注釈コンテナ の writing-mode の算出値は、vertical-rl に強制される。

【注釈コンテナ 内のルビ注釈は、文字間のルビ注釈と呼ばれる。原文では明瞭に述べられていないが、“文字間の注釈”は、これらの総称を表す。】

この値は、とりわけ台湾で利用されている、繁体字中国語の特別な事例用に供されている。その文脈においては、(注音符号用のグリフたちからなる)ルビは ― 基底文字のレイアウトは横書きであっても ― 基底グリフの右端側に沿って縦書きに現れる:


 ↑横書きレイアウトにおける、繁体字中国語における“注音符号”ルビ注釈(青色)【ルビ注釈の右端に在るのは声調符】

開始<RUBY style="border:1px solid black;
">テスト<RT>test</RT></RUBY>終了<BR>
開始<RUBY style="border:1px solid red;
 ruby-position:inter-character;
">テスト<RT>test</RT></RUBY>終了<BR>
開始<RUBY style="border:1px solid red;
 ruby-position:inter-character;
">テスト<RT>te</RT><RT>st</RT></RUBY>終了
¶やり方が不明

ルビ注釈コンテナのうち、文字間のそれでないものは、行間 の(interlinear な)ルビ注釈コンテナ と呼ばれる。

【そのようなコンテナ内のルビ注釈は、行間のルビ注釈と呼ばれる。原文では明瞭に述べられていないが、“行間の注釈”は、これらの総称を表す。】

【同じルビ column 内の】複数個のルビ注釈コンテナに対し ruby-position が同じになる場合、それらは、基底テキストから外方に堆積される。


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: