“CSS Writing Modes”

概要

“CSS Writing Modes”はCSSにおける左から右や右から左の横書き、縦書きなどの書字方向とその組み合わせについての機能について定義している仕様書です。

もともと横書きを想定して定義されているレイアウトの規則の縦書き時への対応についても定義されています。

仕様書

定義されているプロパティ

direction
unicode-bidi
writing-mode
text-orientation
text-combine-upright

書字モード

世界には様々な文字体系が存在し、文字が表記される方向や向きが異なります。CSSでは縦書きや横書きなどの書字方向を“書字モード(Writing Mode)”と言い、大きく分けて以下の2種類があります。

水平書字モード(Horizontal Writing Mode)

行が水平で、ブロック・フロー方向が上から下もしくは下から上の書字モードです。

垂直書字モード(Vertical Writing Mode)

行が垂直で、ブロック・フロー方向が左から右もしくは右から左の書字モードです。

書字モードは“writing-mode”プロパティ、“direction”プロパティ、“text-orientation”プロパティの組み合わせによって指定され、以下の3つの決定に影響します。

インライン・ベース方向(Inline Base Direction)

コンテンツが行に並べられる方向で、行の始まりと終わりがどちら側なのかを定義します。

ボックスのインライン・ベース方向は“direction”プロパティによって指定され、“unicode-bidi”プロパティとテキスト固有の方向性とともにインライン・レベルのコンテンツを行に配列する順序を決めます。

ブロック・フロー方向(Block Flow Direction)

ブロック・レベルのボックス、もしくは行ボックスがブロック・コンテナの中で並べられる方向です。

ボックスのブロック・フロー方向は“writing-mode”プロパティによって指定されます。

表記モード(Typographic Mode)

縦書き文字固有の植字上の慣習を適用するかどうかを決めるために使用されます。

表記モードによって縦書き文字を縦書きとするのか90度回転した横書きとするのかが判断されます。

双方向性

多くの文字体系の文字は左から右へ表記されますが、いくつかの文字体系では右から左へ表記されます。アラビア語やヘブライ語のテキスト、もしくは複数の言語が混在するテキストでは異なる書字方向が混在することがあり、これを“双方向性(Bidirectionality、bidi)”と呼びます。

ユニコードの仕様では双方向性テキストの正しい配列のための複雑なアルゴリズム(双方向アルゴリズム)が定義されています。双方向アルゴリズムには個々の文字のプロパティによる暗黙的なものと、明示的な埋め込みと上書きの制御からなり、CSSでは双方向アルゴリズムを使用して双方向性テキストを配列します。

CSSでは“direction”プロパティと“unicode-bidi”プロパティが明示的な埋め込みと上書きの制御のために定義されていますが、基本的なテキストの方向性は文書の構造や意味に依存するため、通常はCSSによる指定は文書のマークアップによる双方向性をCSSのスタイルに対応付けるために使用します。

縦書きテキストのレイアウト

それぞれの文字体系は少なくとも一つの固有の向きを持ち、これによって以下の文字体系は3つに分類することができます。

水平のみ(Horizontal-only)

固有の向きが横書きのみの文字。

ラテン文字、アラビア文字、ヘブライ文字、デーヴァナーガリー文字など。

垂直のみ(Vertical-only)

固有の向きが縦書きのみの文字。

モンゴル文字、パスパ文字など。

双配向性(Bi-orientational)

固有の向きが横書きと縦書きの文字。

仮名、カタカナ、漢字、ハングル文字など。

“横書き文字(Horizontal Script)”は固有の向きが横書きの文字で、“水平のみ”の文字と双配向性の文字が含まれます。

“縦書き文字(Vertical Script)”は固有の向きが縦書きの文字で、“水平のみ”の文字と双配向性の文字が含まれます。

縦書き文字の一覧

以下はユニコード(Unicode 6.0)における縦書き文字です。以下に含まれない文字は“水平のみ”の文字とみなされます。

