CSS Writing Modes Module Level 3

1.1. ~module間の相互作用

この~moduleは、 `CSS2$r § 8.6, § 9.10 にて定義されている特能 — `unicode-bidi$p, `direction$p — を置換し，それらを拡張する。 それらの特能と, 他の［ ~text行lを設定するための~text演算 ］との相互作用は、 `CSS-TEXT-3$r `§ 各種~text演算の処理~順序＠~CSSTEXT#order$ に述べられる。 ◎ This module replaces and extends the unicode-bidi and direction features defined in [CSS2] sections 8.6 and 9.10. The interaction of its features with other text operations in setting lines of text is described in CSS Text 3 § Text Processing Order of Operations.

［ `writing-mode$p ／ `direction$p ／ `text-orientation$p ］~propの`算出d値$は、 （これらの~propが，当の要素に`適用され$ない場合でも `CSS-CASCADE-4$r ）［ `~fontに相対的な長さ$の算出, `~flowに相対的な~prop$の~cascade ］などの計算を通して，他の無関係な~propの算出d値に広く波及し得る — それらは、 目的をもって［ 当の要素に算出される`書字~mode$や それに依存し得る~font計量 ］に依存しているので。 ◎ The computed values of the writing-mode, direction, and text-orientation properties (even on elements to which these properties themselves don’t apply [CSS-CASCADE-4]) are broadly able to influence the computed values of other, unrelated properties through calculations such as the computation of font-relative lengths or the cascade of flow-relative properties which purposefully depend on the computed writing mode or on font metrics that can depend on the writing mode.

1.2. 値~型と各種用語

【 この節の他の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$ に移譲。 】

この仕様に利用される 他の重要な各種用語と概念は、 `CSS2$r, `CSS-TEXT-3$r にて定義される。 ◎ Other important terminology and concepts used in this specification are defined in [CSS2] and [CSS-TEXT-3].

2.1. 方向性の指定-法： `direction^p ~prop

~HTML~UAにおける~CSS~style付け機能は，オフにされることもあるので、 ~HTML作者には，［ ~stylesheetが無い下でも正しい双方向-~layoutが確保されるよう， ~HTML `dir$a 属性と `bdo$e 要素を利用する ］ことを推奨する。 作者は、 ~HTML文書に `direction^p を利用するべきでない。 ◎ Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use direction in HTML documents.

この~prop用の各種 値の意味は： ◎ Values for this property have the following meanings:

`ltr@v

この値は、 `行内~基底~方向$（双向~方向性）を［ `行-左端$から`行-右端$へ ］に設定する。 ◎ This value sets inline base direction (bidi directionality) to line-left-to-line-right.

`rtl@v

この値は、 `行内~基底~方向$（双向~方向性）を［ `行-右端$から`行-左端$へ ］に設定する。 ◎ This value sets inline base direction (bidi directionality) to line-right-to-line-left.

【 `縦組み$の下で，これらの値が表す物理-方向は、 `§ 抽象-方向と物理-方向の対応関係＠#logical-to-physical$ にも見られる。 】

注記： `direction$p ~propは、［ `unicode-bidi$p 値が `normal$v にされた`行内~box$ ］に指定されても，双向性による並替ngに対する効果はない。 ~boxは、 双方向-~algoにおいて，追加的な埋込み~levelを開かないので。 ◎ The direction property has no effect on bidi reordering when specified on inline boxes whose unicode-bidi value is normal, because the box does not open an additional level of embedding with respect to the bidirectional algorithm.

注記： ~table~col~boxに指定される `direction$p ~propは、 その~col下の~cellには継承されない — ~colは、 文書~treeにおける~cellの先祖ではないので。 したがって、 ~CSSの下では，［ `HTML401$r § 11.3.2.1 による `dir$a 属性の継承~規則 ］は容易には捕捉できない。 ◎ The direction property, when specified for table column boxes, is not inherited by cells in the column since columns are not the ancestors of the cells in the document tree. Thus, CSS cannot easily capture the "dir" attribute inheritance rules described in [HTML401], section 11.3.2.1.

2.2. 埋込みと上書き： `unicode-bidi^p ~prop

~HTML~UAにおける~CSS~style付け機能は，オフにされることもあるので、 ~HTML作者には — ~stylesheetが無い下でも正しい双方向-~layoutが確保されるよう — ［ ~HTMLの `dir$a 属性と `bdo$e 要素を利用すること ］および［ ~HTML要素~型が［ ~text~level, ~group化~level ］どちらなのか適切に区別すること ］を推奨する。 作者は、 ~HTML文書に `unicode-bidi$p を利用するべきでない。 ◎ Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute, <bdo> element, and appropriate distinction of text-level vs. grouping-level HTML element types to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use unicode-bidi in HTML documents.

通常は （すなわち， `unicode-bidi$p が `normal$v のとき）、 `行内~box$は，~Unicode双方向-~algoに対し透過的になる。 すなわち、 内容は，~boxの境界は無かったかのように順序付けられる。 `unicode-bidi$p ~prop用の他の値は、 その~algoの新たな視野を`行内~box$に作成し， ~textの内在的~方向性を上書きさせる。 ◎ Normally (i.e. when unicode-bidi is normal) an inline box is transparent to the unicode bidi algorithm; content is ordered as if the box’s boundaries were not there. Other values of the unicode-bidi property cause inline boxes to create scopes within the algorithm, and to override the intrinsic directionality of text.

この~prop用の各種 値の意味は： ◎ Values for this property have the following (normative) meanings:

`normal@v

~boxは、 双方向-~algoにおいて，追加的な埋込み~levelを開かない。 `行内~box$に対しては、 ~box境界を越えて，暗黙的な並替ngが働く。 ◎ The box does not open an additional level of embedding with respect to the bidirectional algorithm. For inline boxes, implicit reordering works across box boundaries.

`embed@v

~boxが`行内$である場合、 この値は， `方向上の埋込み@ （ `directional embedding^en ）と呼ばれる［ 双方向-~algoにおける追加的な埋込み~level ］を開く。 この埋込み~levelの方向は、 ~boxの `direction$p ~propにより与えられる。 ~boxの内側では、 暗黙的に並替ngが行われる。 ◎ If the box is inline, this value creates a directional embedding by opening an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the direction property. Inside the box, reordering is done implicitly.

注記： この値は、 `行内$でない~boxに対しては，効果はない。 ◎ This value has no effect on boxes that are not inline.

`isolate@v

この値は、 `行内~box$において，その内容を `双向-隔離-@ （ `bidi-isolate^en ）する。 すなわち、 各~並び — ［ 塊~境界や`強制d段落~分断$ ］により中断されない，`行内~levelの~box$からなる並び — が `隔離列@ （ `isolated sequence^en ）として扱われることを除いて， `方向上の埋込み$と類似になる （それに則って，埋込み~levelを増やす）： ◎ On an inline box, this bidi-isolates its contents. This is similar to a directional embedding (and increases the embedding level accordingly) except that each sequence of inline-level boxes uninterrupted by any block boundary or forced paragraph break is treated as an isolated sequence:

• この隔離列の内容は、［ ~boxの `direction$p ~propにより指定される基底~方向性を伴う，独立な段落 ］の内側にあるかのように順序付けられる。 ◎ the content within the sequence is ordered as if inside an independent paragraph with the base directionality specified by the box’s direction property.
• それを包含している双向~段落における双向性~解決の目的においては、 この隔離列は， 1 個の `FFFC^U `Object Replacement Character^cn であったかのように扱われる。 ◎ for the purpose of bidi resolution in its containing bidi paragraph, the sequence is treated as if it were a single Object Replacement Character (U+FFFC).