文字体系	文字体系コード	縦書き時の文字の向き (時計回り)	縦書きの方向
注音符号	Bopo	0°	ttb
エジプトのヒエログリフ	Egyp	0°	ttb
ハングル文字	Hang	0°	ttb
漢字	Hani	0°	ttb
平仮名	Hira	0°	ttb
片仮名	Kana	0°	ttb
メロエ文字の草書体	Merc	0°	ttb
メロエ文字	Mero	0°	ttb
モンゴル文字	Mong	90°	ttb
オガム文字	Ogam	-90°	btt
突厥文字(オルホン文字)	Orkh	-90°	ttb
パスパ文字	Phag	90°	ttb
彝文字(ロロ文字)	Yiii	0°	ttb

現代の組版技術ではすべての文字は横書き時の向きで登録されているため、文字を縦書きでレイアウトする際には横書き時の向きから文字を変形しなければなりません。この変形は“双配向性変形(Bi-orientational Transform)”と呼ばれ、以下の2種類があります。

回転(Rotate)

横書きから縦書きにする際には文字を90度回転する。

平行移動(Translate)

横書きから縦書きにする際には文字を平行移動する。

縦書き文字は縦書き時に文字を正しい向きで配置するための内在的に双配向性変形の方法が決められています。例えば、日本語や中国語、韓国語のほとんどの文字は平行移動、モンゴル語などは回転します。

固有の向きが横書きのみの文字は内在的に双配向性変形の方法がなく、回転と平行移動のどちらでも行うことができます。固有の向きが横書きのみの文字では縦書きにした時の文字の向きは正しさよりも見栄えの問題であり、“text-orientation”プロパティによって指定することができます。

“writing-mode”プロパティの値が“vertical-rl”もしくは“vertical-lr”である場合、テキストは以下の2通りの方法で植字されます。

直立植字(Upright Typesetting)

文字は直立した向きで配置され、垂直用のメトリックを使用して組版されます。フォントに垂直用のメトリックが含まれない場合にはユーザー・エージェントはメトリックを合成します。

フォントに縦書き用の代替文字や変形などの縦書き用の機能がある場合はこれを使用します。

横向植字(Sideways Typesetting)

文字は時計回りに90度回転して配置され、水平用のメトリックを使用して組版されます。

“text-orientation”プロパティの値が“mixed”である場合、ユーザー・エージェントはユニコードの“Vertical_Orientation”プロパティを使用して個々の文字が“U”、“Tu”、“Tr”のいずれかである文字は直立植字、“R”である文字は横向植字によって文字を配置します。

抽象的な方向と次元

CSS2.1までは水平書字モード(“writing-mode: horizontal-tb;”)でのボックスのレイアウト方法はについてのみ定義されています。他の書字モードでのレイアウトも水平書字モードでのレイアウトに類似しますが、他の書字モードでのレイアウトを定義するためにこれまで使用されていた物理的な方向と次元に対応した具体的な表現に代わる抽象的な表現が定義されています。

方向と次元を表すための表現は以下の3種類があります。

物理的(Physical)

書字方向とは無関係にページの向きに相対的に解釈します。

フロー相対(Flow-relative)

コンテンツのフローに相対的に解釈します。

行相対(Line-relative)

行ボックスの方向に相対的に解釈します。

“物理的方向(Physical Directions)”は“左”、“右”、“上”、“下”です。

“物理的次元(Physical Dimensions)”は“横幅”と“高さ”であり、それぞれX軸方向に測る水平次元とY軸方向に測る垂直次元です。

フロー相対次元と行相対次元は同じであるので、まとめてと呼びます。“抽象的次元(Abstract Dimensions)”

抽象的次元

ブロック次元(Block Dimension)

テキストが流れる向きと直交する方向の次元。

横書きでは垂直次元、縦書きでは水平次元です。

インライン次元(Inline Dimension)

テキストが流れる向きと平行な方向の次元。

横書きでは水平次元、縦書きでは垂直次元です。

ブロック軸(Block Axis)

ブロック次元の軸。

横書きではY軸(垂直軸)、縦書きではX軸(水平軸)です。

インライン軸(Inline Axis)

インライン次元の軸。

横書きではX軸(水平軸)、縦書きではY軸(垂直軸)です。

ブロック・サイズ(Block Size)

ブロック次元で測った大きさ。

論理的な高さ(Logical Height)とも言います。

横書きでは物理的な高さ、縦書きでは物理的な横幅です。

インライン・サイズ(Inline Size)

インライン次元で測った大きさ。

論理的な横幅(Logical Width)とも言います。

横書きでは物理的な横幅、縦書きでは物理的な高さです。

物理的な次元との対照表

“writing-mode”	“horizontal-tb”		“vertical-rl” “sideways-rl”		“vertical-lr”		“sideways-lr”
“direction”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”
ブロック軸	垂直軸(Y軸)		水平軸(X軸)
インライン軸	水平軸(X軸)		垂直軸(Y軸)
ブロック サイズ	高さ		横幅
インライン サイズ	横幅		高さ

フロー相対方向

フロー相対方向はコンテンツのフロー方向に相対的な方向です。フロー相対方向は“writing-mode”プロパティと“direction”プロパティの組み合わせによって決まります。

ブロック・スタート(Block-start)

ブロック・フロー方向で先になる側。

“writing-mode”プロパティの値が“horizontal-tb”であれば上、“vertical-rl”であれば右、“vertical-lr”であれば左です。

ブロック・エンド(Block-end)

ブロック・フロー方向で後になる側。

“writing-mode”プロパティの値が“horizontal-tb”であれば下、“vertical-rl”であれば左、“vertical-lr”であれば右です。

インライン・スタート(Inline-start)

インライン・ベース方向で先になる側。

“direction”プロパティの値が“ltr”であればライン・レフト、“rtl”であればライン・ライトです。

インライン・エンド(Inline-end)

インライン・ベース方向で後になる側。

“direction”プロパティの値が“ltr”であればライン・レフト、“rtl”であればライン・ライトです。

物理的な方向との対照表

“writing-mode”	“horizontal-tb”		“vertical-rl” “sideways-rl”		“vertical-lr”		“sideways-lr”
“direction”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”
ブロック スタート	上		右		左
ブロック エンド	下		左		右
インライン スタート	左	右	上	下	上	下	下	上
インライン エンド	右	左	下	上	下	上	上	下

ブロック・スタートとインライン・スタート、ブロック・エンドとインライン・エンドのどちらを指しているか明確な場合は単に“スタート”、もしくは“エンド”と言われる場合があります。

行相対方向

論理的な“上”は行の向きによって決定されます。行の向きは“writing-mode”プロパティによって指定することができます。

行に相対的な“上”は通常はブロック・スタート側と同じですが、モンゴル語の組版(“writing-mode: vertical-lr;”)ではブロック・エンド側と同じです。行に相対的な“上”と“下”は“vertical-align”プロパティなどが指定する方向を決めるために使用されます。

“text-align”プロパティなどが指定する方向を決めるために行に相対的な“左”と“右”も定義されています。

ライン・オーバー(Line-over)

行に相対的な“上”。

文字のアセンダーがある側で、通常(英語などで)上線が引かれる側です。

ライン・アンダー(Line-under)

行に相対的な“下”。

文字のディセンダーがある側で、通常(英語などで)下線が引かれる側です。

ライン・レフト(Line-left)

行に相対的な“左”。

左横書き(LTR)のテキストが始まる側です。

ライン・ライト(Line-right)

行に相対的な“右”。

右横書き(RTL)のテキストが始まる側です。

物理的な方向との対照表

“writing-mode”	“horizontal-tb”		“vertical-rl” “sideways-rl”		“vertical-lr”		“sideways-lr”
“direction”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”	“ltr”	“rtl”
ライン オーバー	上		右				左
ライン アンダー	下		左				右
ライン レフト	左		上				下
ライン ライト	右		下				上

抽象的なボックスのレイアウト

垂直書字モードでのレイアウトの原則