これにより、［ ~boxの内側の内容が，~boxの周囲の内容により双向-影響される ］ことも［ ~boxの周囲の内容が，~boxの内容や, ~boxに指定された方向性により双向-影響される ］ことも，なくなる。 しかしながら，~box内の`強制d段落~分断$は、 依然として，それを包含している段落の中で`行l分断$を作成する。 ◎ In effect, neither is the content inside the box bidi-affected by the content surrounding the box, nor is the content surrounding the box bidi-affected by the content or specified directionality of the box. However, forced paragraph breaks within the box still create a corresponding break in the containing paragraph.

注記： この値は、 `行内$でない~boxに対しては効果はない。 ◎ This value has no effect on boxes that are not inline.

`bidi-override@v

この値は、 ~boxに~~直に含まれる`行内~level$の内容を `方向上の上書き@ （ `directional override^en ）の下に置く。 すなわち，~boxが`行内$ならば、［ ~boxは，双方向-~algoにおいて`方向上の埋込み$の様に挙動する ］が［ ~boxの中の並替ngは， `direction$p ~propに従う順序通りに~~配列され、 双方向-~algoを成す暗黙的な部分は無視される ］ことを意味する。 ~boxが`塊~容器$ならば、 この上書きは［ その内容~すべてを囲む`根~行内~box$【！匿名~行内~box】 ］に適用される。 ◎ This value puts the box’s immediate inline content in a directional override. For an inline, this means that the box acts like a directional embedding in the bidirectional algorithm, except that reordering within it is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. For a block container, the override is applied to an anonymous inline box that surrounds all of its content.

`isolate-override@v

これは、［ `isolate$v による`双向-隔離-$の挙動 ］と［ `bidi-override$v による`方向上の上書き$の挙動 ］を組合せる： それは、 周囲の内容に対しては，`isolate$v と等価になる一方、 ~boxの中では， `bidi-override$v が指定されていたかのように内容を順序付ける。 それは、 実質的に，`隔離列$の内側に`方向上の埋込み$を入子にする。 ◎ This combines the isolation behavior of isolate with the directional override behavior of bidi-override: to surrounding content, it is equivalent to isolate, but within the box content is ordered as if bidi-override were specified. It effectively nests a directional override inside an isolated sequence.

`plaintext@v

この値は、 次を除き， `isolate$v として挙動する ⇒ ~Unicode双方向-~algoの目的においては、 ~boxの各［ `双向~段落$（`塊~容器$の場合）／ `隔離列$（`行内~box$の場合） ］の基底~方向性が （~boxの `direction$p ~propは利用せずに）［ ~Unicode双方向-~algoの規則 P2, P3 による経験則 ］に従って決定される。 ◎ This value behaves as isolate except that for the purposes of the Unicode bidirectional algorithm, the base directionality of each of the box’s bidi paragraphs (if a block container) or isolated sequences (if an inline) is determined by following the heuristic in rules P2 and P3 of the Unicode bidirectional algorithm (rather than by using the direction property of the box).

`normal$v 以外の値は、 実質的に ⇒ ［ 段落を並替ng用の~Unicode双方向-~algoに渡す ］前に、［ ~Unicode双方向-~algoの条項 `HL3＠~UTR/tr9/#HL3$ `UAX9^r ］に従って，［ 対応する~Unicode双向性~制御~code ］を［ ~text~streamの中の，行内~要素の始端と終端の所 ］に挿入する （ `§ CSS–Unicode 双向性~制御による転置, ~textの並替ng＠#bidi-control-codes$を見よ）。 ◎ Following Unicode Bidirectional Algorithm clause HL3 [UAX9], values other than normal effectively insert the corresponding Unicode bidi control codes into the text stream at the start and end of the inline element before passing the paragraph to the Unicode bidirectional algorithm for reordering. (See § 2.4.2 CSS–Unicode Bidi Control Translation, Text Reordering.)

† ( 始端, 終端 ) に対する ( LRO, PDF ) ／ ( RLO, PDF ) は、［ `unicode-bidi$p に対する これらの値が，`塊~容器$上に指定されていた場合 ］には，`塊~容器$の`根~行内~box$にも適用される。 ◎ * The LRO/RLO+PDF pairs are also applied to the root inline box of a block container if these values of unicode-bidi were specified on the block container.

注記： `unicode-bidi$p ~propは継承されないので、 塊~boxに［ `bidi-override$v ／ `plaintext$v ］を設定しても，子孫~塊には影響しない。 したがって，これらの値は、 `塊~level$の構造を包含しない［ `塊$や`行内$ ］に対する利用に最も適する。 ◎ Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures.

注記： `unicode-bidi$p は、 `plaintext$v の場合でも `direction$p ~propには影響せず， したがって `direction$p に依存する~layout計算にも影響しない。 ◎ Note that unicode-bidi does not affect the direction property even in the case of plaintext, and thus does not affect direction-dependent layout calculations.

注記： ~Unicode~algoは，埋込み~levelを 125 階までに制限しているので、 `unicode-bidi$p には `normal$v 以外の値を利用し過ぎないように~careするべきである。 特に，行内~markupの入子が深い所では、 値 `inherit$v は，細心の注意の下に利用されるべきである。 しかしながら，`塊$としての表示が一般に意図されている要素に対しては、［ `display$p が `inline$v に変更された場合でも， その要素~内容がひとまとめに保たれる ］よう，［ `unicode-bidi$p を `isolate$v に設定する ］ことが選好される（次~節の例を見よ）。 ◎ Because the Unicode algorithm has a limit of 125 levels of embedding, care should be taken not to overuse unicode-bidi values other than normal. In particular, a value of inherit should be used with extreme caution in deeply nested inline markup. However, for elements that are, in general, intended to be displayed as blocks, a setting of unicode-bidi: isolate is preferred to keep the element together in case the display is changed to inline (see example below).

2.3. 双方向-~textの例

双方向-~textを伴う~XML文書の例を以下に示す。 それは、 重要な設計~原則を説明する： 文書~言語の設計者は、［ 言語の~~主要な構成子（要素と属性）, 付随する~stylesheet ］の両者において，双向性を織り込むべきである。 ~stylesheetは、 双向性~規則が他の~style規則から分離されるように設計されるべきである — その種の規則は、 他の~stylesheetから上書きされないようにして， 文書~言語による双向性の挙動を保全するべきである。 ◎ The following example shows an XML document with bidirectional text. It illustrates an important design principle: document language designers should take bidi into account both in the language proper (elements and attributes) and in any accompanying style sheets. The style sheets should be designed so that bidi rules are separate from other style rules, and such rules should not be overridden by other style sheets so that the document language’s bidi behavior is preserved.

<section dir=rtl>
  <para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</para>
  <para>HEBREW6 <emphasis>HEBREW7</emphasis> HEBREW8</para>
</section>
<section dir=ltr>
  <para>english9 english10 english11 HEBREW12 HEBREW13</para>
  <para>english14 english15 english16</para>
  <para>english17 <quote dir=rtl>HEBREW18 english19 HEBREW20</quote></para>
</section>

/* 
双向性~用の規則
◎
Rules for bidi
 */
[dir=rtl] {direction: rtl; unicode-bidi: isolate; }
[dir=ltr] {direction: ltr; unicode-bidi: isolate; }

/* 
呈示~用の規則
◎
Rules for presentation
 */
section, para  {display: block;}
emphasis       {color: red;}
quote          {font-style: italic;}

           5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                            8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

   2WERBEH 1WERBEH
  -EH 4WERBEH english3
             5WERB

   -EH 7WERBEH 6WERBEH
             8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

2.4. 双方向-並替ng~algoの適用-法

双方向-~textを~supportする~UAは、 各~並び — 塊~境界や［ “`bidi type B＠~UTR/tr9/#Bidirectional_Character_Types$” 【段落区切りを意味する字種】 `強制d段落~分断@ （ `forced paragraph break^en ） ］により中断されない，一群の`行内~levelの~box$が成す並び — ごとに， ~Unicode双方向-~algoを適用するモノトスル。 そのような並びは、 `双向~段落@ （ `bidi paragraph^en ） — 双方向-~algoにおける段落~単位 — を形成する。 ◎ User agents that support bidirectional text must apply the Unicode bidirectional algorithm to every sequence of inline-level boxes uninterrupted by any block boundary or “bidi type B” forced paragraph break. This sequence forms the paragraph unit in the bidirectional algorithm.