CSSによる垂直書字モードでのボックスのレイアウトは水平書字モードでのレイアウトと類似していますが、水平書字モードで水平次元のレイアウトのための計算規則は垂直書字モードで垂直次元のレイアウトに適用され、同様に水平書字モードで垂直次元のレイアウトのための計算規則は垂直書字モードで水平次元のレイアウトに適用されます。

具体的には垂直書字モードでは水平書字モードのレイアウトの規則を以下のように再解釈します。

横幅を参照するレイアウトの規則は高さを参照し、同様に高さを参照するレイアウトの規則は横幅を参照します。

計算に“*-left”と“*-right”の各プロパティ(“margin-left”プロパティや“margin-right”プロパティなど)を参照するレイアウトの規則は“*-top”と“*-bottom”の各プロパティ(“margin-top”プロパティや“margin-bottom”プロパティなど)を参照し、同様に“*-top”と“*-bottom”の各プロパティを参照するレイアウトの規則は“*-left”と“*-right”の各プロパティを参照します。また、レイアウトの規則は水平書字モードの規則をフロー相対方向を用いて再解釈します。

左右の判断を“direction”プロパティに依存するスタイルの規則はフロー相対方向を用いて再解釈します。

行ボックスもしくはそれに平行なものの左か右かを参照し、上か下かは参照しない機能は“左”と“右”の代わりにライン・レフトとライン・ライトをそれぞれ参照します。

行ボックスもしくはそれと直交するものの上か下かを参照し、左か右かは参照しない機能は“上”と“下”の代わりにライン・オーバーとライン・アンダーをそれぞれ参照します。

次元の対応付け

次のプロパティは書字モードによって指定する方向が論理的に変化します。

• “border-spacing”プロパティの1個目の値はセルの水平方向の間隔ではなく列の間隔、2個目の値はセルの垂直方向の行の間隔を指定します。
• “line-height”プロパティは常に論理的な高さ(ブロック・サイズ)を指定します。

“width”プロパティと“min-width”プロパティ、“max-width”プロパティは書字モードに関係なく常に物理的な横幅を指定し、“height”プロパティと“min-height”プロパティ、“max-height”プロパティは書字モードに関係なく常に物理的な高さを指定しますが、これらの寸法を計算するために使用される規則は書字モードによって論理的に変化します。

また、“margin”プロパティや“padding”プロパティなどはパーセント値を計算する際に包括ブロックの横幅を常に使用するのではなくインライン・サイズを使用します。

フロー相対の対応付け

以下の場合にはフロー相対方向が示す方向はボックスを内包する包括ブロックの書字モードによって決定され、プロパティに関連するレイアウトの規則を抽象化します。

• “margin”プロパティや他の“margin-*”各プロパティ
• “border”プロパティや他の“border-*”各プロパティ
• “padding”プロパティや他の“padding-*”各プロパティ
• “float”プロパティ
• “clear”プロパティ
• “top”プロパティ
• “bottom”プロパティ
• “left”プロパティ
• “right”プロパティ
• “caption-side”プロパティ

インライン・レベルのボックスではフロー相対方向が示す方向は親ボックスの書字モードによって決定されます。

マージンの折り畳みについての規則はブロック・スタート側とブロック・エンド側に適用されます。

以下の場合にはフロー相対方向が示す方向はボックスの書字モードによって決定され、ボックスのコンテンツに関連するレイアウトの規則を抽象化します。

• “text-align”プロパティは初期値ではテキストをインライン・スタート側に揃えます。
• “text-indent”プロパティはインライン・スタート側からの字下げを指定します。
• テーブルでは表の列(“col”要素)はインライン・スタート側から順に並べられ、表の行(“tr”要素)はブロック・スタート側から順に並べられます。

行相対の対応付け

以下のプロパティではライン・レフトとライン・ライトが示す方向はボックスの書字モードに従って決められ、“left”と“right”の値はそれぞれライン・レフトとライン・ライトとして解釈します。

• “text-align”プロパティ

以下のプロパティではライン・レフトとライン・ライトが示す方向はボックスを内包する包括ブロックの書字モードに従って決められ、“left”と“right”の値はそれぞれライン・レフトとライン・ライトとして解釈します。

• “float”プロパティ
• “clear”プロパティ
• “caption-side”プロパティ

以下のプロパティではライン・オーバーとライン・アンダーが示す方向はボックスの書字モードに従って決められ、“top”と“bottom”の値はそれぞれライン・オーバーとライン・アンダーとして解釈します。

• “vertical-align”プロパティでは行ボックスの上端はライン・オーバー側の縁で、下端はライン・アンダー側の縁となり、正の“<length-percentage>”値はベースラインをライン・オーバー側の縁へ移動します。
• “text-decoration”プロパティでは下線はライン・アンダー側、上線はライン・オーバー側に引かれます。

純粋に物理的な対応付け

以下の機能の定義は純粋に物理的に対応付けされ、書字モードに影響されません。

• “clip”プロパティの“rect()”関数
• “background”プロパティと他の“background-*”各プロパティ
• “border-image”プロパティと他の“border-image-*”各プロパティ
• “box-shadow”プロパティと“text-shadow”プロパティ

直交フロー

ボックスの“writing-mode”プロパティの値がそのボックスを内包する包括ブロックのものと異なる場合、以下の2つの状態のいずれかになります。

ボックスと包括ブロックの書字モードは平行

例えば、一方の“writing-mode”プロパティの値が“vertical-rl”でもう一方が“vertical-lr”である場合。

ボックスと包括ブロックの書字モードは直交する

例えば、一方の“writing-mode”プロパティの値が“horizontal-tb”でもう一方が“vertical-rl”である場合。

ボックスがそのボックスを内包する包括ブロックの書字モードが直交する場合、そのボックスは“直交フロー(Orthogonal Flow)”を生成します。

直交フローが生成される場合、ボックスのレイアウトは以下の2段階を経て行われます。

ボックスのサイズの決定(ボックスの横幅と高さの計算)

ボックスと包括ブロックの横幅と高さはインライン・サイズとブロック・サイズとして再解釈し、計算は直交フローを生成するボックスの書字モードに従って行います。

ボックスの配置の決定(ボックスの配置位置、マージン、ボーダー、パディングの計算)

ボックスと包括ブロックの横幅と高さはインライン・サイズとブロック・サイズとして再解釈し、計算は包括ブロックの書字モードに従って行います。

値を“auto”として指定したマージンは常に包括ブロックの書字モードに従って算出されるので、直交フローを生成するボックスは包括ブロックの中で他のボックスと同様に“auto”の値を用いて大きさを決定したり、位置を揃えたりすることができます。

直交フローでの利用可能空間の計算

書字モードが平行なレイアウトではボックスを内包する包括ブロックのインライン・サイズが明確に指定されていてブロック・サイズは制限がないのが一般的ですが、直交フローが生成される場合、包括ブロックのインライン・サイズに制限がなく、ブロック・サイズが明確に指定されているという状態になり得ます。しかし、このような場合には包括ブロックのインライン・サイズに依存した“<percentage>”値や他のインライン軸に沿った計算ができなくなるため、明確な利用可能なインライン・サイズを必要とする計算のために代わりに代替の制約が適用され、以下のうち一番小さいものが使用されます。

• 包括ブロックの内部寸法が固定されていればその大きさ、そうでなければ、包括ブロックの最大サイズを上限、最小サイズを下限とした時の大きさ。
• 最も近い祖先スクロールポートの内部寸法が固定されていればその大きさ、そうでなければ、最も近い祖先スクロールポートの内部寸法の最大サイズを上限、最小サイズを下限とした時の大きさ。
• 初期包括ブロックのブロック・サイズ

直交フローでのブロック・コンテナの自動的なサイズの計算

直交フローを生成しているボックスがブロック・コンテナもしくはカラム・ボックスのいずれかで、インライン・サイズが“auto”で指定されている場合、以下のようにボックスの大きさを計算します。