<para>...<i1><i2>...<BR/>...</i2></i1>...</para>

<para>...<i1><i2>...</i2></i1><BR/><i1><i2>...</i2></i1>...</para>

3.1. 縦書き~text — 序論

首に横書きに~lay-outされる~Latin用字系を利用する言語と違って、 中国語や日本語のような~Asian言語は，縦書きにも~lay-outされ得る。 同じ~textが横書きと縦書きに~lay-outされる日本語の例を下に示す。 横書きの場合、 ~textは左端から右端へ, 上端から下端へ，読まれる。 縦書きの場合、 ~textは上端から下端へ, 右端から左端へ，読まれる。 右向きの横書きにおける左端~辺からの字下げは、 下向きの縦書きにおいては，上端~辺からの字下げに転化される。 ◎ Unlike languages that use the Latin script which are primarily laid out horizontally, Asian languages such as Chinese and Japanese can be laid out vertically. The Japanese example below shows the same text laid out horizontally and vertically. In the horizontal case, text is read from left to right, top to bottom. For the vertical case, the text is read top to bottom, right to left. Indentation from the left edge in the left-to-right horizontal case translates to indentation from the top edge in the top-to-bottom vertical case.

注記： ［ 中国語／日本語 ］においては、 各~行lは，右端から左端へ, あるいは上端から下端へ 順序付けられる。 ［ ~Mongolian／満州語 ］においては、 各~行lは，左端から右端へ順序付けられる。 ◎ For Chinese and Japanese lines are ordered either right to left or top to bottom, while for Mongolian and Manchu lines are ordered left to right.

`横組み$から`縦組み$への変化は、 ~layoutのみならず，植字にも影響し得る。 例えば、 【！ ＊】アキ~boxの中での約物の位置が 横書き~caseから縦書き~caseに変化したり， あるいは 代替-~glyphが利用される場合もある。 ◎ The change from horizontal to vertical writing can affect not just the layout, but also the typesetting. For example, the position of a punctuation mark within its spacing box can change from the horizontal to the vertical case, and in some cases alternate glyphs are used.

［ 通常は横書きに表示される~Latin用字系その他の用字系の~text ］も含む縦書き~textは、 ~textをいくつかの仕方で表示し得る。 例えば、 ~Latin単語を側転させたり， 各 字lを正立に方位させ得る： ◎ Vertical text that includes Latin script text or text from other scripts normally displayed horizontally can display that text in a number of ways. For example, Latin words can be rotated sideways, or each letter can be oriented upright:

一部の特別な場合 — 日付の中の 2 桁~数字nなど — には、 ~textは，単独の縦書き文字~boxに密に収まる： ◎ In some special cases such as two-digit numbers in dates, text is fit compactly into a single vertical character box:

~layoutは、［ 縦書き, 横書き ］要素からなる混成を孕むことが多い： ◎ Layouts often involve a mixture of vertical and horizontal elements:

縦書き~text~layoutは，双方向-~text~layoutを取扱う必要もある。 例えば，時計回りに回転された~Arabicは、 上向きに~lay-outされる【！＊】。 ◎ Vertical text layouts also need to handle bidirectional text layout; clockwise-rotated Arabic, for example, is laid out bottom-to-top.

3.2. 塊~flow方向： `writing-mode^p ~prop

この~propは、 一連の~text行lを［ 横書き／縦書き ］どちらに~lay-outするか, および 塊の進行~方向を指定する。 とり得る値は： ◎ This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values:

`horizontal-tb@v

`塊~flow方向$は下向きになる。 ◎ Top-to-bottom block flow direction.＼

`書字~mode$, `~typographic~mode$は、 いずれも横書きになる。 ◎ Both the writing mode and the typographic mode are horizontal.

`vertical-rl@v

`塊~flow方向$は左向きになる。 ◎ Right-to-left block flow direction.＼

`書字~mode$, `~typographic~mode$は、 いずれも縦書きになる。 ◎ Both the writing mode and the typographic mode are vertical.

`vertical-lr@v

`塊~flow方向$は右向きになる。 ◎ Left-to-right block flow direction.＼

`書字~mode$, `~typographic~mode$は、 いずれも縦書きになる。 ◎ Both the writing mode and the typographic mode are vertical.

`writing-mode$p ~propは、 `塊~flow方向$ — `行l~box$が堆積されていく方向 — を指定する。 それは、［ `塊~整形~文脈$内の`塊~levelの~box$たち／ `行内$を包含する`塊~容器$内の行l~boxたち／ ~table内の~rowたち ］, 等々を順序付ける方向を決定する。 したがって，この~propは、 行l~boxの方位が（したがって`書字~mode$についても）［ 横書き, 縦書き ］どちらになるかも決定することになる。 その後に、 `text-orientation$p ~propが，行l~boxの中で~textが~lay-outされる方法を決定する。 ◎ The writing-mode property specifies the block flow direction, which determines the ordering direction of block-level boxes in a block formatting context; the ordering direction of line boxes in a block container that contains inlines; the ordering direction of rows in a table; etc. By virtue of determining the stacking direction of line boxes, the writing-mode property also determines whether the line boxes' orientation (and thus the writing mode) is horizontal or vertical. The text-orientation property then determines how text is laid out within the line box.

`置換される要素$の内容は、 `書字~mode$に因り回転されることはない — 例えば， 画像や `iframe^e の内容は、 正立のままにされ，`既定の~obj~size$ `300px^v × `150px^v の方位が~~改められることもない。 しかしながら、［ 埋込まれた置換d内容が~textを孕んでいて （ MathML による内容や `form^e 要素など）、 ~UAが当の内容に対し，そのような`縦組み$を~supportする ］ならば， `置換される要素$の`書字~mode$と`行l方位$に合致するべきである。 ◎ The content of replaced elements do not rotate due to the writing mode: images and external content such as from <iframe>s, for example, remain upright, and the default object size of 300px×150px does not re-orient. However embedded replaced content involving text (such as MathML content or form elements) should match the replaced element’s writing mode and line orientation if the UA supports such a vertical writing mode for the replaced content.

<style>
  form { writing-mode: vertical-rl; }
</style>
...
<form>
<p><label>姓名　<input value="艾俐俐"></label>
<p><label>语言　<select><option>English
                       <option>français
                       <option>فارسی
                       <option>中文
                       <option>~~日本語</select></label>
</form>

~boxと その親~box （すなわち、 `display$p は `contents$v でない，~boxに最も近い先祖） の `writing-mode$p 値が相異なる場合 — そのような~boxのうち： ◎ If a box has a different writing-mode value than its parent box (i.e. nearest ancestor without display: contents):

• さもなければ［ `~flow内$にあり， `display$p の算出d値は `inline$v になるもの ］に対しては、 `display$p の算出d値は，代わりに `inline-block$v になる。 ◎ If the box would otherwise become an in-flow box with a computed display of inline, its display computes instead to inline-block.
• `塊~容器$であるものは、 `独立＠~CSSDISP#independent-formatting-context$な`塊~整形~文脈$を確立する — より一般には、 ~boxの`内縁~表示~型$の指定d値が `flow$v ならば，算出d値は `flow-root$v になる。 `CSS-DISPLAY-3$r ◎ If the box is a block container, then it establishes an independent block formatting context. ◎ More generally, if its specified inner display type is flow, then its computed inner display type becomes flow-root. [CSS-DISPLAY-3]

svg { writing-mode: initial; }

@namespace svg "http://www.w3.org/2000/svg";
svg|*[writing-mode=lr], svg|*[writing-mode=lr-tb],
svg|*[writing-mode=rl], svg|*[writing-mode=rl-tb] {
  writing-mode: horizontal-tb; }