まず、“column-width”プロパティの使用値を計算します。

“column-count”プロパティと“column-width”プロパティの値がどちらも“auto”である場合

以下の寸法を引数とした計算式“min(max-content,max(min-content,constraint))”(“max()”関数と“min()”関数を入れ子にしたもので“fit-content()”関数による計算に類似)で計算します。

• “max-content”はボックスの最大コンテント・インライン・サイズとします。
• “min-content”はボックスの最小コンテント・インライン・サイズとします。
• “constraint”は以下の中で最も小さい大きさにストレッチ・フィットで収まるインライン軸方向の大きさです。
  • 包括ブロックの内部寸法が固定されていればその大きさ、そうでなければ、包括ブロックの最大サイズを上限、最小サイズを下限とした時の大きさ。
  • 最も近い祖先スクロールポートの内部寸法が固定されていればその大きさ、そうでなければ、最も近い祖先スクロールポートの内部寸法の最大サイズを上限、最小サイズを下限とした時の大きさ。
  • 初期包括ブロックのブロック・サイズ

“column-count”プロパティの値が“auto”で“column-width”プロパティの値は“auto”でない場合

計算式“min(max-content,max(min-content,constraint - (〚column-countの値〛 -1) * 〚column-gapの値〛))”で計算します。

“column-count”プロパティと“column-width”プロパティ”の値がいずれも“auto”でない場合

“column-width”プロパティの使用値は計算値と同じです。

次に、カラム・ボックスの長さの使用値を計算します。

ブロック・サイズの計算値が“auto”であり、“column-count”プロパティと“column-width”プロパティの指定値のうち少なくとも一つが“auto”である場合

ボックスのブロック・サイズが明確であればその大きさを使用し、そうでなければ、ボックスのストレッチフィット・サイズが明確であればその大きさを使用し、そうでなければ、ボックスの最大コンテント・ブロック・サイズを使用します。

そうでない場合

マルチカラム・コンテナの通常の規則に従って大きさを計算します。

次に、マルチカラム・コンテナのインライン・サイズの使用値を計算します。

コンテンツがマルチカラム・コンテナの中で行が折り返されず、断片化もされない場合

インライン・サイズの使用値はボックスのコンテンツの最大コンテント・インライン・サイズです。

そうでない場合

“column-count”プロパティ、、“column-width”プロパティ、、“column-gap”プロパティの使用値から計算します。

ボックスのブロック・サイズの使用値は以下のいずれかとなります。

複数のカラム・ボックスがある場合

カラム・ボックスの長さです。

カラム・ボックスが1個だけの場合

ボックスのコンテンツの最大コンテント・ブロック・サイズ

ユーザー・エージェントがマルチカラム・レイアウトに対応していない場合にはブロック軸方向の利用可能空間が無制限にあるかのようにブロック・サイズを計算できます。

その他の直交フロー・ルートの自動的なサイズの計算

直交フローを生成しているボックスがブロック・コンテナもしくはカラム・ボックスのいずれかである場合、上記のような特別なレイアウトの規則がありますが、他のレイアウト方法(フレックス・コンテナなど)ではそのまま無制限の利用可能空間に最大コンテント・サイズでレイアウトされます。

ただし、ボックスはその中に内包するブロック・コンテナに無制限の利用可能空間を引き渡し、そのブロック・コンテナ自身が直交フローを生成していなかったとしても上記の特別なレイアウトの規則を適用させます。

直交フローの断片化

ページ化メディアやマルチカラム・レイアウトなどでボックスが断片化される場合、垂直書字モードや直交フローでも水平書字モードの場合と同様に行ボックスの途中には分割を挿入しません。ただし、マルチカラム・レイアウトに対応するユーザー・エージェントではカラム・ボックスの間に分割を挿入することができます。

ユーザー・エージェントはルート要素によって生成されたページ付けの流れからはみ出したコンテンツを印刷することが求められていないため、複数の書字モードを混用して長い文章をレイアウトする場合にはすべてのコンテンツが文書のページ付けの方向に沿っているように注意する必要があります。