svg|*[writing-mode=tb], svg|*[writing-mode=tb-rl] {
  writing-mode: vertical-rl; }

svg|text {
  writing-mode: tb;
  writing-mode: vertical-rl;
}

4.1. 基底線 — 序論

`基底線@ （ `baseline^en ）とは、［ ~textを成す個々の~glyphを互いに整列する ］ための［ 行l~boxの`行内-軸$に沿う線 ］である。 基底線は、 ~fontの中で~glyphを~designする際の基準線になる （例えば，~alphabetic~glyphのほとんどは、 概して，その下端が~alphabetic基底線に整列される）。 また，基底線は、 植字において［ ~fontや~font~sizeが相異なる~glyphどうしを整列する ］ときの基準線を与える。 ◎ A baseline is a line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font (for example, the bottom of most alphabetic glyphs typically align with the alphabetic baseline), and they guide the alignment of glyphs from different fonts or font sizes when typesetting.

【 “基底線” は、 `日本語組版処理の~~要件＠~TR/jlreq/$では， “並び線” と呼ばれている。 】

基底線~tableは、 書記体系により異なるものが選好される。 ◎ Different writing systems prefer different baseline tables.

きちんと構成された~fontは `基底線~table@ を包含する。 それは、 ~fontの~design座標~空間の中で 1 本以上の基底線の位置を指示する。 （~design座標~空間は~font~sizeにより拡縮される） ◎ A well-constructed font contains a baseline table, which indicates the position of one or more baselines within the font’s design coordinate space. (The design coordinate space is scaled with the font size.)

基底線~tableは，~fontの~propであり、 種々の基底線の位置は，~fontの中のすべての~glyphに適用される。 ◎ The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font.

~fontには、［ 横書き~text, 縦書き~text ］の整列~用に異なる`基底線~table$を供するものもある。 ~UAは、［ `縦書き~typographic~mode$においては縦書き用のそれ／ 他の場合は横書き用のそれ ］を利用するべきである。 ◎ Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical typographic modes and the horizontal tables otherwise.

4.2. ~textの基底線

この仕様では、 次の基底線のみを考慮する： ◎ In this specification, only the following baselines are considered:

`~alphabetic基底線@

これは概して、 大文字~Latin~glyphの下端を整列させる。 ◎ The alphabetic baseline, which typically aligns with the bottom of uppercase Latin glyphs.

`~central基底線@

~ideographic~central基底線。 これは概して、 ~em-boxの中心を通る。 ~fontがこの基底線を有していない場合、 ~ideographic~em-boxの［ ~ascender辺（ `行-上面$ ）と~descender辺（ `行-下面$ ） ］の真中に位置するものと見做される。 ◎ The ideographic central baseline, which typically crosses the center of the em box. If the font is missing this baseline, it is assumed to be halfway between the ascender (over) and descender (under) edges of the ideographic em box.

`縦書き~typographic~mode$の下では、 `text-orientation$p 値が［ `mixed$v ／ `upright$v ］ならば，`~central基底線$が`支配的~基底線$として利用される。 他の場合，`~alphabetic基底線$が利用される。 ◎ In vertical typographic mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used.

注記： 将来の~CSS~moduleは、 支配的~基底線と整列に対する他の選択肢も許容するため，より詳細に基底線を~~扱うことになる。 ◎ A future CSS module will deal with baselines in more detail and allow the choice of other dominant baselines and alignment options.

4.3. ［ 不可分な行内 ］の基底線

基底線を持たない`不可分な行内$ （ `inline-block$v , `inline-table$v , 置換される行内~要素など） に対しては、 ~UAは，`基底線~table$を合成する： ◎ If an atomic inline (such as an inline-block, inline-table, or replaced inline element) does not have a baseline, then the UA synthesizes a baseline table thus:

alphabetic

`~alphabetic基底線$は、 `行-下面$ ~margin辺に位置するものと見做される ◎ The alphabetic baseline is assumed to be at the under margin edge.

central

`~central基底線$は、 ~boxの［ `行-下面$~margin辺, `行-上面$~margin辺 ］の真中に位置するものと見做される。 ◎ The central baseline is assumed to be halfway between the under and over margin edges of the box.

注記： 一部の例外を除き、 `vertical-align$p ~prop `CSS2$r が `inline-table$v ／ `inline-block$v ~boxの基底線を定義する。 ◎ The vertical-align property in [CSS2] defines the baseline of inline-table and inline-block boxes with some exceptions.

4.4. 基底線の整列

（`~typographic~mode$に基づいて`変化し得る＠#text-baselines$） `支配的~基底線@ （ `dominant baseline^en ）は、 次の 2 つの場合に，~CSSにおける整列に利用される： ◎ The dominant baseline (which can change based on the typographic mode) is used in CSS for alignment in two cases:

同じ`行内~box$の中で，相異なる~fontに属する~glyphたちを整列するとき： ◎ Aligning glyphs from different fonts within the same inline box.＼

一連の~glyphは、［ それらに対応する~fontの中の支配的~基底線の位置 ］を合わせるように整列される。 ◎ The glyphs are aligned by matching up the positions of the dominant baseline in their corresponding fonts.

親の中で，その子である`行内~levelの~box$を整列するとき： ◎ Aligning a child inline-level box within its parent.＼

`vertical-align$p 用の値 `baseline$v に対しては、 子は，親の`支配的~基底線$を子の中の同じ基底線に合致させるように，親に整列される （例えば，親の支配的~基底線が~alphabeticならば、 子の支配的~基底線が何か別のものであったとしても， 子の`~alphabetic基底線$が親の`~alphabetic基底線$に合致させられる）。 値［ `sub$v ／ `super$v ／ `length$t ／ `percentage$t ］に対しては、［ 基底線は `baseline^v に対するときと同様に整列される ］が，子は［ その `vertical-align$p 値に与えられた~offset ］に則ってズラされる。 ◎ For the vertical-align value of baseline, child is aligned to the parent by matching the parent’s dominant baseline to the same baseline in the child. (E.g. if the parent’s dominant baseline is alphabetic, then the child’s alphabetic baseline is matched to the parent’s alphabetic baseline, even if the child’s dominant baseline is something else.) For values of sub, super, <length>, and <percentage>, the baselines are aligned as for baseline, but the child is shifted according to the offset given by its vertical-align value.

次の~markup例と： ◎ Given following sample markup:

<p><span class="outer">Ap <span class="inner">ਜੀ</span></span></p>

次の~style規則が与えられたとするとき： ◎ And the following style rule:

span.inner { font-size: .75em; }

親（ `.outer^css ）と子（ `.inner^css ）の 基底線~tableは、 ~font~sizeの相違により，整合でないことになる。 支配的な基底線は`~alphabetic基底線$なので、 子~boxの`~alphabetic基底線$が，親のそれに合致するように整列される。 ◎ The baseline tables of the parent (.outer) and the child (.inner) will not match up due to the font size difference. Since the dominant baseline is the alphabetic baseline, the child box is aligned to its parent by matching up their alphabetic baselines.

`baseline-align-sizes^dgm

上の例の `.inner^css の要素に `vertical-align:super$p がアテガわれた場合、 その `.inner^css 子の基底線は，同じ規則が利用されて親に整列されるが、 それに加え，子は上付文字の位置にズラされる。 ◎ If we assign vertical-align: super to the .inner element from the example above, the same rules are used to align the .inner child to its parent; the only difference is in addition to the baseline alignment, the child is shifted to the superscript position.

span.inner { vertical-align: super; font-size: .75em; }

5.1. ~textの方位-法： `text-orientation^p ~prop

この~propは、 行lの中の~textの方位を指定する。 現時点で効果があるのは、 `縦書き~typographic~mode$に限られる — `横書き~typographic~mode$においては、 効果はない。 ◎ This property specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes: the property has no effect in horizontal typographic modes.

各種 値の意味は： ◎ Values have the following meanings:

`mixed@v （混在）