主書字モード

“主書字モード(Principal Writing Mode)”は“writing-mode”プロパティ、“direction”プロパティ、“text-orientation”プロパティの使用値によって決定されます。

HTML文書の場合、ルート要素が子要素として“body”要素を持つのであれば“body”要素の“writing-mode”プロパティ、“direction”プロパティの計算値がルート要素自身の値の代わりに使用されます。ユーザー・エージェントは“text-orientation”プロパティの値も同様にして“body”要素から取ることができます。なお、この場合でもルート要素自身のこれらのプロパティの計算値は変わりません。

主書字モードは初期包括ブロックとビューポートにも伝播し、ルート要素のレイアウトやビューポートのスクロール方向に影響します。

また、主書字モードはページ進行に影響を与えます。ページ化メディア(印刷される文書や印刷プレビューなど)ではCSSはすべてのページを左ページと右ページに分類しますが、ページ進行の方向は見開きで左右のページのどちらが先なのかと、最初のページが既定で左ページと右ページのどちらなのかを決定します。

縦中横

縦中横は縦書きのテキストの中でラテン文字や数字などを横書きにするレイアウト方法です。

レイアウトと描画が複雑になるのを防ぐため、“text-combine-upright”プロパティによって縦中横にする際に組み合わせることができるテキストはボックスの境界をまたがない連続する文字であるテキストのみです。

レイアウト方法

“text-combine-upright: all;”である場合、縦中横になるテキストは“unicode-bidi: isolate;”となり、水平方向に配置されます。この時、“text-spacing”プロパティや強制ライン・ブレイクは無視されますが、指定されたフォントの設定は使用されます。

縦中横になるテキストの最初と最後にあるホワイトスペースははインライン・ブロック(“display: inline-block;”)の場合と同様に処理します。

縦中横として組み合わせたテキストの大きさは1辺が“1em”の正方形に収まるものと仮定され、その正方形からはみ出た部分はレイアウトを計算する際には考慮されません。ユーザー・エージェントは文字をこの正方形の中央に揃えて描画します。

縦中横として組み合わせたテキストのベースラインは親となるインライン・ボックスの“text-over”と“text-under”ベースラインの中間に揃えられるように、“vertical-align”プロパティによるベースラインの調整が行われる前に選択されます。

縦中横として組み合わせたテキストは双方向(bidi)のテキストの並べ替えの際には“text-orientation: upright;”である文字と同様に扱われます。

縦中横として組み合わせられた後のライン・ブレイクについては通常のインライン・ボックスと同様に扱われます。

強調やテキスト装飾、空白の調整など、その他のテキストのレイアウトを施す際には縦中横として組み合わせたテキストは1個のオブジェクト置換文字(U+FFFC)であるかのように扱われます。

テキストの圧縮

ユーザー・エージェントは縦中横として組み合わせた文字の送り幅の合計が“1em”に収まるようにしなければならず、必要であればテキストを圧縮します。

OpenTypeを使用している場合、縦中横として組み合わせたすべての文字で幅が異なる字形(“hwid”、“twid”、“qwid”)が使用可能であればそれらを使用します。そうでなければ、ユーザー・エージェントはフォントが提供する半角字形や三分字形、四分字形などの字形に代える、フォントが提供する水平方向に文字を圧縮する機能を使用する、幾何学的に水平方向に文字を圧縮するなど何らかの方法で送り幅の合計が“1em”に収まるようにします。

フォントによっては漢字など表意文字が幅は“1em”であっても高さは“1em”未満である場合があります。この時、ユーザー・エージェントは縦中横として組み合わせたテキストの高さが“水(U+6C34)”に指定されたフォントの設定を適用した時の縦の送り幅と同じになるように拡大・縮小することができます。

また、縦中横として組み合わせたテキストが2字以上である場合には“text-transform: full-width;”で半角文字を全角文字に変換するアルゴリズムを逆用することで全角文字は半角文字に置き換え、その後に他の圧縮処理を施します。

プロパティ