`~typographic文字~単位$のうち，`横書きのみ$の用字系に属するものは、 `側転$に — すなわち，その横書き~textにおける標準な方位から時計回りに 90° 回転して — 植字する。 縦書き用字系に属するものは、 その内在的~方位に植字される。 詳細は、 `縦書きにおける方位＠#vertical-orientations$を見よ。 ◎ Typographic character units from horizontal-only scripts are typeset sideways, i.e. 90° clockwise from their standard orientation in horizontal text. Typographic character units from vertical scripts are typeset with their intrinsic orientation. See Vertical Orientations for further details.

これは、 縦書きが支配的な用字系による~textを~lay-outするための，典型的な値である。 ◎ This value is typical for layout of dominantly vertical-script text.

`upright@v （正立）

`~typographic文字~単位$のうち，`横書きのみ$の用字系に属するものは、 `正立$に — すなわち，それらの標準な横書き方位に — 植字する。 縦書き用字系に属するものは、 その内在的~方位に植字され，通常に形状~付けられる。 詳細は、 `縦書きにおける方位＠#vertical-orientations$を見よ。 ◎ Typographic character units from horizontal-only scripts are typeset upright, i.e. in their standard horizontal orientation. Typographic character units from vertical scripts are typeset with their intrinsic orientation and shaped normally. See Vertical Orientations for further details.

この値は `direction$p の`使用~値$を `ltr$v にする。 加えて、 双向性による並替ngの目的においては， すべての文字は 右向き`~strong文字$として扱われるようになる。 ◎ This value causes the used value of direction to be ltr, and for the purposes of bidi reordering, causes all characters to be treated as strong LTR.

注記： `算出d値$と違って， `direction$p の`使用~値$に波及するのは、 この方向上の上書きが適用されない子孫 （横書き `inline-block$v の内容など） の中へ， `rtl$v を適正に継承できるようにするためである。 ◎ Note: The used value, rather than the computed value, of direction is influenced so that rtl can inherit properly into any descendants (such as the contents of a horizontal inline-block) where this directional override does not apply.

`sideways@v （側転）

すべての~textを`側転$に — 横書き~layout内にあるかのように，かつ 90°時計回りに回転して — 植字する。 ◎ Causes all text to be typeset sideways, as if in a horizontal layout, but rotated 90° clockwise.

注記： この~propの値を変更すると、 `行内~level$の整列に影響し得る。 詳細は、 `~textの基底線＠#text-baselines$ に。 ◎ Changing the value of this property may affect inline-level alignment. Refer to Text Baselines for more details.

~UAは、 後方-互換性の理由から必要であれば，値 `sideways-right@v も受容してもヨイ — それは、 `sideways$v に算出されるとする。 ◎ UAs may accept sideways-right as a value that computes to sideways if needed for backward compatibility reasons.

.vertical-upright-hebrew {
  writing-mode: vertical-rl;
  text-orientation: upright;
  unicode-bidi: bidi-override;
  direction: ltr;
}

6.1. 抽象-次元

`抽象-次元@ （ `abstract dimension^en ）は、 以下で定義される： ◎ The abstract dimensions are defined below:

`塊~次元@ （塊~寸法, `block dimension^en ）

行lにおける~textの~flowに垂直な次元（寸法） — すなわち、 `横組み$では`縦~次元$になり， `縦組み$では`横~次元$になる。 ◎ The dimension perpendicular to the flow of text within a line, i.e. the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes.

`行内~次元@ （行内~寸法, `inline dimension^en ）

行lにおける~textの~flowに平行な次元（寸法） — すなわち、 `横組み$では`横~次元$になり， `縦組み$では`縦~次元$になる。 ◎ The dimension parallel to the flow of text within a line, i.e. the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes.

`塊-軸@ （ `block-axis^en ）

塊~次元における軸 — すなわち、 `横組み$では`縦~軸$になり， `縦組み$では`横~軸$になる。 ◎ The axis in the block dimension, i.e. the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes.

`行内-軸@ （ `inline-axis^en ）

行内~次元における軸 — すなわち、 `横組み$では`横~軸$になり， `縦組み$では`縦~軸$になる。 ◎ The axis in the inline dimension, i.e. the horizontal axis in horizontal writing modes and the vertical axis in vertical writing modes.

`塊~size@ （ `block size^en ）

`論理-縦幅@ （ `logical height^en ）

塊~次元における測定 — `横組み$では 物理-縦幅（縦~次元）を指し， `縦組み$では 物理-横幅（横~次元）を指す。 ◎ A measurement in the block dimension: refers to the physical height (vertical dimension) in horizontal writing modes, and to the physical width (horizontal dimension) in vertical writing modes.

`行内~size@ （ `inline size^en ）

`論理-横幅@ （ `logical width^en ）

行内~次元における測定 — `横組み$では 物理-横幅（横~次元）を指し， `縦組み$では 物理-縦幅（縦~次元）を指す。 ◎ A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes.

【 行内~sizeは “`measure^en”, 塊~sizeは “`extent^en” と称されることもある。 この仕様も、 過去にはそう称していた。 （ `measure^en という語は、 おそらく組版用語に由来する — ~textを~layoutしたときに行lを占める長さを “~~測った” という意味。 ） 】

6.2. ~flow相対な方向

`~flow相対な方向@ の［ `塊-始端$, `塊-終端$, `行内-始端$, `行内-終端$ ］は、 ~page上の内容の~flowに相対的に定義される。 右向き `horizontal-tb$v `書字~mode$下では、 順に，［ 上端, 下端, 左端, 右端 ］方向になる。 それらは以下のように定義される： ◎ The flow-relative directions, block-start, block-end, inline-start, and inline-end, are defined relative to the flow of content on the page. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively. They are defined as follows:

`塊-始端@ （ `block-start^en ）

`塊~flow方向$において先に来る側であり， `writing-mode$p ~propにより決定される：［ `horizontal-tb$v ／ `vertical-rl$v ／ `vertical-lr$v ］~mode下では、 物理的な［ 上端／右端／左端 ］になる。 ◎ The side that comes earlier in the block flow direction, as determined by the writing-mode property: the physical top in horizontal-tb mode, the right in vertical-rl, and the left in vertical-lr.

`塊-終端@ （ `block-end^en ）

`塊-始端$ の反対~側。 ◎ The side opposite block-start.

`行内-始端@ （ `inline-start^en ）

~textの`行内~基底~方向$の始端~側。 `direction$p の使用~値が［ `ltr$v ／ `rtl$v ］になる~boxに対しては，これは［ `行-左端$／`行-右端$ ］側を意味する。 ◎ The side from which text of the inline base direction would start. For boxes with a used direction value of ltr, this means the line-left side. For boxes with a used direction value of rtl, this means the line-right side.

`行内-終端@ （ `inline-end^en ）

`行内-始端$の反対~側。 ◎ The side opposite start.

文脈~上，一義的になる, あるいは両方の意味を包摂する所では、 用語 `始端@ （ `start^en ）が［ `塊-始端$／`行内-始端$ ］に利用され，用語 `終端@ （ `end^en ）が［ `塊-終端$／`行内-終端$ ］に利用される。 ◎ Where contextually unambiguous or encompassing both meanings, the terms start and end are used in place of block-start/inline-start and block-end/inline-end, respectively.

注記： ~boxの［ `塊-始端$, `塊-終端$ ］側の決定-法は， `writing-mode$p ~propのみに依存する一方で、 ~boxの［ `行内-始端$, `行内-終端$ ］側の決定-法は，その~propに加えて `direction$p ~propにも依存する。 ◎ Note that while determining the block-start and block-end sides of a box depends only on the writing-mode property, determining the inline-start and inline-end sides of a box depends not only on the writing-mode property but also the direction property.

6.3. 行l相対な方向

`行l方位@ （ `line orientation^en ）は、 `行l~box$のどちら側が論理的な “上端” （~ascender側）になるのかを決定する。 それは、 `writing-mode$p より与えられる。 行l相対な “上端” は、 通例的には `塊-始端$側に対応するが，常にそうなるとは限らない — ~Mongolianの植字（したがって既定では `vertical-lr$v `書字~mode$）では、 行l相対な “上端” は `塊-終端$側に対応する。 それゆえ、 別個な各種用語を要する。 ◎ The line orientation determines which side of a line box is the logical “top” (ascender side). It is given by the writing-mode property. Usually the line-relative “top” corresponds to the block-start side, but this is not always the case: in Mongolian typesetting (and thus by default in vertical-lr writing modes), the line-relative “top” corresponds to the block-end side. Hence the need for distinct terminology.

`vertical-align:top$p に類するものを対応付けるための， 行lに相対的な［ “上端” ／ “下端” ］を指す用語に加え、 `text-align:left$p に類するものを対応付けるための， 行lに相対的な［ “左端” ／ “右端” ］を指す用語も必要になる。 したがって，`行l方位$に相対的に定義される 4 種の `行l相対な方向@ （ `line-relative direction^en ）がある： ◎ In addition to a line-relative “top” and “bottom” to map things like 'vertical-align: top', CSS also needs to refer to a line-relative “left” and “right” in order to map things like text-align: left. Thus there are four line-relative directions, which are defined relative to the line orientation as follows:

`行-上面@ （ `line-over^en ）, または略して `上面@ （ `over^en ）

名目上，`行l~box$の［ ~ascender側, あるいは “上端” 側 ］に対応するとされる側（概して上線が描かれる側） ◎ Nominally the side that corresponds to the ascender side or “top” side of a line box. (The side overlines are typically drawn on.)

【 この訳では、 もっぱら “行-上面” の表記に統一する。 次の “下面” も同様。 】

`行-下面@ （ `line-under^en ）, または略して `下面@ （ `under^en ）

`行-上面$の反対~側 — 行l相対な［ ~descender側, あるいは “下端” 側 ］（概して下線が描かれる側）。 ◎ Opposite of over: the line-relative “bottom” or descender side. (The side underlines are typically drawn on.)

`行-左端@ （ `line-left^en ）

`行l~box$の行l相対な “左端” 側であり、 名目上，右向き~textの始端とされる側。 ◎ The line-relative "left" side of a line box, which is nominally the side from which LTR text would start.

`行-右端@ （ `line-right^en ）

`行l~box$の行l相対な “右端” 側であり、 名目上，左向き~textの始端とされる側（`行-左端$の反対~側）。 ◎ The line-relative "right" side of a line box, which is nominally the side from which RTL text would start. (Opposite of line-left.)

物理-方向と行l相対な方向との間の正確な対応関係については、 `抽象-方向と物理-方向の対応関係＠#logical-to-physical$を見よ。 ◎ See the table below for the exact mappings between physical and line-relative directions. ◎ Line orientation compass

6.4. 抽象-方向と物理-方向の対応関係

次の表tに、 抽象-方向（表tの 1 列目）から物理-方向への対応関係を要約する （これは、 `direction$p, `writing-mode$p の`使用~値^emに基づく）： ◎ The following table summarizes the abstract-to-physical mappings (based on the used direction and writing-mode): ◎ Abstract-Physical Mapping

注記： `direction$p の`使用~値$は［ `writing-mode$p, `text-orientation$p ］の`算出d値$に依存する： `縦組み$においては、 `text-orientation^p 値 `upright$v は， `direction^p の使用~値を `ltr$v に強制する。 ◎ Note: The used direction depends on the computed writing-mode and text-orientation: in vertical writing modes, a text-orientation value of upright forces the used direction to ltr.

7.1. 縦組みにおける~layoutの原則

`縦組み$における~CSS~box~layoutは、 以下に要旨する原則に従って，`横組み$の~layoutに相似的になる： ◎ CSS box layout in vertical writing modes is analogous to layout in the horizontal writing modes, following the principles outlined below:

`横組み$の横~次元に適用される~layout計算~規則 （ CSS2.1, § 10.3 によるものなど） は、 `縦組み$では，代わりに縦~次元に適用される。 同様に，`横組み$の縦~次元に適用される~layout計算~規則 （ CSS2.1, § 10.6 によるものなど） は、 `縦組み$では，代わりに縦~次元に適用される。 したがって： ◎ Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes. Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6) that apply to the vertical dimension in horizontal writing modes instead apply to the horizontal dimension in vertical writing modes. Thus:

• ［ 横幅／縦幅 ］を指す~layout規則は、 代わりに［ 縦幅／横幅 ］を利用する。 ◎ Layout rules that refer to the width use the height instead, and vice versa.
• ［ `*-left^p ／ `*-right^p ］~box~prop（ ~margin, ~border, ~padding, 位置決め~offset ）を指す~layout規則は、 代わりに，［ `~flow相対な方向$を利用して CSS2.1 による`横組み$ 規則を`縦組み$ 規則へ対応付ける ］下で［ `*-top^p ／ `*-bottom^p ］を利用し，その逆も同様にする。 これらの~propが~boxのどの側に適用されるかは、 変化しない — 変化するのは、［ どの値がどの~layout計算の入力とされるか ］に限られる。 例えば， `margin-left$p ~propは、 依然として左側の~marginに影響する — しかしながら、 `vertical-rl$v `書字~mode$下では， `margin-bottom$p に代わって~margin相殺の一部を成す。 ◎ Layout rules that refer to the *-left and *-right box properties (border, margin, padding, positioning offsets) use *-top and *-bottom instead, and vice versa, mapping the horizontal writing-mode rules of CSS2.1 into vertical writing-mode rules using the flow-relative directions. The side of the box these properties apply to doesn’t change: only which values are inputs to which layout calculations changes. The margin-left property still affects the lefthand margin, for example; however in a vertical-rl writing mode it takes part in margin collapsing in place of margin-bottom.
• `direction$p ~propが左右どちらを選ぶかに依存する~layout規則 （例： ~overflowや`拘束され過ぎ＠~CSS2J#blockwidth$になる場合の解決, `text-align$p の初期~値, ~table~colの順序付け） は、［ `始端$／`終端$ ］側に抽象-化されて，適切に適用される。 ◎ Layout rules that depend on the direction property to choose between left and right (e.g. overflow, overconstraint resolution, the initial value for text-align, table column ordering) are abstracted to the start and end sides and applied appropriately.

［ ~text整列, 浮動-法, ~list~markerの位置決め ］など，首に［ `行l~box$やそれに平行なもの ］の［ 左端／右端 ］側を参照する特能 — したがって，上端や下端に相当するものが無いそれら — に対しては，［ `行-左端$／`行-右端$ ］側が［ 左端／右端 ］側への参照として利用される。 ◎ For features such as text alignment, floating, and list marker positioning, that primarily reference the left or right sides of the line box or its longitudinal parallels and therefore have no top or bottom equivalent, the line-left and line-right sides are used as the reference for the left and right sides respectively.

同様に、［ 下線, 上線, 基底線~整列（ `vertical-align$p と命名されてしまっているが） ］など，首に［ `行l~box$やそれに垂直なもの ］の［ 上端／下端 ］側を参照する特能 — したがって，左端や右端に相当するものが無い特能 — に対しては、［ `行-上面$／`行-下面$ ］側が［ 上端／下端 ］側に代わる参照として利用される。 ◎ Likewise for features such as underlining, overlining, and baseline alignment (the unfortunately-named vertical-align), that primarily reference the top or bottom sides of the linebox or its transversal parallels and therefore have no left or right equivalent, the line-over and line-under sides are used as the reference for the top and bottom sides respectively.

これらの対応関係の詳細は、 次~節~以下にて供される。 ◎ The details of these mappings are provided below.

7.2. 次元の対応関係

一部の~propは、 論理的には次の様に挙動する： ◎ Certain properties behave logically as follows:

• `border-spacing$p ~propの［ 1 個目／ 2 個目 ］の値は、［ ~col間／~row間 ］のアキを表現する — ［ 横方向／縦方向 ］になるとは限らない。 `CSS2$r ◎ The first and second values of the border-spacing property represent spacing between columns and rows respectively, not necessarily the horizontal and vertical spacing respectively. [CSS2]
• `line-height$p ~propは、 常に，`塊~size$を指す。 `CSS2$r ◎ The line-height property always refers to the logical height. [CSS2]

縦幅~prop （ `height$p, `min-height$p, `max-height$p ）は、 物理-縦幅を指す。 横幅~prop （ `width$p, `min-width$p, `max-width$p ）は、 物理-横幅を指す。 しかしながら、 【~boxが関与している~layout文脈において】~boxの寸法と位置を計算する際に利用される規則は， 論理的（`行内~size$／`塊~size$）とする。 ◎ The height properties (height, min-height, and max-height) refer to the physical height, and the width properties (width, min-width, and max-width) refer to the physical width. However, the rules used to calculate box dimensions and positions are logical.

例えば、 【横~次元に関する規則として記されている】 `CSS2.1, § 10.3＠~CSS2J#Computing_widths_and_margins$ の計算~規則は，行内~次元の測定に利用される： それらの規則は、 `行内~size$（物理-横幅にも物理-縦幅にもなり得る）, および［ `行内-始端$／`行内-終端$ ］の［ ~margin, ~padding, ~border ］に適用される。 同様に、 【縦~次元に関する規則として記されている】 `CSS2.1, § 10.6＠~CSS2J#Computing_heights_and_margins$ による計算~規則は，塊~次元に対し利用される： それらの規則は、 `塊~size$, および［ `塊-始端$／`塊-終端$ ］の［ ~margin, ~padding, ~border ］に適用される。 `CSS2$r ◎ For example, the calculation rules in CSS2.1 Section 10.3 are used for the inline dimension measurements: they apply to the inline size (which could be either the physical width or physical height) and to the inline-start and inline-end margins, padding, and border. Likewise the calculation rules in CSS2.1 Section 10.6 are used in the block dimension: they apply to the block size and to the block-start and block-end margins, padding, and border. [CSS2]

その~~帰結として、 CSS2.1 においては，常に `包含塊$の横幅を基準に計算されていた［ ~margin／~padding ］~propに対する百分率は、 CSS3 においては，`包含塊$の`行内~size$を基準に計算される。 ◎ As a corollary, percentages on the margin and padding properties, which are always calculated with respect to the containing block width in CSS2.1, are calculated with respect to the inline size of the containing block in CSS3.

7.3. 直交~flow

注記： 仕様策定者は 一般に~feedbackを歓迎するが、 特に，この込み入った節に対する~feedbackに関心がある。 ◎ We appreciate feedback in general, but we are particularly interested in feedback on this particularly complicated section.

~boxと その`包含塊$の `writing-mode$p が相異なるとき、 互いの`書字~mode$は，［ 平行になる場合（例： `vertical-rl$v と `vertical-lr$v ）, 垂直になる場合（例： `horizontal-tb$v と `vertical-rl$v ） ］の 2 つがあり得る。 ◎ When a box has a different writing-mode from its containing block two cases are possible: • The two writing modes are parallel to each other. (For example, vertical-rl and vertical-lr). • The two writing modes are perpendicular to each other. (For example, horizontal-tb and vertical-rl).

~boxと その`包含塊$の`書字~mode$が互いに垂直になる場合、 その~boxは `直交~flow@ （ `orthogonal flow^en ）を確立するという。 ◎ When a box has a writing mode that is perpendicular to its containing block it is said to be in, or establish, an orthogonal flow.

この場合を取扱うため、 ~CSSにおける~layout計算は， 2 つの相 — ~sizing, 位置決め — に分割0される： ◎ To handle this case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow.

1. ~boxの~sizing — すなわち，~boxの横幅と縦幅の計算-法 — においては、 ~boxとその`包含塊$の各~次元が， `直交~flow$を確立している~boxの`書字~mode$に則って［ `行内~size$／`塊~size$ ］に対応付けられた上で、 その計算が遂行される。 ◎ In the sizing phase—calculating the width and height of the box—the dimensions of the box and the containing block are mapped to the inline size and block size and calculations are performed accordingly using the writing mode of the box establishing the orthogonal flow.
2. 当の~flowにおける，~boxの位置決め — すなわち［ ~margin, ~border, ~padding, 位置決め~offset ］の計算-法 — においては、［ ~box, ~boxの包含塊 ］の各~次元が， `直交~flow$を確立している~boxの `包含塊$ の`書字~mode$に則って［ `行内~size$／`塊~size$ ］に対応付けられた上で、 その計算が遂行される。 ◎ In the positioning phase—calculating the positioning offsets, margins, borders, and padding—the dimensions of the box and its containing block are mapped to the inline size and block size and calculations are performed according to the writing mode of the containing block of the box establishing the orthogonal flow.

`margin^p 用の `auto^v 値（自動~margin）は，［ `包含塊$の`書字~mode$に整合するように解決される ］ので、 `直交~flow$を確立している~boxは、 ~sizeされたなら，その包含塊の中で — 他の`塊~levelの~box$と ちょうど同じ様に — 自動~marginを利用して［ 中央寄せにする／整列する ］ことが可能になる。 ◎ Since auto margins are resolved consistent with the containing block’s writing mode, a box establishing an orthogonal flow can, once sized, be aligned or centered within its containing block just like other block-level boxes by using auto margins.

7.4. ~flow相対な方向の対応関係

各種 `~flow相対な方向$は、 ~boxの`包含塊$の`書字~mode$に関して計算され，次に挙げるものに利用される： ◎ Flow-relative directions are calculated with respect to the writing mode of the containing block of the box and used to＼

• 各種~box~prop（~margin, ~border, ~padding）に関係する抽象-~layout規則 ◎ abstract layout rules related to the box properties (margins, borders, padding) and＼
• ~boxの包含塊の中の~boxの位置決めに関係する すべて~prop （ `float$p, `clear$p, `top$p, `bottom$p, `left$p, `right$p, `caption-side$p ） ◎ any properties related to positioning the box within its containing block (float, clear, top, bottom, left, right, caption-side).＼

`行内~levelの~box$に対しては、 `親~box^emの`書字~mode$が代わりに利用される。 （名前に［ `left^p ／ `right^p ／ `top^p ／ `bottom^p ］を含む各種~prop, それらの値 自体は、 依然として，物理的に対応付けられる。 ただし、 `caption-side$p には特別な例外がある： その［ `top^v, `top-outside^v ／ `bottom^v, `bottom-outside^v ］値は、 ~tableの［ `塊-始端$／`塊-終端$ ］側に結付けられる。） ◎ For inline-level boxes, the writing mode of the parent box is used instead. (The left/right/top/bottom-named properties and values themselves are still mapped physically; with a special exception made for caption-side, whose top/top-outside and bottom/bottom-outside values are associated to the block-start and block-end sides of the table, respectively.)

例えば，［ ~boxの行内~寸法が`拘束され過ぎ＠~CSS2J#blockwidth$になる場合に， 拘束から外される~margin ］は、［ `包含塊$の`書字~mode$に従って決定される，終端 ］側の~marginになる。 ◎ For example, the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.

`~marginの相殺~規則＠~CSS2J#collapsing-margins$は、［ 上端／下端 ］~marginを［ `塊-始端$／`塊-終端$ ］~marginに読み替えた上で，正確に適用する。 同様に、［ 上端／下端 ］~padding（~border）も［ `塊-始端$／`塊-終端$ ］~padding（~border）に読み替えた上で，適用する。 したがって、 ~marginの相殺は，常に［ `塊-始端$, `塊-終端$ ］に対し適用されることになる。 ◎ The margin collapsing rules apply exactly with the block-start margin substituted for the top margin and the block-end margin substituted for the bottom margin. Similarly the block-start padding and border are substituted for the top padding and border, and the block-end padding and border substituted for the bottom padding and border. Note this means only block-start and block-end margins ever collapse.

各種 `~flow相対な方向$は、 ~boxの`書字~mode$に関して計算され， ~boxの内容に関する抽象-~layoutに利用される： ◎ Flow-relative directions are calculated with respect to the writing mode of the box and used to abstract layout related to the box’s contents:

• `text-align$p ~propの初期~値は、 `行l~box$の`始端$辺に整列させる。 ◎ The initial value of the text-align property aligns to the start edge of the line box.
• `text-indent$p ~propによる字下げは、 `行l~box$の`始端$辺からになる。 ◎ The text-indent property indents from the start edge of the line box.
• ~tableに対しては、［ 各~colの順序は，~tableの`行内-始端$側から始まる／ 各~rowの順序は，~tableの`塊-始端$側から始まる ］。 ◎ For tables, the ordering of columns begins on the inline-start side of the table, and the ordering of rows begins on the block-start side of the table.

7.5. 行l相対な方向の対応関係

`行l相対な方向$には， `行-上面$, `行-下面$, `行-左端$, `行-右端$ がある。 右向き `horizontal-tb$v `書字~mode$下では 【`左向きでも＠#logical-to-physical$ 】 ，それらは順に［ 上端, 下端, 左端, 右端 ］方向に対応する。 ◎ The line-relative directions are over, under, line-left, and line-right. In an LTR horizontal-tb writing mode, they correspond to the top, bottom, left, and right directions, respectively.

［ `行-右端$／`行-左端$ ］の方向は、 ~boxの`書字~mode$に関して計算され， 次に挙げる~prop用の値［ `left^v, `right^v ］を解釈する際に利用される： ◎ The line-right and line-left directions are calculated with respect to the writing mode of the box and used to interpret the left and right values of the following properties:

• `text-align$p `CSS2$r ◎ the text-align property [CSS2]

［ `行-右端$／`行-左端$ ］の方向は、 ~boxの`包含塊$の`書字~mode$に関して計算され、 次に挙げる~prop用の値［ `left^v, `right^v ］を解釈する際に利用される： ◎ The line-right and line-left directions are calculated with respect to the writing mode of the containing block of the box and used to interpret the left and right values of the following properties:

• `float$p `CSS2$r ◎ the float property [CSS2]
• `clear$p `CSS2$r ◎ the clear property [CSS2]
• `caption-side$p `CSS2$r ◎ the caption-side property [CSS2]

［ `行-上面$／`行-下面$ ］方向は，~boxの`書字~mode$に関して計算され、 次に挙げる~propにおいて， `行l~box$の［ “上端” （行-上面）／ “下端” （行-下面） ］の解釈を定義する際に利用される： ◎ The over and under directions are calculated with respect to the writing mode of the box and used to define the interpretation of the "top" (over) and "bottom" (under) sides of the line box as follows:

• `vertical-align$p ~propに対しては、 `行l~box$の［ “上端” ／ “下端” ］は，その［ `行-上面$辺 ／ `行-下面$辺 ］を指す。 ［ 長さ／百分率 ］に対する正な値は、 基底線を`行-上面$辺へ向けてズラす `CSS2$r ◎ For the vertical-align property, the "top" of the line box is its over edge; the "bottom" of the line box is its under edge. Positive length and percentage values shift the baseline towards the line-over edge. [CSS2]
• `text-decoration$p ~propに対しては、［ 上線／下線 ］は，~textの［ `行-上面$／`行-下面$ ］側に描かれる。 `CSS2$r 注記： `CSS3-TEXT-DECOR$r は、 これをより詳細に定義し，［ 下線／上線 ］の位置に対する追加的な制御を供する。 ◎ For the text-decoration property, the underline is drawn on the under side of the text; the overline is drawn on the over side of the text. [CSS2] Note that the CSS Text Decoration Module defines this in more detail and provides additional controls for controlling the position of underlines and overlines. [CSS3-TEXT-DECOR]

7.6. 純粋に物理的な対応関係

次に挙げる値は、 純粋に物理的に定義され， `書字~mode$の変化に応答しない： ◎ The following values are purely physical in their definitions and do not respond to changes in writing mode:

• `clip$p ~prop用の `rect()$v 記法 `CSS2$r ◎ the rect() notation of the clip property [CSS2]
• 各種 `background-*^p （背景）~prop `CSS2$r `CSS3BG$r ◎ the background properties [CSS2] [CSS3BG]
• 各種 `border-image-*^p （~border画像）~prop `CSS3BG$r ◎ the border-image properties [CSS3BG]
• `box-shadow$p ／ `text-shadow$p ~propにおける各種~offset ◎ the offsets of the box-shadow and text-shadow properties

8.1. 初期~包含塊への伝播

`首要な書字~mode$は、 `初期~包含塊$と表示域にも伝播され，`根~要素$の~layoutや表示域の~scroll方向にも影響する。 ◎ The principal writing mode is propagated to the initial containing block and to the viewport, thereby affecting the layout of the root element and the scrolling direction of the viewport.

8.2. ~page~flow：~page進行~方向

~CSSの`~paged媒体$では、 どの~pageも，見開きの［ 左~page, 右~page ］どちらかに分類される。 `~page進行$（ `CSS3PAGE$r ）は、 左右どちらの~pageが［ ~flowにおける最初になるか ］および［ 既定で最初の~pageになるか ］を決定する。 それは、 `首要な書字~mode$に依存して，次に従う： ◎ In paged media CSS classifies all pages as either left or right pages. The page progression direction (see [CSS3PAGE]), which determines whether the left or right page in a spread is first in the flow and whether the first page is by default a left or right page, depends on the principal writing mode as follows:

注記： 他から上書きされない限り、 文書の最初の~pageは，見開きの後半からになる。 例えば，~page進行が右向きなら，右~pageから。 ◎ Note: Unless otherwise overridden, the first page of a document begins on the second half of a spread, e.g. on the right page in a left-to-right page progression.

9.1. 縦書内横書の字組み： `text-combine-upright^p ~prop

この~propは、［ 複数個の`~typographic文字~単位$が， 1 個の`~typographic文字~単位$と同じ空間を占める ］ような結合nを指定する。 結合された~textが 1em より幅広な場合、 ~UAは，その内容を 1em 内に収めるモノトスル — 下を見よ。 結果の字組みは、 ~layoutや装飾の目的においては，単独の正立~glyphとして扱われる。 この~propの効果は、 `縦組み$に限られる。 ◎ This property specifies the combination of multiple typographic character units into the space of a single typographic character unit. If the combined text is wider than 1em, the UA must fit the contents within 1em, see below. The resulting composition is treated as a single upright glyph for the purposes of layout and decoration. This property only has an effect in vertical writing modes.＼

各種 値の意味は： ◎ Values have the following meanings:

`none@v

特別な処理はない。 ◎ No special processing.

`all@v

【横書きに結合し得るような】どの［ 連続な`~typographic文字~単位$ 並び ］に対しても、［ 縦書きな行l~boxの中で 1 個の`~typographic文字~単位$と同じ空間を占める ］よう，［ `~box$／`~text連なり$ ］の中に横書きに植字するよう試みる。 ◎ Attempt to typeset horizontally all consecutive typographic character units within the box or text run such that they take up the space of a single typographic character unit within the vertical line box.

date span { text-combine-upright: all; }

注記： この仕様の将来の~levelでは、 共通的に影響される並びを自動的に検出する値を導入することになる。 例えば， Level 4 は、 数字の並びを結合する `digits$v 値を導入する。 ◎ Future levels of CSS Writing Modes will introduce values to automatically detect commonly-affected sequences. For example, CSS Writing Modes Level 4 introduces the digits value to combine sequences of digits.

tcy { text-combine-upright: all; }

<tcy>12<span>34</span></tcy>