1. 書字mode — 序論
CSS Writing Modes Level 3 は、世界各国の様々な書字mode — [ 右向( ~Latinや~Indic など), 左向(~Hebrewや~Arabic), 双向的(~Latinと~Arabicの混在), 縦書(~Asian用字系) ] — をサポートするための, CSS 特色機能を定義する。 ◎ CSS Writing Modes Level 3 defines CSS features to support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).
CSS における `書字mode@ は、[ `writing-mode$p, `direction$p, `text-orientation$p ]~propにより決定される。 それは主に,その`行内~基底~方向$と`塊フロー方向$の用語を通して定義される: ◎ A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. It is defined primarily in terms of its inline base direction and block flow direction:
`行内~基底~方向@† とは、その行~上で内容を順序~付けるときの主たる方向であり,行のいずれの側が “始端” / “終端”とされるかを定義する。 `direction$p ~propは、~boxの行内~基底~方向を指定し,[ `unicode-bidi$p ~prop および, テキスト内容に内在する方向性 ]と伴に、行の中の`行内level!の内容の順序~付けを決定する。 ◎ The inline base direction is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are. The direction property specifies the inline base direction of a box and, together with the unicode-bidi property and the inherent directionality of any text content, determines the ordering of inline-level content within a line.
`塊フロー方向@† とは、`塊level~box!が堆積されていく方向であり、また,行~boxが`塊~容器!の中で堆積されていく方向でもある。 `writing-mode$p ~propが塊フロー方向を決定する。 ◎ The block flow direction is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container. The writing-mode property determines the block flow direction.
【† “行内~基底~方向”/“塊フロー方向” は、 日本語組版処理の要件 では, “字詰め方向”/“行送り方向” と呼ばれている。 ( この訳では,これらの語は利用しない — “行内”, “塊” が CSS ~layoutの中心的な語なので。 また、双向的テキストの下では, “字詰め方向” はやや不正確な表現になる。 ) 】
`横組@ とは、一連のテキスト行を横書に~lay-outすることを意味する — すなわち,塊フローは下方または上方を向く。 `縦組@ とは、一連のテキスト行を縦書に~lay-outすることを意味する — すなわち,塊フローは左方または右方を向く。 ◎ A horizontal writing mode is one with horizontal lines of text, i.e. a downward or upward block flow. A vertical writing mode is one with vertical lines of text, i.e. a leftward or rightward block flow.
注記: これらの用語を `縦方向~塊フロー@ (塊フローは下方または上方を向く)や `横方向~塊フロー@ (塊フローは左方または右方を向く) と混同しないように 【名前の “縦”と “横” が逆】。 混乱を避けるため、各種 CSS 仕様では,この後者の用語の利用が避けられている。 ◎ These terms should not be confused with vertical block flow (which is a downward or upward block flow) and horizontal block flow (which is leftward or rightward block flow). To avoid confusion, CSS specifications avoid this latter set of terms.
書字体系は、概して 1 〜 2 種の~native書字modeを備えている。 例えば: ◎ Writing systems typically have one or two native writing modes. Some examples are:
~Latinに基づく体系では、概して、`塊フロー方向$は下方(下向)の下で,行内~方向は右向で記される。 ◎ Latin-based systems are typically written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction.
~Arabicに基づく体系では、概して、`塊フロー方向$は下方(下向)の下で,行内~方向は左向で記される。 ◎ Arabic-based systems are typically written using a right-to-left inline direction with a downward (top-to-bottom) block flow direction.
~Mongolianに基づく体系では、概して、`塊フロー方向$は右方(右向)の下で,行内~方向は下向で記される。 ◎ Mongolian-based systems are typically written using a top-to-bottom inline direction with a rightward (left-to-right) block flow direction.
漢字に基づく体系では、一般に: `塊フロー方向$は下方(下向)の下で,行内~方向が右向で記されることもあれば、 `塊フロー方向$は左方(左向)の下で,行内~方向が下向で記されることもある。 多くの新聞雑誌では、同じ頁の中で,これら 2 種類の書字modeが混在される。 ◎ Han-based systems are commonly written using a left-to-right inline direction with a downward (top-to-bottom) block flow direction, or a top-to-bottom inline direction with a leftward (right-to-left) block flow direction. Many magazines and newspapers will mix these two writing modes on the same page.
`書字mode$の `text-orientation$p 成分は、`行~方位$を決定し, グリフ方位 などの,テキスト~layoutの詳細を制御する。 ◎ The text-orientation component of the writing mode determines the line orientation, and controls details of text layout such as the glyph orientation.
注記: 書字modeと縦書テキストについてのより深い序論については、 Unicode Technical Note #22 `UTN22$r( HTML 版 )を参照。 ◎ See Unicode Technical Note #22 [UTN22] (HTML version) for a more in-depth introduction to writing modes and vertical text.
1.1. モジュール間の相互作用
このモジュールは、 `CSS21$r 8.6, 9.10 節にて定義されている特色機能 `unicode-bidi$p, `direction$p を置き換え,それらを拡張する。 ◎ This module replaces and extends the unicode-bidi and direction features defined in [CSS21] sections 8.6 and 9.10.
1.2. 値
【 この節の内容は CSS 日本語訳 共通ページ に委譲 】
2. 行内~方向と双方向性
大多数の用字系では,文字は左から右へ記されるが、右から左へ記される用字系もある。 一部の文書、特に,~Arabicや~Hebrewの用字系で記されるものにおいて,複数の言語が混在する文脈では、(視覚的な表示において)単独の塊の中で,複数の方向性が混在されてテキストが現れ得る。 この現象は `双方向性@ ( bidirectionality, あるいは略して “bidi” †)と呼ばれる。 ◎ While the characters in most scripts are written from left to right, certain scripts are written from right to left. In some documents, in particular those written with the Arabic or Hebrew script, and in some mixed-language contexts, text in a single (visually displayed) block may appear with mixed directionality. This phenomenon is called bidirectionality, or "bidi" for short.
【† この訳では、この略語に対応して, “双向性”, あるいは熟語を構成するときは “双向〜” と略記する。 】
Unicode 標準( Unicode Standard Annex #9 )は、双向的テキストにおける適正な順序~付けを決定するための複雑な~algoを定義している。 その~algoは、文字に備わる各種~propに基づく暗黙的な部分と, 埋込と上書のための明示的な制御からなる。 CSS は、双向的に適正な描画を得るために,この~algoに依拠する。 ◎ The Unicode standard (Unicode Standard Annex #9) defines a complex algorithm for determining the proper ordering of bidirectional text. The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS relies on this algorithm to achieve proper bidirectional rendering.
双向的テキストをサポートする~UAは、塊~境界や[ “bidi type B” 【段落区切りを意味する字種】 `強制段落改行@ ]により中断されないような,各[ `行内level~box!の並び ]ごとに、 Unicode 双向algoを適用し~MUST。 この並びは、双向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.
2 つの CSS ~prop `direction$p, `unicode-bidi$p は、埋込, 隔離を明示的に提供し,前述の制御を CSS 層において上書する。 テキストの基底~方向性は,文書の構造と意味論に依存するので、ほとんどの場合, `direction$p, `unicode-bidi$p ~propは,[ マークアップ内の双向性~情報を,対応する CSS スタイルに写像する ]用途に限って,利用されるべきである。 文書~言語が,双向性を制御するマークアップ特色機能を提供する場合、作者と利用者は,それらの特色機能を利用するべきであり,それらを上書するような CSS 規則を指定するべきではない。 ◎ Two CSS properties, direction and unicode-bidi, provide explicit embedding, isolation, and override controls in the CSS layer. Because the base directionality of a text depends on the structure and semantics of the document, the direction and unicode-bidi properties should in most cases be used only to map bidi information in the markup to its corresponding CSS styles. If a document language provides markup features to control bidi, authors and users should use those features instead and not specify CSS rules to override them.
CSS においては、段落~埋込レベルは,( UAX9 clause HL1 に倣って)段落の`包含塊!の `direction$p ~propに従って設定され~MUST — Unicode ~algoの P2, P3 段 `UAX9$r に与えられる経験則ではなく。 但し,一つだけ例外があり、その包含塊の `unicode-bidi$p の算出値が `plaintext$v の場合、その Unicode 経験則が, HL1 による上書~抜きに利用される。 ◎ In CSS, the paragraph embedding level must be set (following UAX9 clause HL1) according to the direction property of the paragraph’s containing block rather than by the heuristic given in steps P2 and P3 of the Unicode algorithm. There is, however, one exception: when the computed unicode-bidi of the paragraph’s containing block is plaintext, the Unicode heuristics in P2 and P3 are used as described in [UAX9], without the HL1 override.
HTML 要素に対しては、 HTML 仕様( `HTML401$r 8.2 節, `HTML5$r 10.3.5 節)が,双方向性のふるまいを定義する。 ◎ The HTML specifications ([HTML401], section 8.2, and [HTML5], section 10.3.5) define bidirectionality behavior for HTML elements.
注記: HTML ~UAにおける CSS スタイル付け機能は,オフにされることもあるので、 HTML 作者には、スタイルシート不在の下でも正しい双向的~layoutを確保されるよう, HTML `dir^c 属性と `bdo^e 要素を利用することを勧める。 ◎ Because HTML UAs can turn off CSS styling, we advise HTML authors to use the HTML dir attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet.
2.1. 方向性の指定: `direction^p ~prop
`●名^ `direction@p `●値^ `ltr$v | `rtl$v `●初^ `ltr$v `●適^ すべての要素 `●継^ される `●百^ 利用不可 `●媒^ visual `●算^ 指定値 `●ア^ 不可 `●順^ n/a `●表終^この~propは、~boxにより確立された双向[ 段落, 埋込, 隔離, 上書 ]における[ `行内~基底~方向$, あるいは方向性 ]を指定する( `unicode-bidi$p 参照)。 加えて,それは[[ table ~col~layoutの順序~付け ], [ 横書~overflowの方向 ], [ 行の中での 既定のテキスト整列 ], [ ~boxの`行内~基底~方向$に依存する 他の~layout効果 ]]に効果を及ぼす。 ◎ This property specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. (See unicode-bidi.) In addition, it informs the ordering of table column layout, the direction of horizontal overflow, and the default alignment of text within a line, and other layout effects that depend on the box’s inline base direction.
この~propに対する各種~値の意味は,次で与えられる: ◎ Values for this property have the following meanings:
- `ltr@v
方向性は右向。 ◎ Left-to-right directionality.
- `rtl@v
方向性は左向。 ◎ Right-to-left directionality.
【 `縦組$の下で,これらの値が表す物理~方向は、 抽象~方向と物理~方向の対応関係 節に見られる。 】
注記: `direction$p ~propは、[ `unicode-bidi$p ~propの値が `normal$v にされた`行内~box! ]に指定されても,双向性による並替には効果を持たない。 ~boxは、双向algoにおいて,追加の埋込レベルを開かないので。 ◎ The direction property has no effect on bidi reordering when specified on inline boxes whose unicode-bidi property’s value is normal, because the box does not open an additional level of embedding with respect to the bidirectional algorithm.
根~要素~上の `direction$p ~propの値は,`初期~包含塊!にも伝播され、 `writing-mode$p ~propと伴に,文書の`原則的~書字mode$を決定する。 ◎ The value of the direction property on the root element is also propagated to the initial containing block and, together with the writing-mode property, determines the document’s principal writing mode. (See below.)
注記: HTML `body^e 要素の `direction$p ~propは、表示域へは伝播されない。 その種の特別なふるまいは、 `background^p, `overflow^p ~propにのみ適用される。 ◎ Note that the direction property of the HTML BODY element is not propagated to the viewport. That special behavior only applies to the background and overflow properties.
注記:
~table~col~boxに指定される `direction$p ~propは、その~col下の~cellには継承されない。
~colは、文書~木における~cellの先祖ではないので。
したがって、 CSS の下では,[
`HTML401$r 11.3.2.1 節による dir
属性の継承規則
]は,容易に得られない。
◎
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
`●名^ `unicode-bidi@p `●値^ `normal$v | `embed$v | `isolate$v | `bidi-override$v | `isolate-override$v | `plaintext$v `●初^ `normal$v `●適^ すべての要素。 但し、注釈を見よ。 ◎ all elements, but see prose `●継^ されない `●百^ 利用不可 `●媒^ visual `●算^ 指定値 `●ア^ 不可 `●表終^通常(すなわち, `unicode-bidi$p が `normal$v のとき)、`行内~box!は, Unicode 双向algoに対し透過的になる。 すなわち、内容は,~boxの境界が存在しないかの様に順序~付けられる。 `unicode-bidi$p ~propに対する他の値は、その~algoにおける~scopeを`行内~box!に作成し,テキストの内在的~方向性を上書させる。 ◎ 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.
`unicode-bidi$p による~boxの 内/外 における効果は、次の表(参考)に要約される: ◎ The following informative table summarizes the box-internal and box-external effects of unicode-bidi:
外側に対する~boxのふるまい | |||
---|---|---|---|
`~strong文字$† | `~neutral文字$ | ||
~boxの内側における内容の順序~付け | 新たな~scope | `embed$v | `isolate$v |
上書 | `bidi-override$v | `isolate-override$v | |
~plaintext | — | `plaintext$v |
この表の読み方は:
表の中で~prop値が示されている欄の[ 上/左 ]に示される見出しが、その~prop値により指定される,~boxの[ 外側に対する/内側における ]双向性のふるまいを表す。
外側に対するふるまいは、~boxの境界が 見出しに示された文字であったかのように,周囲の内容に対しふるまうことを意味する。
内側におけるふるまいは、見出しに応じて 次であるかのように,~box内の内容が順序~付けられることを意味する:
新たな~scope ~boxの境界が`~strong文字$†である 上書 ~boxのテキストは,`~strong文字$†のみからなっている ~plaintext ~boxが,[ UAX9 経験則 ]を利用して順序~付けられるような,自立的 段落である
† ここでの “`~strong文字$” は、方向性に[ ~boxに指定された `direction$p ]を備えているものとする。
【 `~strong文字@ とは、その文字~自身にある方向性が備わっていることを意味する(例えば、~Hebrew専用の文字には概ね,左向の方向性が備わることになるであろう)。 対して, `~neutral文字@ とは、方向性に関して字義~通り中立であることを意味する(空白類や段落改行~文字など)。 その他、 “weak” に~~分類される文字もある — 詳細は `UAX9$r などの各種 Unicode 仕様に。 】
Outside | |||
---|---|---|---|
strong | neutral | ||
Inside | scoped | embed | isolate |
override | bidi-override | isolate-override | |
plaintext | — | plaintext |
この~propに対する各種~値の意味は,次で与えられる: ◎ Values for this property have the following (normative) meanings:
- `normal@v
~boxは、双向algoにおいて,追加の埋込レベルを開かない。 `行内~box!に対しては、~box境界を越えて,暗黙的な並替が働く。 ◎ 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が`行内!である場合、この値は、双向algoにおいて,追加の埋込レベルを開く `方向上~埋込@ を作成する。 この埋込レベルの方向は,~boxの `direction$p ~propにより与えられる。 ~boxの内側では、暗黙的に並替が~~行われる。 ◎ 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.
これは、 `HL3! `UAX9$r において,`行内~box!の始端には `direction$p 値が[ `ltr$v ならば LRE (U+2066) / `rtl$v ならば RLE (U+2067) ]を,終端には PDF (U+202C) を挿入することに相当する。 ◎ Following clause HL3 [UAX9], this corresponds to inserting a LRE (U+202A), for direction: ltr, or RLE (U+202B), for direction: rtl, at the start of the inline box and a PDF (U+202C) at the end of the box.
注記: この値は、`行内!でない~box上では効果を持たない。 ◎ This value has no effect on boxes that are not inline.
- `isolate@v
この値は、`行内~box!において,その内容を `双向隔離@ させる。 すなわち、それぞれの[[[ 塊~境界や`強制段落改行$ ]により中断されないような,`行内level~box! ]からなる並び ]が, `隔離列@ として扱われることを除いて、`方向上~埋込$と同様になる(それに従い,埋込レベルを増やす): ◎ 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.
それを包含している双向段落における双向性~解決の目的においては、この隔離列は,単独の Object Replacement Character (U+FFFC) であったかのように扱われる。 ◎ 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内の`強制段落改行$は、依然として,それを包含している段落の中で,改行を作成する。 ◎ 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.
これは、 `HL3! `UAX9$r において,`行内~box!の始端には `direction$p 値が[ `ltr$v ならば LRI (U+2066) / `rtl$v ならば RLI (U+2067) ]を, 終端には PDI (U+2069) を挿入することに相当する。 `UAX9$r ◎ Following clause HL3 [UAX9], this corresponds to inserting an LRI (U+2066), for direction: ltr, or RLI (U+2067), for direction: rtl, at the start of the inline box, and a PDI (U+2069) at the end of the box. [UAX9]
注記: この値は、`行内!でない~box上には効果を持たない。 ◎ This value has no effect on boxes that are not inline.
- `bidi-override@v
この値は、~boxに直に含まれる行内~内容を `方向上~上書@ の下に置く。 `行内!に対しては、これは,~boxが[[ その中の並替が `direction$p ~propに従って厳密に in sequence になり, 双向algoの暗黙的な部分は無視される ]ことを除いて,[ 双向algoにおいて`方向上~埋込$の様にふるまう ]ことを意味する。 `塊~容器!に対しては、この上書は,[ そのすべての内容を囲む匿名~行内~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.
これは、 `HL3! `UAX9$r において,`行内~box!の始端には `direction$p 値が[ `ltr$v ならば LRO (U+202D) / `rtl$v ならば RLO (U+202E) ]を, 終端には PDF (U+202C) を挿入することに相当する。 ◎ Following clause HL3 [UAX9], this corresponds to inserting an LRO (U+202D), for direction: ltr, or RLO (U+202E), for direction: rtl, at the start of the inline box and a PDF (U+202C) at the end of the box. [UAX9]
- `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.
`行内~box!に対しては、これは、 `HL3! `UAX9$r において,~boxの始端には `direction$p 値が[ `ltr$v ならば[ FSI (U+2068), LRO (U+202D) ]の並び / `rtl$v ならば RLO (U+202E) ]を, 終端には[ PDF (U+202C), PDI (U+2069) ]の並びを挿入することに相当する。 他の~boxに対しては、この値は `bidi-override$v と正確に等価になる。 ◎ Following clause HL3 [UAX9], for inline boxes this corresponds to inserting an FSI (U+2068) followed by an LRO (U+202D), for direction: ltr, or RLO (U+202E), for direction: rtl at the start of the box, and a PDF (U+202C) followed by PDI (U+2069) at the end of the box. [UAX9] For other boxes, this value is exactly equivalent to bidi-override.
- `plaintext@v
この値は、 Unicode 双向algoの目的においては,~boxの各[ `双向段落$(`塊~容器!の場合) / `隔離列$(`行内~box!) ]の基底~方向性が,(~boxの `direction$p ~propを利用してではなく)[ Unicode 双向algoの規則 P2, P3 による経験則 ]に従って決定されることを除いて, `isolate$v としてふるまう。 ◎ 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).
`行内~box!に対しては、これは、 `HL3! `UAX9$r において,~boxの始端に FSI (U+2068) を, 終端に PDI (U+2069) を挿入することに相当する。 ◎ Following cause HL3 [UAX9], for inline boxes this corresponds to inserting an FSI (U+2068) at the start of the box, and a PDI (U+2069) at the end of the box. [UAX9]
注記: `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.
各 `双向段落$に含まれる文字たちの最終的な順序は、[ 上述のように双向性~制御コードが追加され, マークアップが剥ぎ取られた ]結果の文字~並びが,[[ スタイル付けられたテキストに対するときと同じ改行 ]を生成した[ 素textのための Unicode 双向algo ]の実装 ]に渡されたときと同じになる。 ◎ The final order of characters within each bidi paragraph is the same as if the bidi control codes had been added as described above, markup had been stripped, and the resulting character sequence had been passed to an implementation of the Unicode bidirectional algorithm for plain text that produced the same line-breaks as the styled text.
この処理過程においては、 `display!p:inline にされている置換~要素は, (1) [ それらの `unicode-bidi$p ~propが `embed$v や `bidi-override$v である ]ならば、要素に対し指定された `direction$p に属する`~strong文字$として扱われ, (2) 他の場合、`~neutral文字$として扱われる。 他のすべての[ 不可分な`行内level~box! ]は、常に,`~neutral文字$として扱われる。 ◎ In this process, replaced elements with display: inline are treated as neutral characters, unless their unicode-bidi property is either embed or bidi-override, in which case they are treated as strong characters in the direction specified for the element. All other atomic inline-level boxes are treated as neutral characters always.
`行内~box!が `双向段落$境界の周辺で分断された場合(例えば,`塊!や`強制段落改行$で切り分けられた場合)、[ その~boxの 終端/始端 にあてがわれた `HL3! 双向性~制御コードは,その中断点の 直前/直後 の所にも追加される。 (言い換えれば,その~boxにより開始された どの[ 埋込レベル, 隔離, 上書 ]も、段落改行の直前で閉じられ,その直後の, 反対側で再び開かれる。) ◎ If an inline box is broken around a bidi paragraph boundary (e.g. if split by a block or forced paragraph break), then the HL3 bidi control codes assigned to the end of the box are also added before the interruption and the codes assigned to the start of the box are also added after it. (In other words, any embedding levels, isolates, or overrides started by the box are closed at the paragraph break and reopened on the other side of it.)
例えば、
<BR/>
が`強制段落改行$になる所では,次の2つにおける 双向性による順序~付けは、
行内~要素 `i1^e, `i2^e 上の `unicode-bidi$p のすべての値に対し,同一になる:
◎
For example, where <BR/> is a forced paragraph break the bidi ordering is identical between
<para>...<i1><i2>...<BR/>...</i2></i1>...</para>
◎and
<para>...<i1><i2>...</i2></i1><BR/><i1><i2>...</i2></i1>...</para>
。 ◎ for all values of unicode-bidi on inline elements <i1> and <i2>.
注記: Unicode ~algoは,埋込レベルを 125 階までに制限しているので、適切な場合を除き, `unicode-bidi$p に対しては `normal$v 以外の値を利用しないように配慮するべきである。 特に、値 `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 use unicode-bidi with a value other than normal unless appropriate. In particular, a value of inherit should be used with extreme caution. 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. 双向的テキストの例
双向的テキストを伴う XML 文書の例を以下に示す。 それは、重要な設計~原則を説明する: 文書~言語の設計者は、[ 言語の適正な構成子(要素と属性)と, 付随するスタイルシート ]の両者について,双向性を考慮に入れるべきである。 スタイルシートは、双向性~規則が他のスタイル規則から分離されるように,設計されるべきであり、その種の規則を,他のスタイルシートから上書されないようにして,文書~言語による双向性のふるまいを保たせるべきである。 ◎ 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.
この例の 小文字/大文字 は,それぞれ 右向/左向 の用字系に属する文字を表現しているとする。 下のテキスト~ストリームは、記憶域における論理的な順序による: ◎ In this example, lowercase letters stand for inherently left-to-right characters and uppercase letters represent inherently right-to-left characters. The text stream is shown below in logical backing store order.
<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>
これは,任意の XML なので、スタイルシートが,書字~方向の設定ingを担当する。 スタイルシートを次に示す: ◎ Since this is arbitrary XML, the style sheet is responsible for setting the writing direction. This is the style sheet:
/* 双向性のための規則◎Rules for bidi */ [dir=ltr] {direction: rtl; unicode-bidi: isolate; } [dir=rtl] {direction: ltr; unicode-bidi: isolate; } /* 呈示のための規則◎Rules for presentation */ section, para {display: block;} emphasis {color: red;} quote {font-style: italic;}
行が折り返されずに収まれば、このテキストの整形~結果は次の様になるであろう: ◎ If the line length is long, the formatting of this text might look like this:
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH
1 番目/ 2 番目 の `section^e 要素は、それぞれ,基底~方向が 左向/右向 にされた`塊!である。 各 `para^e は、親から基底~方向を継承する塊になる。 従って、最初の 2 個の `para^e は 上右端から読まれ,後続の 3 個は上左端から読まれる。 ◎ The first <section> element is a block with a right-to-left base direction, the second <section> element is a block with a left-to-right base direction. The <para>s are blocks that inherit the base direction from their parents. Thus, the first two <para>s are read starting at the top right, the final three are read starting at the top left.
`emphasis^e 要素は、`行内level!であり,その `unicode-bidi$p に対する値は `normal$v (初期値)なので、テキストの順序~付けには効果を持たない。 ◎ The <emphasis> element is inline-level, and since its value for unicode-bidi is normal (the initial value), it has no effect on the ordering of the text.
一方で, `quote^e 要素は、与えられた内部的 方向性を伴う`隔離列$を作成する。 これにより、 HEBREW18 が english19 の右に位置されることに注意。 ◎ The <quote> element, on the other hand, creates an isolated sequence with the given internal directionality. Note that this causes HEBREW18 to be to the right of english19.
改行が必要な場合、次の類いの見かけになるであろう: ◎ If lines have to be broken, the same text might format like this:
2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19
HEBREW18 は、 english19 より前に読まれなければならないので, english19 より上の行に~~位置することに注目。 ◎ Notice that because HEBREW18 must be read before english19, it is on the line above english19. Just breaking the long line from the earlier formatting would not have worked.
長い行に対し,単に先に示した整形~結果に改行を加える方法では、上手くいかなくなる。 english19 の最初の音節は,その前の行にも収まり得たが、[ 左向 文脈における右向 単語へのハイフン挿入, あるいは その逆 ]は、通例,行の途中にハイフンが表示されないように,禁則される。 ◎ Note also that the first syllable from english19 might have fit on the previous line, but hyphenation of left-to-right words in a right-to-left context, and vice versa, is usually suppressed to avoid having to display a hyphen in the middle of a line.
2.4. 双向的 文脈の下での,行内~boxのための~boxモデル
双向性による並替は、論理的に連続するテキストを ばらばらに切り分けて並替し得るので、双向的テキストにおいては,行の中で`行内~box!が切り分けられて並替され得る。 ◎ Since bidi reordering can split apart and reorder text that is logically contiguous, bidirectional text can cause an inline box to be split and reordered within a line.
注記: `行内~box!を一様な方向(全体を 右向/左向 のいずれか一方向)にフローさせられるようにするためには、匿名~行内~boxを作成する必要が生じ得る。 ◎ Note that in order to be able to flow inline boxes in a uniform direction (either entirely left-to-right or entirely right-to-left), anonymous inline boxes may have to be created.
~UAは、各 行~boxに対し,その中に現れる[ `行内~box!の各~断片 ]を取り出して,それらの[ ~margin, ~border, ~padding ]を(論理~順序でなく,)視覚的~順序で描画し~MUST。 【与えられた(複数~行にまたがり得る)行内~boxに対し(以下、単に “~box” )、】 ~boxが現れる最初の行~box上の最も`始端$側の断片が,【その~boxの】`始端$辺の[ ~margin, ~border, ~padding ]を持ち、 ~boxが現れる最後の行~box上の最も`終端$側の断片が,`終端$辺の[ ~margin, ~border, ~padding ]を持つ。 例えば、 `horizontal-tb$v 書字modeでは: ◎ For each line box, UAs must take the fragments of each inline box and render the margins, borders and padding in visual order (not logical order). The start-most fragment on the first line box in which the box appears has the start edge’s margin, border, and padding; and the end-most fragment on the last line box in which the box appears has the end edge’s margin, border, and padding. For example, in the horizontal-tb writing mode:
親の `direction$p ~propが `ltr$v のときは、 ~boxが現れる最初の行~box上の最も左の~box断片が,左端[ ~margin, ~border, ~padding ]を持ち、 ~boxが現れる最後の行~box上の最も右の~box断片が,右端[ ~margin, ~border, ~padding ]を持つ。 ◎ When the parent’s direction property is ltr, the left-most box fragment on the first line box in which the box appears has the left margin, left border and left padding, and the right-most box fragment on the last line box in which the box appears has the right padding, right border and right margin.
親の `direction$p ~prop が `rtl$v のときは、 ~boxが現れる最初の行~box上の最も右の断片が,右端[ ~margin, ~border, ~padding ]を持ち, ~boxが現れる最後の行~box上の最も左の断片が,左端[ ~margin, ~border, ~padding ]を持つ。 ◎ When the parent’s direction property is rtl, the right-most fragment of the first line box in which the box appears has the right padding, right border and right margin, and the left-most fragment of the last line box in which the box appears has the left margin, left border and left padding.
`縦組$に対しても相似的な規則が維持される。 ◎ Analogous rules hold for vertical writing modes.
注記: `box-decoration-break!p ~propは、各~断片の両側に~box装飾を描くために,このふるまいを上書し得る。 `CSS3-BREAK$r ◎ The box-decoration-break property can override this behavior to draw box decorations on both sides of each fragment. [CSS3-BREAK]
3. 縦書テキスト — 序論
この節は非規定である。 ◎ This subsection is non-normative.
CSS 2.1 による双向的テキストのためのサポートの拡張に加えて、このモジュールは, CSS における縦書テキスト~layoutをサポートするために必要な,いくつかの規則と~propを導入する。 ◎ In addition to extensions to CSS2.1’s support for bidirectional text, this module introduces the rules and properties needed to support vertical text layout in CSS.
主に横書に~lay-outされる~Latin用字系を利用する言語と異なり、韓国語や日本語のような~Asian言語は,縦書にも~lay-outされ得る。 同じテキストが横書と縦書に~lay-outされる日本語の例を下に示す。 横書の場合、テキストは左端から右端へ, 上端から下端へ,読まれる。 縦書の場合、テキストは上端から下端へ, 右端から左端へ,読まれる。 右向 横書における左端~辺からの字下は、 下向 縦書においては 上端~辺からの字下に転化される。 ◎ 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.
注記: 韓国語と日本語においては、各~行は,右端から左端へ, あるいは上端から下端へ 順序~付けられる一方、~Mongolianと満州語では、各~行は,左端から右端へ順序~付けられる。 ◎ 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のみならず,植字にも影響し得る。 例えば、~spacing~boxの中での約物の位置が 横書~caseから縦書~caseに変化したり,あるいは 代替グリフが利用される場合もある。 ◎ 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用字系その他の用字系のテキスト ]も含む縦書テキストは、テキストをいくつかの仕方で表示し得る。 例えば、~Latin単語を側転させたり,各 字を正立に方位させ得る: ◎ 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 桁 数字など,一部の特別な場合には、テキストは,単独の縦書~文字~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:
縦書テキスト~layoutは,双向的テキスト~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.1. 塊フロー方向: `writing-mode^p ~prop
`●名^ `writing-mode@p `●値^ `horizontal-tb$v | `vertical-rl$v | `vertical-lr$v `●初^ `horizontal-tb$v `●適^ すべての要素 — 但し,~tableの[ ~row~group, ~col~group, ~row, ~col ]を除く。 ◎ All elements except table row groups, table column groups, table rows, and table columns `●継^ される `●百^ 利用不可 `●媒^ visual `●算^ 指定値 `●ア^ 不可 `●順^ n/a `●表終^この~propは、一連のテキスト行を 横書/縦書 のいずれに~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
`塊フロー方向$は下向,`書字mode$は横書になる。 ◎ Top-to-bottom block flow direction. The writing mode is horizontal.
- `vertical-rl@v
`塊フロー方向$は左向,`書字mode$は縦書になる。 ◎ Right-to-left block flow direction. The writing mode is vertical.
- `vertical-lr@v
`塊フロー方向$は右向,`書字mode$は縦書になる。 ◎ Left-to-right block flow direction. The writing mode is vertical.
`writing-mode$p ~propは、`塊フロー方向$ — 行~boxが堆積されていく方向 — を指定する。 それは、一連の[[ 塊~整形~文脈における`塊level~box! ]/[ `行内!を包含する`塊~容器!における 行~box ]/[ ~table内の~row ]], 等々の進行~方向を決定する。 したがって、この~propは,行~boxの方位が(したがって`書字mode$についても)横書か縦書のいずれになるかも 決定することになる。 しかる後、 `text-orientation$p ~propが,行~boxの中でテキストが~lay-outされる方法を決定する。 ◎ The writing-mode property specifies the block flow direction, which determines the progression of block-level boxes in a block formatting context; the progression of line boxes in a block container that contains inlines; the progression 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@ は、根~要素~上に指定された `writing-mode$p と `direction$p の値から決定される。 この書字modeは、例えば,既定の頁~進行~方向を決定するためにも利用される( `CSS3PAGE$r を見よ)。 `direction$p と同様、根~要素の `writing-mode$p 値も `初期~包含塊!に伝播され,初期~塊~整形~文脈の`塊フロー方向$を設定する。 ◎ The principal writing mode of the document is determined by the writing-mode and direction values specified on the root element. This writing mode is used, for example, to determine the default page progression direction. (See [CSS3PAGE].) Like direction, the writing-mode value of the root element is also propagated to the initial containing block and sets the block flow direction of the initial block formatting context.
注記: HTML `body^e 要素の `writing-mode$p ~propが、表示域へ伝播することはない。 その種の特別なふるまいは、 `background^p, `overflow^p ~propに限られている。 ◎ Note that the writing-mode property of the HTML BODY element is not propagated to the viewport. That special behavior only applies to the background and overflow properties.
~boxがその`包含塊!と異なる`塊フロー方向$を持つ場合: ◎ If a box has a different block flow direction than its containing block:
~box上の `display!p に `inline^v が指定されている場合、その算出値は `inline-block^v になる。 `CSS21$r ◎ If the box has a specified display of inline, its display computes to inline-block. [CSS21]
~box上の `display!p に `run-in^v が指定されている場合、その算出値は `block^v になる。 `CSS21$r ◎ If the box has a specified display of run-in, its display computes to block. [CSS21]
~boxが`塊~容器!である場合、それは,新たな塊~整形~文脈を確立する。 ◎ If the box is a block container, then it establishes a new block formatting context.
置換~要素の内容は、`書字mode$に~~影響されて回転されることはない: 例えば画像は、正立のままになる。 しかしながら、テキストが伴われた置換~内容( MathML による内容やフォーム要素など)は、~UAがその置換~内容に対し,その種の`縦組$をサポートするならば、置換~要素の`書字mode$と行~方位に合致するべきである。 ◎ The content of replaced elements do not rotate due to the writing mode: images, for example, remain upright. However 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.
種々のフロー 書字modeで呈示される, 画像 ❷ により分離された 2 個の塊~要素(❶ と ❸) を,次の例に示す: ◎ In the following example, two block elements (1 and 3) separated by an image (2) are presented in various flow writing modes.
次の例の中の一部のフォーム~コントロールは、`塊!の内側で `vertical-rl$v 書字modeにより描画される。 フォーム~コントロールは、その書字modeに合致するように描画される。 ◎ In the following example, some form controls are rendered inside a block with vertical-rl writing mode. The form controls are rendered to match the writing mode.
<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>
この例では、 `writing-mode$p は `::marker^css 疑似要素を利用して,リストマーカを正立にする。 縦方向の整列( `vertical-align^p )は、数が長くなったときでも,依然として テキストの最初の行の右端に整列させる。 `CSS3LIST$r ◎ In this example, writing-mode sets the list markers upright using the ::marker pseudo-element. Vertical alignment ensures that longer numbers will still align with the right of the first line of text. [CSS3LIST]
::marker { writing-mode: horizontal-tb; vertical-align: text-top; color: blue; }
3.1.1. SVG 1.1 による `writing-mode^p 値
SVG 1.1 `SVG11$r は、いくつかの追加の値:[ `lr^v, `lr-tb^v, `rl^v, `rl-tb^v, `tb^v, `tb-rl^v ]を定義している。 ◎ SVG1.1 [SVG11] defines some additional values: lr, lr-tb, rl, rl-tb, tb, and tb-rl.
これらの値は、 SVG 1.x 文書を除くどの文脈~下においても 廃止予定 にある。 CSS の文脈~下で,これらの値のサポートを望む実装は、それらを以下のように扱わ~MUST: ◎ These values are deprecated in any context except SVG1 documents. Implementations that wish to support these values in the context of CSS must treat them as follows:
SVG 1.x/廃止◎SVG1/Obsolete | CSS |
---|---|
`lr^v | `horizontal-tb$v |
`lr-tb^v | 同上 |
`rl^v | 同上 |
`tb^v | `vertical-rl$v |
`tb-rl^v | 同上 |
注記: SVG 1.1 によるこれらの値は,過去の CSS `writing-mode^p 仕様の改訂版にも存在したが、それらは,この仕様により廃止された。 その改訂版に追加された `tb-lr^v 値は, `vertical-lr$v に置き換えられた。 ◎ The SVG1.1 values were also present in an older revision of the CSS writing-mode specification, which is obsoleted by this specification. The additional tb-lr value of that revision is replaced by vertical-lr.
SVG1.1 においては、これらの値は `行内~進行~方向@ — 言い換えれば,グリフが追加される度に現在のテキスト位置が送られる(~advanceする)方向 — を設定する。 これは,双向性による並替の 後に 起こる幾何的な処理なので、( `writing-mode$p とは独立な) `direction$p ~propの解釈には効果を持たない( 双方向性との関係 `SVG11$r を見よ)。 ◎ In SVG1.1, these values set the inline progression direction, in other words, the direction the current text position advances each time a glyph is added. This is a geometric process that happens after bidi reordering, and thus has no effect on the interpretation of the direction property (which is independent of writing-mode). (See Relationship with bidirectionality. [SVG11])
注記: `writing-mode^p が `rl^v の下で,この処理が テキスト文字列を単に~shiftさせるか, テキスト内のすべてのグリフを逆順にするか のいずれになるか,解釈が割れる。 ◎ There are varying interpretations on whether this process causes "writing-mode: rl" to merely shift the text string or reverse the order of all glyphs in the text.
4. 行内levelの整列
同じ行に,異なる種類の `行内level!の内容が一緒に置かれるとき、 内容の一連の基底線と `vertical-align!p ~propの設定群が,それらの内容が 行~boxを横断する方向に整列される方法を制御する。 この節では、[ 基底線とは何か, 基底線を見出す方法, [ `行内level!の内容の整列を決定するために,基底線が `vertical-align!p ~propと併用される方法 ]]について,論じる。 ◎ When different kinds of inline-level content are placed together on a line, the baselines of the content and the settings of the vertical-align property control how they are aligned in the transverse direction of the line box. This section discusses what baselines are, how to find them, and how they are used together with the vertical-align property to determine the alignment of inline-level content.
4.1. 基底線 — 序論
この節は非規定である。 ◎ This section is non-normative.
`基底線@ とは、[ テキストの個々のグリフが,それに沿って整列される ]ような,行~boxの`行内軸$に沿う線である。 基底線は、フォントの中でグリフをデザインする際の,基準線になる(例えば,~alphabeticグリフのほとんどは、概して,その下端が~alphabetic基底線に整列される)。 また,基底線は、植字において 異なるフォントやフォント~sizeに属するグリフを整列するときの,基準線になる。 ◎ 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.
基底線テーブルは、書字体系により異なるものが選好される。 ◎ Different writing systems prefer different baseline tables.
きちんと構成されたフォントは `基底線テーブル@ を包含する。 それは、フォントのデザイン座標~空間の中で 1 本以上の基底線の位置を指示する。 (デザイン座標~空間はフォント~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.)
基底線テーブルは,フォントの~propであり、種々の基底線の位置は,フォントの中のすべてのグリフに適用される。 ◎ The baseline table is a property of the font, and the positions of the various baselines apply to all glyphs in the font.
横書テキストと縦書テキストのそれぞれに対し、その整列のための基底線テーブルが,別々に提供され得る。 ~UAは、`縦組$においては縦書~用のテーブルを, そうでなければ横書~用のテーブルを利用するべきである。 ◎ Different baseline tables can be provided for alignment in horizontal and vertical text. UAs should use the vertical tables in vertical writing modes and the horizontal tables otherwise.
4.2. テキストの基底線
この仕様では、次の基底線のみを対象にする: ◎ In this specification, only the following baselines are considered:
- alphabetic
`~alphabetic基底線@ — これは概して、大文字~Latinグリフの下端を整列させる。 ◎ The alphabetic baseline, which typically aligns with the bottom of uppercase Latin glyphs.
- central
`~central基底線@ — これは概して、~em-boxの中心を通る。 この基底線がフォントに備わっていない場合、~em-boxのアセンダ辺( `行上面$ )とディセンダ辺( `行下面$ )のちょうど中間に位置するものと見なされる。 ◎ The 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 em box.
`縦組$では、 `text-orientation$p が `mixed$v または `upright$v のときは, `~central基底線$が支配的~基底線として利用される。 他の場合、`~alphabetic基底線$が利用される。 ◎ In vertical writing mode, the central baseline is used as the dominant baseline when text-orientation is mixed or upright. Otherwise the alphabetic baseline is used.
注記: 将来の CSS モジュールは、他の 支配的~基底線と整列の選択肢も許容するため、基底線をより~~詳細に取り扱うことになる。 ◎ 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は,基底線テーブルを合成する: ◎ If an atomic inline (such as an inline-block, inline-table, or replaced inline element) is not capable of providing its own baseline information, 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辺のちょうど中間に位置するものと見なされる。 ◎ The central baseline is assumed to be halfway between the under and over margin edges of the box.
4.4. 基底線の整列
(`書字mode$に基づいて 変化し得る) `支配的~基底線@ は、次の 2 つの場合に, CSS における整列に利用される: ◎ The dominant baseline (which can change based on the writing mode) is used in CSS for alignment in two cases:
同じ`行内~box!の中で,異なるフォントからのグリフたちを整列するとき: 一連のグリフは、それらに対応するフォントの中の支配的~基底線の位置を合わせるように,整列される。 ◎ Aligning glyphs from different fonts within the same inline box. The glyphs are aligned by matching up the positions of the dominant baseline in their corresponding fonts.
親の中で その子である `行内level~box!を整列するとき: `vertical-align!p に対する値 `baseline^v に対しては、子は,親の支配的~基底線を子の中の同じ基底線に合致させるように,親に整列される(例えば、親の支配的~基底線が~alphabeticならば、子の支配的~基底線が何か別のものであったとしても,子の~alphabetic基底線が親の~alphabetic基底線に合致させられる)。 値[ `sub^v, `super^v, `length^t, `percentage^t ]に対しては、基底線は, `baseline^v に対するときと同様に整列されるが、子は,その `vertical-align!p 値に与えられた~offsetに従って,~shiftされる。 ◎ Aligning a child inline-level box within its parent. 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.
次のマークアップ例と: ◎ Given following sample markup:
<p><span class="outer">Ap <span class="inner">ji</span></span></p>
次のスタイル規則が与えられたとするとき: ◎ And the following style rule:
span.inner { font-size: .75em; }
親( `.outer^css )と子( `.inner^css )の 基底線テーブルは、フォント~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.
上の例の `.inner^css の要素に `vertical-align!p:super があてがわれた場合、その `.inner^css 子の基底線は,同じ規則が利用されて親に整列されるが、それに加え,子は上付文字の位置に~shiftされる。 ◎ 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. 縦書テキスト~layout — 序論
どの書字体系も, 1 つ以上の~native方位を備えている。 現今の用字系は、方位に関し, 3 種に~~分類し得る: ◎ Each writing system has one or more native orientations. Modern scripts can therefore be classified into three orientational categories:
- `横書専用@
横書の~native方位は備えているが,縦書のそれは備えていない用字系 — ~Latin, ~Arabic, ~Hebrew, ~Devanagari など。 ◎ Scripts that have horizontal, but not vertical, native orientation. Includes: Latin, Arabic, Hebrew, Devanagari
- `縦書専用@
縦書の~native方位は備えているが,横書のそれは備えていない用字系 — ~Mongolian, ~PhagsPaなど。 ◎ Scripts that have vertical, but not horizontal, native orientation. Includes: Mongolian, Phags Pa
- `双方位的@
縦書と横書,両者の~native方位を備えている用字系 — 漢字, ~Hangul, 日本語~Kana など。 ◎ Scripts that have both vertical and horizontal native orientation. Includes: Han, Hangul, Japanese Kana
双方位的なものも含め,縦書の~native方位を備えている用字系を `縦書用字系@ と呼ぶ。 双方位的なものも含め,横書の~native方位を備えている用字系を `横書用字系@ と呼ぶ。 (~native方位による用字系の~~分類については 付録 C に見られる。) ◎ A vertical script is one that has a native vertical orientation: i.e. one that is either vertical-only or that is bi-orientational. A horizontal script is one that has a native horizontal orientation: i.e. one that is either horizontal-only or that is bi-orientational. (See Appendix C for a categorization of scripts by native orientation.)
現今のタイポグラフィック システムにおいては、すべてのグリフに横書~方位があてがわれており,テキストを横書に~lay-outするときに利用される。 縦書テキストを~lay-outするためには、~UAは,テキストをその横書~方位から変換する必要がある。 この変換は `双方位的変換@ と呼ばれ、 2 種類に大別される: ◎ In modern typographic systems, all glyphs are assigned a horizontal orientation, which is used when laying out text horizontally. To lay out vertical text, the UA needs to transform the text from its horizontal orientation. This transformation is the bi-orientational transform, and there are two types:
- 回転◎rotate
グリフを横書から縦書に回転させる ◎ Rotate the glyph from horizontal to vertical - 並進◎translate
グリフを横書から縦書に並進させる ◎ Translate the glyph from horizontal to vertical
縦書の~native方位を備える用字系には、縦書テキストの中で正しく方位させるための, 双方位的変換が内在的に備わる: 大部分の CJK ( 韓国語/日本語/韓国語)文字は並進する — すなわち、それらは常に,正立になる。 ~Mongolianなどの他の用字系からの文字は回転する。 ◎ Scripts with a native vertical orientation have an intrinsic bi-orientational transform, which orients them correctly in vertical text: most CJK (Chinese/Japanese/Korean) characters translate, that is, they are always upright. Characters from other scripts, such as Mongolian, rotate.
縦書の~native方位を備えない用字系の文字は、側転されるか, または(正立に)並進される: どちらの変換が利用されるかは、正しさの問題ではなく,テキストの用途に依存する スタイル上の選好である。 `text-orientation$p ~propに対する値 `mixed$v / `upright$v は、横書専用のテキストに対する 回転/並進 を指定する。 ◎ Scripts without a native vertical orientation can be either rotated (set sideways) or translated (set upright): the transform used is a stylistic preference depending on the text’s usage, rather than a matter of correctness. The text-orientation property’s mixed and upright values are provided to specify rotation vs. translation of horizontal-only text.
注記: `text-orientation$p に対する値 `sideways-left$v, `sideways-right$v, `sideways$v は、装飾的な~layout効果のため, および 上向~用字系に対する CSS サポートの限界を回避するために提供される。 ◎ The sideways-left, sideways-right, and sideways values of text-orientation are provided for decorative layout effects and to work around limitations in CSS support for bottom-to-top scripts.
5.1. テキストの方位法: `text-orientation^p ~prop
`●名^ `text-orientation@p `●値^ `mixed$v | `upright$v | `sideways-right$v | `sideways-left$v | `sideways$v | `use-glyph-orientation$v `●初^ `mixed$v `●適^ すべての要素 — 但し,~tableの[ ~row~group, ~col~group, ~row, ~col ]を除く。 ◎ all elements except table row groups, rows, column groups, and columns `●継^ される `●百^ 利用不可 `●媒^ visual `●算^ 指定値 `●ア^ 不可 `●順^ n/a `●表終^この~propは、行の中のテキストの方位を指定する。 現時点では、値は,`縦組$においてのみ効果を持つ — この~propは,`横組$における~box上では効果を持たない。 ◎ This property specifies the orientation of text within a line. Current values only have an effect in vertical writing modes; the property has no effect on boxes in horizontal writing modes.
可読性のため、この節では,語 拡張書記素クラスタ の代わりとして、語 `文字$ を利用する。 詳細は,文字とその~propにて。 ◎ For readability, the term character is used in place of extended grapheme cluster in this section. See Characters and Properties for further details.
各種~値の意味は,次で与えられる: ◎ Values have the following meanings:
- `mixed@v (混在)
`縦組$においては,横書専用の用字系に属する文字は、側転にされる — すなわち,その横書テキストにおける標準の方位から 時計回に 90° 回転される。 縦書用字系に属する文字は,その内在的~方位にされる。 詳細は,縦書における方位を見よ。 ◎ In vertical writing modes, characters from horizontal-only scripts are set sideways, i.e. 90° clockwise from their standard orientation in horizontal text. Characters from vertical scripts are set with their intrinsic orientation. See Vertical Orientations for further details.
これは、主に縦書用字系テキストの~layoutのための,典型的な値である。 ◎ This value is typical for layout of primarily vertical-script text.
- `upright@v (正立)
`縦組$においては、横書専用の用字系に属する文字が正立に — すなわち,それらの標準の横書~方位に — 描画される。 縦書用字系に属する文字は、それらの内在的~方位に設定され,通常のように形状付けられる。 詳細は,縦書における方位を見よ。 ◎ In vertical writing modes, characters from horizontal-only scripts are rendered upright, i.e. in their standard horizontal orientation. Characters from vertical scripts are set with their intrinsic orientation and shaped normally. See Vertical Orientations for further details.
双向性による並替の目的においては、この値により,すべての文字が 右向`~strong文字$として扱われるようになる。 この値は `direction$p の使用値を `ltr$v にする。 ◎ For the purposes of bidi reordering, this value causes all characters to be treated as strong LTR. This value causes the used value of direction to be ltr.
- `sideways-right@v (右~側転)
`縦組$においては、これは,テキストを 横書~layoutの中にあるかのようにしつつ, 90°時計回に回転させる。 ◎ In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° clockwise.
- `sideways-left@v (左~側転)
`縦組$においては、これは,テキストを 横書~layoutの中にあるかのようにしつつ, 90°反時計回に回転させる。 ◎ In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° counter-clockwise.
親が `sideways-left$v でない,非-置換~行内~上に設定された場合、これは 双向性~隔離を強制する: `unicode-bidi$p に対する値 `normal$v, `embed$v は, `isolate$v に算出され、値 `bidi-override$v は, `isolate-override$v に算出される。 テキストの~layoutは、[ それぞれの`行内~box!断片について,[ その基底線テーブルが,内容~boxの中央を貫く縦軸を中心に鏡像にされ(以下, “鏡像テーブル” )、そのテキスト~layoutは,この鏡像テーブルに合致するように 180°回転される ]]ことを除いて, `sideways-right$v に対するときと正確に同じになる。 テキスト装飾については、先祖の`行内!(`塊~容器!の根~行内も含む)から伝播されたものに対しては 鏡像はとられないが、その~boxにより導入されるものに対しては,鏡像テーブルを利用して位置される。 ◎ If set on a non-replaced inline whose parent is not sideways-left, this forces bidi isolation: the normal and embed values of unicode-bidi compute to isolate, and bidi-override computes to isolate-override. Layout of text is exactly as for sideways-right except that the baseline table of each of the inline box’s fragments is mirrored around a vertical axis along the center of its content box and text layout is rotated 180° to match. The positions of text decorations propagated from an ancestor inline (including the block container’s root inline) are not mirrored, but any text decorations introduced by the box are positioned using the mirrored baseline table.
同様に、~boxの子である`行内!の `text-orientation$p の値が `sideways-left$v 以外である場合、相似的な変換(および双向性~隔離)が適用される。 ◎ Similarly, if an inline child of the box has a text-orientation value other than sideways-left, an analogous transformation (and bidi isolation) is applied.
- `sideways@v (側転)
この値は、 `vertical-rl$v 書字modeの下では `sideways-right$v に等価になり, `vertical-lr$v 書字modeの下では `sideways-left$v に等価になる。 この値は、横書用字系テキストを,横書専用が主の文書の中で 縦方向に設定ingするときに有用になり得る。 ◎ This value is equivalent to sideways-right in vertical-rl writing mode and equivalent to sideways-left in vertical-lr writing mode. It can be useful when setting horizontal script text vertically in a primarily horizontal-only document.
- `use-glyph-orientation@v
`SVG11$r は、テキスト方位の制御~用に `glyph-orientation-vertical!p, `glyph-orientation-horizontal!p ~propを定義している。 これらの~propは 廃止予定 にあり、非 SVG 要素には適用されない。 これらの~propをサポートする実装においては、 SVG 要素に対する値 `use-glyph-orientation$v の設定は、[ `glyph-orientation-vertical!p, `glyph-orientation-horizontal!p による ふるまいが, SVG におけるテキスト~layoutを制御する ]ことを指示する。 その種の~UAは、 SVG のための既定の~UAスタイルシートの中で,すべての SVG テキスト内容~要素 に対し, `text-orientation$p を `use-glyph-orientation^v に設定し~MUST。 ◎ [SVG11] defines glyph-orientation-vertical and glyph-orientation-horizontal properties that were intended to control text orientation. These properties are deprecated and do not apply to non-SVG elements. If an implementation supports these properties, the use-glyph-orientation value when set on SVG elements indicates that the SVG glyph-orientation-vertical and glyph-orientation-horizontal behavior control the layout of text. Such UAs must set text-orientation: use-glyph-orientation on all SVG text content elements in their default UA style sheet for SVG.
他のすべての文脈の下,あるいは グリフ方位~propをサポートしない実装においては、 `use-glyph-orientation$v のふるまいは, `mixed$v と同じである。 ◎ In all other contexts, and for implementations that do not support the glyph orientation properties, the use-glyph-orientation behavior is the same as for mixed.
注記: この値は,リスク下にあり、勧告候補の期間内に取り止めになるかもしれない。 ◎ This value is at-risk and may be dropped during CR.
`mixed$v | `upright$v | `sideways-left$v | `sideways-right$v |
次の例では、横書専用の文書の根~要素には, `sideways$v が利用される。 文書の残りの部分では、作者は,テキストが `vertical-rl$v, `vertical-lr$v のいずれであろうと構わずに,単に `writing-mode$p を設定し得る。 ◎ In the following example, the root element of a horizontal-only document is set to use sideways. In the rest of the document, the author can just set writing-mode without worrying about whether the text is vertical-rl or vertical-lr.
:root { text-orientation: sideways; } caption { caption-side: left; writing-mode: vertical-lr; } thead th { writing-mode: vertical-lr; } h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }
注記: この~propの値の変更は、`行内level!の整列に影響し得る。 詳細は テキストの基底線 に。 ◎ Changing the value of this property may affect inline-level alignment. Refer to Text Baselines for more details.
5.1.1. 縦書の植字とフォント特色機能
テキストを `mixed$v, かつ `upright$v による方位の下で植字するとき: ◎ When typesetting text in mixed and upright orientations:
- 正立( upright )文字◎upright characters
縦書フォント計量法に従って正立に植字される。 ~UAは、この計量法を欠くフォントに対しては,その計量法を合成し~MUST。 (この仕様は、その種の計量法を合成するための経験則を定義しない)。 加えて、縦書~植字 用のフォント特色機能(代替グリフや他の変換など)も利用され~MUST(例えば、 OpenType `vert^v 特色機能は有効化され~MUST)。 更には、横書の筆記的な用字系(~Arabicなど)に属する文字が,正立に植字されるときには、その隔離形 【単独形など】 に形状付けられる。 ◎ Are typeset upright with vertical font metrics. The UA must synthesize vertical font metrics for fonts that lack them. (This specification does not define heuristics for synthesizing such metrics.) Additionally, font features (such as alternate glyphs and other transformation) intended for use in vertical typesetting must be used. (E.g. the OpenType vert feature must be enabled.) Furthermore, characters from horizontal cursive scripts (such as Arabic) are shaped in their isolated forms when typeset upright.
注記: “正立” に植字されるときでも,一部のグリフは回転されて現れるべきである。 例えば、ダッシュや括弧類は,`行内軸$に相対的に方位されるべきである。 OpenType においては、これは概して,グリフ代用により取り扱われる — フォントが、関連のどの符号位置についても代替グリフを備えているとは限らないが。 (~EastAsianフォントは,通常,~EastAsian符号位置については代替を提供するものだが、西欧フォントは,概して 縦書~植字のための特色機能を欠き、~EastAsianフォントは,概して西欧の符号位置に対する縦書~代用を欠く。) Unicode により、側転に現れるべき`文字$のための草案データが, このデータ~ファイル における SVO ~propとして発行されたが、この~propは,現在の `UTR50$r 改訂版では放棄されている。 ◎ Note that even when typeset "upright", some glyphs should appear rotated. For example, dashes and enclosing punctuation should be oriented relative to the inline axis. In OpenType, this is typically handled by glyph substitution, although not all fonts have alternate glyphs for all relevant codepoints. (East Asian fonts usually provide alternates for East Asian codepoints, but Western fonts typically lack any vertical typesetting features and East Asian fonts typically lack vertical substitutions for Western codepoints.) Unicode published draft data on which characters should appear sideways as the SVO property in this data file; however, this property has been abandoned for the current revision of [UTR50].
`UTR50$r において `Tr^c または `Tu^c に分類される`文字$は、縦書テキストにおける正立による植字のための 代替グリフや位置決を備えているものと予期されている。 `Tr^c `文字$の場合、その種の縦書~代替グリフがフォントに備わっていない下では、~UAは,そのグリフを`側転に$植字するなどして合成することを望んでもよい( may wish to — `RFC6919$r )(が,求められているわけではない)。 ◎ Characters which are classified as Tr or Tu in [UTR50] are expected to have alternate glyphs or positioning for typesetting upright in vertical text. In the case of Tr characters, if such vertical alternate glyphs are missing from the font, the UA may wish to [RFC6919] (but is not expected to) synthesize the missing glyphs by typesetting them sideways etc.
- 側転( sideways )文字◎sideways characters
は、横書~計量法により 90° 側転されて植字され, 縦書~植字のための特色機能は利用されない。 しかしながら、フォントが[[ 縦書~行の中で植字される側転テキスト ]に対し有効化されることが意図された特色機能 ]を備えている場合(例えば~brush~strokeの角度や整列を調整するために)、それらの特色機能が利用される(例えば、 `vrtr^c OpenType フォント特色機能 が提案されている)。 ◎ Are typeset rotated 90° sideways with horizontal metrics, and vertical typesetting features are not used. However, if the font has features meant to be enabled for sideways text that is typeset in vertical lines (e.g. to adjust brush stroke angles or alignment), those features are used. (An example of such a feature would be the proposed vrtr OpenType font feature.)
`sideways$v, `sideways-right$v, `sideways-left$v 方位による すべてのテキストは、[ 横書フォント計量法, および[ 通常の,横書テキスト~runに利用される各種 特色機能 ]]を利用して,植字される。 縦書~計量法や縦書グリフ異体字, あるいは テキストを縦書~行に植字するために用意された,他のどの特色機能も、利用されない。 ◎ All text in sideways, sideways-right, and sideways-left orientations is typeset using horizontal font metrics and the normal set of features used for horizontal text runs. Vertical metrics, vertical glyph variations, and any other features meant for text typeset in vertical lines are not used.
5.1.2. 方位が混在する縦書
`UTR50$r は、方位が混在する縦書テキストにおける,各~文字の既定の方位を与える, `Vertical_Orientation^c ~propを定義している。 `text-orientation$p が `mixed$v のときに`文字$を植字するためには、~UAは、その方位~propが[ `U^c, `Tu^c, `Tr^c のいずれかである場合は`正立に$ / `R^c の場合は(横書から時計回に 90° 回転して)`側転に$ ]植字し~MUST。 ◎ [UTR50] defines the Vertical_Orientation property for the default character orientation of mixed-orientation vertical text. To typeset a character when text-orientation is mixed, the UA must typeset it upright if its orientation property is U, Tu, or Tr; or typeset it sideways (90° clockwise from horizontal) if its orientation property is R.
注記: UTR50 は,上向~用字系を生来的に取り扱わないので、それらは `mixed$v 方位では正しく植字しないことになる。 その種の用字系に対しては,`sideways-left$v を利用する。 ◎ Note that UTR50 does not handle inherently bottom-to-top scripts, so they will not be typeset correctly with mixed orientation. Use sideways-left for such scripts.
注記: 方位が混在する植字のために用意されている OpenType `vrt2^v 特色機能は、 CSS からは利用されない。 それは、グリフを方位~付けるフォント~デザイナの責務になる。 CSS は代わりに `UTR50$r を通して方位を~~指示し、グリフを側転/正立の適切な方に植字させて,方位する。 ◎ The OpenType vrt2 feature, which is intended for mixed-orientation typesetting, is not used by CSS. It delegates the responsibility for orienting glyphs to the font designer. CSS instead dictates the orientation through [UTR50] and orients glyphs by typesetting them sideways or upright as appropriate.
6. 抽象的な~boxの用語法
CSS 2.1 `CSS21$r は, CSSの~box~layoutモデルを~~詳細に定義しているが、 `horizontal-tb$v `書字mode$に限られていた。 ~layoutは `horizontal-tb$v 以外の書字modeでも相似的になるが、 CSS 2.1 における 方向上/次元上 用語は 抽象化された上で適切に読み替えられ~MUST。 ◎ CSS2.1 [CSS21] defines the box layout model of CSS in detail, but only for the horizontal-tb writing mode. Layout is analogous in writing modes other than horizontal-tb; however directional and dimensional terms in CSS2.1 must be abstracted and remapped appropriately.
この節では、他の`書字mode$のための~box~layoutを定義するために,抽象的な各種 方向上/次元上 用語, および それらの対応関係を与え、それらの~layoutの概念を抽象的に定義できるように,将来の仕様のための用語法を提供する。 (次~節では、 CSS2.1 の~layout計算にそれらを適用する方法, および 直交フロー の取り扱いを説明する。) それらは,テキストのふるまいに由来するものであるが、これらの抽象的な対応関係は,行~boxを包含しない~boxであっても存在する: それらは `writing-mode$p, `text-orientation$p, `direction$p ~propの値から直接的に計算される。 ◎ This section defines abstract directional and dimensional terms and their mappings in order to define box layout for other writing modes, and to provide terminology for future specs to define their layout concepts abstractly. (The next section explains how to apply them to CSS2.1 layout calculations and how to handle orthogonal flows.) Although they derive from the behavior of text, these abstract mappings exist even for boxes that do not contain any line boxes: they are calculated directly from the values of the writing-mode, text-orientation, and direction properties.
CSSにおける方向上~用語は、次の 3 系統に分類される: ◎ There are three sets of directional terms in CSS:
- 物理的
`書字mode$とは独立に,頁に相対的に解釈される。 `物理~方向@ には, `左端@, `右端@, `上端@, `下端@ がある。 ◎ Interpreted relative to the page, independent of writing mode. The physical directions are left, right, top, and bottom.
- フロー相対
内容のフローに相対的に解釈される。 フロー相対 方向には, `始端$, `終端$ がある。 あるいは、次元が多義的になる場合は, `塊始端$, `塊終端$, `行内始端$, `行内終端$ と記される。 ◎ Interpreted relative to the flow of content. The flow-relative directions are start and end, or block-start, block-end, inline-start, and inline-end if the dimension is also ambiguous.
- 行~相対
行~boxの方位に相対的に解釈される。 行~相対 方向には, `行左端$, `行右端$, `行上面$, `行下面$ がある。 ◎ Interpreted relative to the orientation of the line box. The line-relative directions are line-left, line-right, line-over, and line-under.
`物理~次元@ には `横幅@ と `縦幅@ があり, それぞれ `x-軸@ ( `横次元@ )と `y-軸@ ( `縦次元@ )に沿う計量に対応する。 `抽象~次元$は,フロー相対と行~相対のいずれの系統の用語の下でも同一になる。 ◎ The physical dimensions are width and height, which correspond to measurements along the x-axis (horizontal dimension) and y-axis (vertical dimension), respectively. Abstract dimensions are identical in both flow-relative and line-relative terms, so there is only one set of these terms.
注記: `CSS3-FLEXBOX$r も,~flex~layoutを述べるための ~flex相対の用語 を定義する。 ◎ Note: [CSS3-FLEXBOX] also defines flex-relative terms, which are used in describing flex layout.
6.1. 抽象~次元
`抽象~次元@ は、以下で定義される: ◎ The abstract dimensions are defined below:
- `塊~次元@
行におけるテキストのフローに垂直な次元 — すなわち、`横組$では`縦次元$になり,`縦組$では`横次元$になる。 ◎ 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.
- `行内~次元@
行におけるテキストのフローに平行な次元 — すなわち、`横組$では`横次元$になり,`縦組$では `縦次元$になる。 ◎ 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.
- `塊軸@
塊~次元における軸 — すなわち、`横組$では `縦軸$になり,`縦組$では `横軸$になる。 ◎ The axis in the block dimension, i.e. the vertical axis in horizontal writing modes and the horizontal axis in vertical writing modes.
- `行内軸@
行内~次元における軸 — すなわち、`横組$では `横軸$になり,`縦組$では `縦軸$になる。 ◎ The axis in the inline dimension, i.e. the horizontal axis in horizontal writing modes and the vertical axis in vertical writing modes.
- `塊size@
塊~次元における計量: `横組$では 物理~縦幅(縦次元)を, `縦組$では 物理~横幅(横次元)を指す。 ◎ 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@
行内~次元における計量: `横組$では 物理~横幅(横次元)を, `縦組$では 物理~縦幅(縦次元)を指す。 ◎ 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.
【 2014-07-21 までは: 行内sizeは “measure” , “logical width” と称され, 塊sizeは “extent” , “logical height” と称されていた。 】
6.2. フロー相対 方向
`フロー相対 方向@ の `塊始端$, `塊終端$, `行内始端$, `行内終端$ は、頁~上の内容のフローに相対的に定義される。 右向 `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:
- `塊始端@
塊~進行において 先に来る側であり, `writing-mode$p ~propにより決定される: `horizontal-tb$v / `vertical-rl$v / `vertical-lr$v モード下では,それぞれ物理的な 上端/右端/左端 になる。 ◎ The side that comes earlier in the block progression, 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.
- `塊終端@
`塊始端$ の反対~側。 ◎ The side opposite block-start.
- `行内始端@
テキストの`行内~基底~方向$の始端~側。 `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.
- `行内終端@
`始端$の反対~側。 ◎ The side opposite start.
文脈上,一義的になる, あるいは両方の意味を含む所では、用語 `始端@ が`塊始端$と`行内始端$に用いられ,用語 `終端@ が`塊終端$と`行内終端$に用いられる。 ◎ 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 および `text-orientation$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 and text-orientation properties.
英語~塊(行内~方向は 右向 , 塊~方向は 下向): ◎ An English (LTR-TB) block:
← | 横幅 = 行内size | → | |||||||||||
上端 側 = 塊~始端 側 | ↑ | ||||||||||||
左端 側 = 行内~始端 側 |
| 右端 側 = 行内~終端 側 | 縦幅 = 塊size | ||||||||||
下端 側 = 塊~終端 側 | ↓ |
縦書の日本語~塊(行内~方向は 下向 , 塊~方向は 左向): ◎ A vertical Japanese block (TTB-RL):
← | 横幅 = 塊size | → | |||||||||||
上端 側 = 行内~始端 側 | ↑ | ||||||||||||
左端 側 = 塊~終端 側 |
| 右端 側 = 塊~始端 側 | 縦幅 = 行内size | ||||||||||
下端 側 = 行内~終端 側 | ↓ |
6.3. 行~相対 方向
`行~方位@ は、行~boxのいずれの側が論理的な “上端” (アセンダ側)になるのかを決定する。 それは、 `text-orientation$p と `writing-mode$p の組み合わせにより与えられる。 通例、行~相対 “上端” は `塊始端$側に対応するが、これは常に成り立つとは限らない: ~Mongolianの植字(したがって既定では `vertical-lr$v `書字mode$)では, 行~相対 “上端” は, `塊終端$側に対応する。 それゆえ、別個の用語法を要する。 ◎ The line orientation determines which side of a line box is the logical “top” (ascender side). It is given by a combination of text-orientation and writing-mode. 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!p:top に類するものを写像するための, 行に相対的な “上端” / “下端” を指す用語に加え、 `text-align!p:left に類するものを写像するための, 行に相対的な “左端” / “右端” を指す用語も必要になる。 したがって,`行~方位$に相対的に定義される 4 種の `行~相対 方向@ がある: ◎ 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:
- `上面@ ( over )もしくは `行上面@ ( line-over )
-
名目上,行~boxのアセンダ側あるいは “上端” 側に対応するとされる側(概して上線が描かれる側) ◎ Nominally the side that corresponds to the ascender side or “top” side of a line box. (The side overlines are typically drawn on.)
【 この訳では,もっぱら “行上面” の表記に統一する。次の “下面” も同様。 】
- `下面@ ( under )もしくは `行下面@ ( line-under )
`行上面$の反対~側: 行~相対 “下端” あるいはディセンダ側(概して下線が~~描かれる側)。 ◎ Opposite of over: the line-relative “bottom” or descender side. (The side underlines are typically drawn on.)
- `行左端@ ( line-left )
名目上,右向テキストの始端とされる側。 ◎ Nominally the side from which LTR text would start.
- `行右端@ ( line-right )
名目上,左向テキストの始端とされる側(`行左端$の反対~側)。 ◎ Nominally the side from which RTL text would start. (Opposite of line-left.)
物理的 方向と行~相対 方向との間の~~正確な対応関係については 下の表 を見よ。 ◎ See the table below for the exact mappings between physical and line-relative directions.
右向~始端
行左端
左向~終端
|
行上面
|
右向~終端
行右端
左向~始端
|
行下面
|
上端
右向~始端
行左端
| ||
左端
行下面
|
右端
行上面
| |
行右端
左向~始端
下端
|
上端
左向~始端
行右端
| ||
左端
行上面
|
右端
行下面
| |
行左端
右向~終端
下端
|
6.4. 抽象~方向と物理~方向の対応関係
抽象~方向(表の~~左端の欄)から物理~方向への対応関係は、次の表に要約される: ◎ The following table summarizes the abstract-to-physical mappings:
`writing-mode$p | `horizontal-tb$v | `vertical-rl$v | `vertical-lr$v | |||||||
---|---|---|---|---|---|---|---|---|---|---|
`text-orientation$p | 任意 | `sideways-left$v | `mixed$v, `upright$v, `sideways-right$v | `sideways-left$v | `mixed$v, `upright$v, `sideways-right$v | |||||
`direction$p | `ltr$v | `rtl$v | `ltr$v | `rtl$v | `ltr$v | `rtl$v | `ltr$v | `rtl$v | `ltr$v | `rtl$v |
`塊size$◎block-size | `縦幅$◎height | `横幅$◎width | ||||||||
`行内size$◎inline-size | `横幅$◎width | `縦幅$◎height | ||||||||
`塊始端$◎block-start | `上端$◎top | `右端$◎right | `左端$◎left | |||||||
`塊終端$◎block-end | `下端$◎bottom | `左端$◎left | `右端$◎right | |||||||
`行内始端$◎inline-start | `左端$◎left | `右端$◎right | `下端$◎bottom | `上端$◎top | `上端$◎top | `下端$◎bottom | `下端$◎bottom | `上端$◎top | `上端$◎top | `下端$◎bottom |
`行内終端$◎inline-end | `右端$◎right | `左端$◎left | `上端$◎top | `下端$◎bottom | `下端$◎bottom | `上端$◎top | `上端$◎top | `下端$◎bottom | `下端$◎bottom | `上端$◎top |
`行上面$◎over | `上端$◎top | `左端$◎left | `右端$◎right | `左端$◎left | `右端$◎right | |||||
`行下面$◎under | `下端$◎bottom | `右端$◎right | `左端$◎left | `右端$◎right | `左端$◎left | |||||
`行左端$◎line-left | `左端$◎left | `下端$◎bottom | `上端$◎top | `下端$◎bottom | `上端$◎top | |||||
`行右端$◎line-right | `右端$◎right | `上端$◎top | `下端$◎bottom | `上端$◎top | `下端$◎bottom |
7. 抽象~box~layout
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計算~規則( CSS 2.1, 10.3 節によるものなど)は、`縦組$では,代わりに縦次元に適用される。 同様に、`横組$の縦次元に適用される ~layout計算~規則( CSS 2.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規則は、代わりに, `フロー相対 方向$を用いて 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や制約過多の解決, `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.
例えば、`縦組$では、~table~rowは縦方向になり,~table~colは横方向になる。 `vertical-rl$v `mixed$v `rtl$v にされた~tableでは, 最初の~colが下端(`行内始端$側)に~~位置し, 最初の~rowが右端(`塊始端$側)に~~位置する。 ~tableの `margin-right!p / `margin-left!p は、~tableの 前側(右端)/ 後側(左端) の~marginと相殺することになり、 ~tableの `margin-top!p / `margin-bottom!p に対する値 `auto^v は、 その塊フローの中で,~tableを縦方向にて中央寄にする ◎ For example, in vertical writing modes, table rows are vertical and table columns are horizontal. In a vertical-rl mixed rtl table, the first column would be on the bottom (the inline-start side), and the first row on the right (the block-start side). The table’s margin-right and margin-left would collapse with margins before (on the right) and after (on the left) the table, respectively, and if the table had auto values for margin-top and margin-bottom it would be centered vertically within its block flow.
[ テキスト整列, 浮動法, リストマーカの位置決 ]など、主に[ 行~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 と命名されてしまっているが) ]など、主に[ 行~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の 最初/ 2 番目 の値は、 横方向/縦方向 ではなく, ~col間/~row間 の~spacingを表現する。 `CSS21$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. [CSS21]
`line-height!p ~propは、常に,`塊size$を指す。 `CSS21$r ◎ The line-height property always refers to the logical height. [CSS21]
縦幅~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.
例えば、【横次元に関する規則として記されている】 CSS 2.1 の 10.3 節 の計算~規則は,行内~次元の計量に利用される: それらの規則は,`行内size$(物理~横幅にも物理~縦幅にもなり得る), および `行内始端$/`行内終端$の[ ~margin, ~padding, ~border ]に適用される。 同様に、【縦次元に関する規則として記されている】 CSS 2.1 の 10.6 節 による計算~規則は,塊~次元に対し利用される: それらの規則は,`塊size$, および `塊始端$ / `塊終端$の[ ~margin, ~padding, ~border ]に適用される。 `CSS21$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. [CSS21]
その帰結として、 CSS 2.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. 直交フロー
注記: 仕様策定者は 一般にフィードバックを歓迎するが、特に,この込み入った節に対するフィードバックに関心がある。 ◎ We appreciate feedback in general, but we are particularly interested in feedback on this particularly complicated section.
~boxがその`包含塊!と異なる `writing-mode$p を持つときには,次の 2 種類の場合があり得る: ◎ When a box has a different writing-mode from its containing block two cases are possible:
二つの`書字mode$が互いに平行(例えば `vertical-rl$v と `vertical-lr$v )。 ◎ The two writing modes are parallel to each other. (For example, vertical-rl and vertical-lr).
二つの`書字mode$が互いに垂直(例えば `horizontal-tb$v と `vertical-rl$v )。 ◎ The two writing modes are perpendicular to each other. (For example, horizontal-tb and vertical-rl).
~boxの`書字mode$が,その`包含塊!のそれと垂直なとき、その~boxは `直交フロー@ を確立する,と呼ばれる。 ◎ 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 つの段階 — ~boxの~sizing, および そのフローの中での~boxの位置決 — に分割される。 ◎ To handle this case, CSS layout calculations are divided into two phases: sizing a box, and positioning the box within its flow.
~sizingの段階 — すなわち,~boxの横幅と縦幅の計算法 — においては、`直交フロー$を確立している~boxの`書字mode$に従って、~boxとその`包含塊!の各~次元が `行内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.
位置決の段階 — すなわち[ ~margin, ~border, ~padding, 位置決~offset ]の計算法 — においては、`直交フロー$を確立している `包含塊! の`書字mode$に従って、~boxとその包含塊の各~次元が `行内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.
`auto^v による~marginは,`包含塊!の`書字mode$に整合するように解決されるので、`直交フロー$を確立している~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.
例えば、縦書~塊が,横書~塊の内側に置かれた場合、子である縦書~塊の物理~縦幅(すなわち`行内size$)を計算する際には,親~塊の物理~縦幅が — それは 親~塊においては`行内size$ではないが — [ 子の`包含塊! ]の`行内size$と見なされて利用される。 ◎ For example, if a vertical block is placed inside a horizontal block, then when calculating the physical height (which is the inline-size) of the child block the physical height of the parent block is used as the child’s containing block inline-size, even though the physical height is the block-size, not the inline-size, of the parent block.
一方、`包含塊!は`横組$の下にあるので、子の縦方向の~marginが — それは子の`行内軸$にあるが — ~marginの相殺に関与する。 また、子の横方向の自動~marginが — それは子の`塊軸$にあるが — 包含塊の横幅を埋めるように拡幅されることになる。 ◎ On the other hand, because the containing block is in a horizontal writing mode, the vertical margins on the child participate in margin-collapsing, even though they are in the inline-axis of the child, and horizontal auto margins will expand to fill the containing block, even though they are in the block-axis of the child.
7.3.1. 直交フローにおける自動sizing
CSS においては、`包含塊!が確定的な`行内size$を持ちつつ, `塊size$は確定的でないことは,ごく一般的にある。 これは CSS 2.1 においては、通例,包含塊が `auto^v 縦幅を持つときに起こる。 例えば、その横幅が 10.3.3 による計算で与えられつつ,その`塊size$はその内容に依存するとき。 その種の事例では、包含塊の`行内size$が,`可用な行内size!として定義され、`可用な塊size!は,包含塊の`塊size$ — 無限(不定) — になる。 ◎ It is common in CSS for a containing block to have a definite inline-size, but not a definite block-size. This typically happens in CSS2.1 when a containing block has an auto height, for example: its width is given by the calculations in 10.3.3, but its block-size depends on its contents. In such cases the available inline-size is defined as the inline-size of the containing block; but the available block-size, which would otherwise be the block-size of the containing block, is infinite.
~boxを`直交フロー$の中に置くことは、その逆になることを意味する: `可用な塊size!については定義される一方,`可用な行内size!は不定になる。 その種の事例では、`包含塊!の`行内size$に対する百分率は 定義され得ず,`行内軸$における~size算出は解決し得ない。 これらの事例において,確定的な`可用な行内size!を計算に要するときには、`可用な行内size!に代わって,`初期~包含塊!の~sizeが`~fallback~size!として利用される。 ◎ Putting a box in an orthogonal flow allows the opposite to happen: for the available block-size to be defined, but the available inline-size to be indefinite. In such cases a percentage of the containing block’s inline-size cannot be defined, and inline-axis computations cannot be resolved. In these cases, the initial containing block’s size is used as a fallback variable in place of the available inline-size for calculations that require a definite available inline-size.
CSS ~sizingについての用語法や概念の詳細は `CSS3-SIZING$r を見よ。 ◎ See [CSS3-SIZING] for further details on CSS sizing terminology and concepts.
7.3.2. 直交フローにおける塊~容器の自動sizing
`直交フロー$を確立している~boxが[ `塊~容器! または `複柱~要素! ]であり,その`行内size$が `auto^v である場合: ◎ If a box establishing an orthogonal flow is a block container or multi-column element, for the case where the box’s inline-size is auto:
-
`column-width!p の使用値 `W^var を計算する: ◎ Calculate the used column-width:
- `column-count!p も `column-width!p も `auto^v の場合:
-
`W^var は、次の “shrink-to-fit” 公式から計算される: min( `最大内容^var, max( `最小内容^var, `制約^var ) ) ここで: ◎ If column-count and column-width are both auto, use the shrink-to-fit formula min(max-content, max(min-content, constraint)), where:
- `最小内容^var
~boxの`最小内容 行内size! ◎ the min-content inline-size of the box
- `最大内容^var
~boxの`最大内容 行内size! ◎ the max-content inline-size of the box
- `制約^var
-
~boxの`行内軸$において、次のうち大きくない方の,`可用分に収まる!~size: ◎ the box’s inline-axis fill-available fit into the smaller of
- ~boxに`可用な行内size! ◎ the box’s available inline-size
- `初期~包含塊!の`行内size$ ◎ the initial containing block’s inline-size
注記: これは、すべての`包含塊!に対し,自動的に複柱フローを誘発する。 すなわち、~overflowする内容を,包含塊の~~辺で切らずに,包含塊のフロー方向に従って何本かの柱で包装し、文書が T 字型にならないようにする。 作者は、 `column-width^p を設定して これらの柱の計量-を制御したり,あるいは `inline-size^p ~propを `max-content^v などの非 `auto^p 値に設定して このふるまいを無効化できる。 ◎ Note that this automatically triggers multi-column flow on all block containers. This is so that overflowing content, instead of continuing off the side of the containing block, is wrapped into columns in the flow direction of the containing block, thus avoiding T-shaped documents. Authors can control the measure of these columns by setting column-width, or disable this behavior by setting the inline-size property to a non-auto value such as max-content.
- `column-count!p は `auto^v でないが, `column-width!p は `auto^v の場合:
`W^var は、上述の公式における `制約^var を[ `制約^var − (`column-count!p − 1 ) × `column-gap!p ]に置換して計算される。 ◎ If column-count is not auto and column-width is auto, calculate the used column-width with the same formula, except replace constraint with constraint − (column-count − 1) × column-gap.
- `column-count!p も `column-width!p も `auto^v でない場合:
`W^var は、 `column-width!p の算出値で与えられる†。 (これは~overflowさせ得るので【そのような指定は作者には】推奨されない — 代わりに `column-width!p と最大 塊sizeを設定する方がよい。) ◎ If column-count and column-width are both non-auto, the used column-width is the computed column-width. (This is not recommended as it can cause overflow; instead it is better to set the column-width and a max-block-size.)
【† (自明なので省略されていると見られるが,) `column-width!p が `auto^v である場合も。 】
-
使用~柱~長を計算する:
~boxの[ `塊size$の算出値が `auto^v ]かつ[ `column-count!p, `column-width!p いずれかの指定値は `auto^v ]の場合、[ ~boxの`塊size$が`確定的!なら それを / 他の場合,~boxの`可用分 塊size!が`確定的!なら それを / 他の場合,~boxの`最大内容 塊size! ]を利用する。 他の場合、[ `複柱~要素!に対する,通常の~sizing規則 ]に従う。 ◎ Calculate the used column length: If the computed block-size is auto and the specified value of at least one of column-count and column-width was auto, use the box’s block-size (if that is definite), else the fill-available block-size of the box (if that is definite), else the box’s max-content block-size. Otherwise follow the normal rules for sizing a multi-column element.
~boxの`最小内容 塊size!をこの公式に織り込むべきか? 例えば,巨大な画像があるとき、画像は~boxを~overflowさせずに, ~boxが その`包含塊!を~overflowするようにするために? ◎ Should we factor in the box’s min-content block-size in this formula, so that e.g. a large image will not overflow the box, but cause the box to overflow the containing block?
-
`column-count!p の使用値を計算する:
`column-count!p の算出値が `auto^v の場合、 `column-count!p の使用値は、~boxの内容で複柱~layoutを埋めていった結果に従う。 ◎ Calculate the used column-count: If the computed column-count is auto, then the used column-count follows from filling the resulting multi-column layout with the box’s content.
しかる後、結果の`複柱~要素!の使用 `行内size$が,計算される: 内容が`複柱~要素!の中で折り返されたり断片~化されないときの使用 `行内size$は,~boxの内容の`最大内容 行内size!になり、他の場合は `column-width!p, `column-count!p, `column-gap!p の使用値から計算される。 ◎ The used inline-size of the resulting multi-column element is then calculated: if the content neither line-wraps nor fragments within the multi-column element, then the used inline-size is the max-content inline-size of the box’s contents; else it is calculated from the used column-width, column-count, and column-gap.
~boxの使用 `塊size$は、使用 柱`塊size$(複数~本の柱が用いられる場合)か,内容の`最大内容 塊size!になる。 ◎ The used block-size of the box is either the used column block-size (if multiple columns were used) or the max-content block-size of the content.
CSS 複柱~layout `CSS3COL$r をサポートしない~UAは、代わりに,~boxの`塊size$を無限と見なした下で ~boxの`行内size$を計算し,その内容を単独の柱に~lay-outする。 しかしながら,この結果、内容の一部が,切り取られたりアクセスし得なくなり得ることに注意。 ◎ If the UA does not support CSS Multi-column Layout [CSS3COL], the UA may instead calculate the box’s inline-size assuming an infinite block-size, thus laying out its contents into a single column. Note that this can, however, result in content that is clipped or otherwise inaccessible.
7.3.3. 他の直交フロー根における自動sizing
行の長さを制限するため、(前節に定義された)`塊~容器! `C^var における自動sizingは、それに`可用な行内size!が無限であるときには(概して, `C^var が`直交フロー$を確立するときに生じる),特別にふるまう。 ◎ In order to limit the length of lines, block containers have special auto-sizing behavior (defined above) when their available inline-size is infinite (which typically occurs when they establish an orthogonal flow).
他の~layoutモデルは、単純に,`可用な行内size!は無限の下で, `C^var をその`最大内容 行内size!に~lay-outする一方で、この場合、その無限~sizeを, `C^var が包含する`塊~容器!へそのまま渡す — これにより,それらの`塊~容器!自身は`直交フロー$を確立していなくとも,特別な自動sizingのふるまいが誘発され得る。 ◎ Other layout models simply lay out into the infinite available inline-size at their max-content size. However, they pass through the infinite available inline-size to block containers they contain, possibly triggering that special auto-sizing behavior on those block containers even though they do not themselves establish an orthogonal flow.
例えば、`直交フロー$を確立している[ ~table/[ ~flex容器 ]]は,与えられた`可用~空間!の中へ~lay-outされる。 `可用な行内size!が無限の下では、その~boxを実質的に その`最大内容~size!になるように~lay-outすることになるが、`塊~容器!であるような その ~table~cell/`~flex~item! も,`可用な行内size!を無限と見なした下で~lay-outされ,それに従ってふるまうことになる。 ◎ For example, a table or flex container establishing an orthogonal flow is laid out into its given available space. If its available inline-size is infinite, this effectively lays the box out at its max-content size. However, any of its table cells or flex items that are block containers are laid out assuming infinite available inline-size and so behave accordingly.
7.3.4. 直交フローの断片化法
この節は参考である。 ◎ This section is informative.
断片化に関しては、 CSS 2.1 による規則は,`縦組$と直交フローにおいても,依然として維持される: 分断~機会は行~boxの内側では生じず,それらの合間でのみ生じ得るが、 `CSS3COL$r をサポートする~UAは,柱~間の隙間(ゼロ幅にもなり得る)の所で分断してよい。 ◎ With regards to fragmentation, the rules in CSS2.1 still hold in vertical writing modes and orthogonal flows: break opportunities do not occur inside line boxes, only between them. UAs that support [CSS3COL] may break in the (potentially zero-width) gap between columns, however.
~UAには、[ 根~要素により確立された頁割付ストリーム ]の外側に溢れた内容まで印刷することは要求されない。 したがって,作者には、テキストの長いストリームに`書字mode$を混在させる際には, CSS 柱を利用して,すべての内容が文書の頁割付~方向に流し込まれるようにすることを勧める。 ◎ Note that if content spills outside the pagination stream established by the root element, the UA is not required to print such content. Authors wishing to mix writing modes with long streams of text are thus encouraged to use CSS columns to keep all content flowing in the document’s pagination direction.
注記: 言い換えれば、スクリーン上に 2 本のスクロールバーを要する文書の場合、おそらく,印刷されない~~部分が生じることになる。 全体が確実に印刷されるようにするためには、すべてが一方向にスクロールする(したがって頁も一方向に割り付けられる)ように,例えば 複柱 を利用して,~layoutを修正する必要がある。 T 字形になる文書の印刷は、上手くいかない傾向にある。 ◎ In other words, if your document would require two scrollbars on the screen it probably won’t all print. Fix your layout, e.g. by using columns so that it all scrolls (and therefore paginates) in one direction if you want to make sure it’ll all print. T-shaped documents tend not to print well.
7.4. フロー相対 方向の対応関係
各種 `フロー相対 方向$は、~boxの`包含塊!の`書字mode$に関して計算され、[ 各種~box~prop ( ~margin, ~border, ~padding )に関わる抽象~layout規則, および[ その包含塊の中の~box ]に関わる すべての位置決~prop( `float!p, `clear!p, `top!p, `bottom!p, `left!p, `right!p )]に利用される。 `行内level~box!に対しては、 親~box の`書字mode$が代わりに利用される。 ◎ Flow-relative directions are calculated with respect to the writing mode of the containing block of the box and used to abstract layout rules related to the box properties (margins, borders, padding) and any properties related to positioning the box within its containing block (float, clear, top, bottom, left, right) For inline-level boxes, the writing mode of the parent box is used instead.
例えば、~boxの行内~寸法が制約され過ぎのときに,制約から外される~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の相殺~規則は、 上端/下端 ~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.
各種 `フロー相対 方向$は、~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の初期値は、行~boxの`始端$辺に整列させる ◎ The initial value of the text-align property aligns to the start edge of the line box.
`text-indent!p ~propによる字下-は、行~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. 行~相対 方向の対応関係
`行~相対 方向$には, `行上面$, `行下面$, `行左端$, `行右端$ がある。 右向 `horizontal-tb$v `書字mode$下では 【左向でも 】 ,それらは順に[ 上端, 下端, 左端, 右端 ]方向に対応する。 ◎ 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 ~prop `CSS21$r ◎ the text-align property [CSS21]
行右端/行左端 の方向は、~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 ~prop `CSS21$r ◎ the float property [CSS21]
`clear!p ~prop `CSS21$r ◎ the clear property [CSS21]
`行上面$/`行下面$ 方向は,~boxの`書字mode$に関して計算され、次の~propにおいて,行~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に対しては、行~boxの[ “上端” / “下端” ]は、その[ `行上面$辺 / `行下面$辺 ]を指す。 長さ/百分率に対する正の値は、基底線を`行上面$辺へ向けて~shiftさせる `CSS21$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. [CSS21]
`text-decoration!p ~propに対しては、[ 上線/下線 ]は,テキストの[ `行上面$/`行下面$ ]側に描かれる。 `CSS21$r 注記: CSS Text Decoration Module は、これをより~~詳細に定義し,下線/上線の位置に対する追加の制御を提供する。 `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. [CSS21] 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()!css 記法 `CSS21$r ◎ the rect() notation of the clip property [CSS21]
各種 `background-*^p (背景)~prop `CSS21$r `CSS3BG$r ◎ the background properties [CSS21] [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
7.7. ~table~captionにおける対応関係: `caption-side^p がとり得る各種キーワード
`●名^ `caption-side!p `●新値^ `block-start$v | `block-end$v `●表終^このモジュールは、`caption-side!p ~prop に対し, 2 種の新たな値: `block-start@v, `block-end@v を導入する。 それらは順に、~captionを~table~boxの 前, 後 に位置させる。 `horizontal-tb$v 書字mode下の~tableに対しては、順に,既存の `top^v, `bottom^v 値に等価になる。 `CSS21$r ◎ This module introduces two new values to the caption-side property: block-start and block-end, which position the caption before and after the table box, respectively. For tables with horizontal-tb writing mode, they are equivalent to the existing top and bottom values, respectively. [CSS21]
注記: `top-outside^v / `bottom-outside^v モデルをサポートする実装に対しては、対応する `start-outside^v / `end-outside^v も同様に導入される。【?】 ◎ For implementations that support the top-outside and bottom-outside model, corresponding start-outside and end-outside are similarly introduced.
`caption-side!p ~propに対する値 `top^v, `bottom^v をサポートしつつ,側方~caption(すなわち,`横組$における `left^v, `right^v ~caption )をサポートしない実装は、`縦組$における~tableに対しては `top^v, `bottom^v のいずれも `block-start$v として扱わ~MUST。 ◎ Implementations that support the top and bottom values of the caption-side property but do not support side captions (i.e. left and right captions in horizontal writing modes) must treat both top and bottom as block-start, when the table is in a vertical writing mode.
側方~caption(すなわち,廃止された CSS 2.0 仕様 `CSS2$r の値 `left^v, `right^v )をサポートする実装に対しては、このモジュールは,同様にふるまう値 `inline-start^v / `inline-end^v も導入する: それは~captionを[ ~table~boxの`書字mode$に関して計算される,~table~boxの `行内始端$ / `行内終端$ 側 ]に位置させる。 その種の実装は、値 `top^v/`bottom^v に対しては,~captionを~table~boxの 上端/下端 側に置か~MUST。 ◎ For implementations that do support side captions (i.e. the left and right values from the obsolete CSS 2.0 specification [CSS2]), this module also introduces the inline-start and inline-end values, which behave similarly and which position the caption on the inline-start and inline-end sides of the table box, calculated with respect to the writing mode of the table box. For such implementations, the top and bottom values must place the caption on the top and bottom sides of the table box, respectively.
注記: CSS 2.0 による側方~captionのモデルには, ある種の問題 があり、 CSS3 においては,異なる定義になるものと見込まれている。 ◎ The CSS2.0 side caption model had some problems and will likely have a different definition in CSS3.
8. 頁フロー:頁~進行~方向
CSS 2.1 の頁媒体では、すべての頁が,見開きの左右いずれかの頁として分類される。 頁~進行~方向は、[ 左右どちらの頁がフローにおける最初になるか ], および[ 左右どちらの頁が既定で最初の頁になるか ]を決定する。 それは、根~要素の書字~方向に依存して次の様になる: ◎ In paged media CSS2.1 classifies all pages as either left or right pages. The page progression direction, 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 writing direction as follows:
[ `writing-mode$p が `vertical-rl$v ], または[[ `writing-mode$p が `horizontal-tb$v ], かつ[ `direction$p が `rtl$v ]]である場合、頁~進行は左向。 ◎ The page progression is right-to-left if the root element’s writing-mode is vertical-rl or if the root element’s writing-mode is horizontal-tb and its direction is rtl.
[ `writing-mode$p が `vertical-lr$v ], または[[ `writing-mode$p が `horizontal-tb$v ], かつ[ `direction$p が `ltr$v ]]である場合、頁~進行は右向。 ◎ The page progression is left-to-right if the root element’s writing-mode is vertical-lr or if the root element’s writing-mode is horizontal-tb and its direction is ltr.
(他から上書されない限り、文書の最初の頁は,見開きの後半からになる。 例えば,頁~進行が右向なら,右~頁から) ◎ (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. グリフの字組
【 “~~字組” — composition — “~~組版” と訳されることも多いが, “typeset” (この訳では “~~植字” と記される)の訳語でもあるため、この語を用いることにする。 】
9.1. 縦書内横書の字組: `text-combine-upright^p ~prop
`●名^ `text-combine-upright@p `●値^ `none$v | `all$v | [ `digits^v `integer^t? ] `●初^ `none$v `●適^ 非-置換~行内~要素 ◎ non-replaced inline elements `●継^ される `●百^ 利用不可 `●媒^ visual `●算^ 指定されたキーワード — `digits^v が指定された場合は,それに加えて整数 ◎ specified keyword, plus integer if digits `●ア^ 不可 `●順^ n/a `●表終^この~propは[ 複数の文字による,単独の文字~空間の中への結合 ]を指定する。 結合されたテキストが 1em より幅広な場合、~UAは、その内容を 1em 内に収め~MUST。 下を見よ。 結果の字組は、~layoutや装飾の目的においては,単独の正立グリフとして扱われる。 この~propは、`縦組$でのみ効果を持つ。 各種~値の意味は,次で与えられる: ◎ This property specifies the combination of multiple characters into the space of a single character. 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
【何らかの意味で横書に結合し得るような】 どの[ 連続的な`文字$並び ]に対しても、縦書の行~boxの中で 単独の文字の空間を占めるように,~boxの中に横書に植字することを試みる。 ◎ Attempt to typeset horizontally all consecutive characters within the box such that they take up the space of a single character within the vertical line box.
- `digits^v `integer^t?
[ `integer^t にて指定された個数~以下の文字からなる,連続的な ASCII 数字( U+0030 〜 U+0039)からなる最長の並び ]のそれぞれを,[ 縦書の行~boxの中で 単独の文字の空間を占める ]ように,横書に植字することを試みる。 `integer^t が省略された場合、 2 に算出される。 2 〜 4 の範囲~外の整数は無効とする。 ◎ Attempt to typeset horizontally each maximal sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range 2-4 are invalid.
~EastAsian文書においては、[ 日付や頭字語などの,~Latinに基づく文字列 ]を[ 行の`書字mode$に関わらず,常に`横組$で表示させる ]ときに, `text-combine-upright$p による効果がよく利用される。 ◎ In East Asian documents, the text-combine-upright effect is often used to display Latin-based strings such as components of a date or letters of an initialism, always in a horizontal writing mode regardless of the writing mode of the line:
上の図は、次の規則と: ◎ The figure is the result of the rules
date { text-combine-upright: digits 2; }
と,次のマークアップ: ◎ and the following markup:
<date>平成20年4月16日に</date>
による結果を表している。 日本語の下では、この効果は, 縦中横 として知られている。 ◎ In Japanese, this effect is known as tate-chu-yoko.
次に,[ 既知の型による数的~内容 ]の区間ではなく,文書~全体に `text-combine-upright$p:digits_2 を適用したときに、望ましくない結果が生じる例を示す: ◎ The following example shows that applying text-combine-upright: digits 2 to an entire document, rather than to a segment with a known type of numeric content, can have unintended consequences:
<p>あれは10,000円ですよ!</p>
9.1.1. テキスト~run 規則
描画と~layoutにおける複雑さを避けるため、 `text-combine-upright$p が結合し得るのは、素text — すなわち,~box境界で中断されない連続的な`文字$並び — に限られる。 ◎ To avoid complexity in the rendering and layout, text-combine-upright can only combine plain text: consecutive characters that are not interrupted by a box boundary.
しかしながら,この~propは継承されるので、~UAは,~box内容の中で結合される部分が,[ ~boxの外側で始まる/終わるような 他の結合可能な `並び^var ]の一部分にならないようにし~MUST。 そのようなテキストは、通常の, `text-combine-upright$p が `none$v であったかのように~lay-outされる。 `並び^var が一部分だけ結合されるのを避けるためには: ~UAは、結合可能になり得る `~run^var の境界が,何重かの`行内~box!境界に接する場合に、 `~run^var の直前/直後に現れるどの`文字$も検分し~MUST — それらの文字が、介在の~boxを外したときに,(長さ制限に収まると見なしたときに) `並び^var に結合し得る場合、 `~run^var は,結合しない。 ◎ However, because the property inherits, the UA must ensure that the contents of the box effecting the combination are not part of an otherwise-combinable sequence that happens to begin or end outside the box; if so, then the text is laid out normally, as if text-combine-upright were none. To avoid combining only part of a sequence: if the boundary of a potentially-combinable run is due only to one or more inline box boundaries, the UA must inspect any characters that appear immediately before and immediately after the run, and if these characters would, without the intervening box, form a sequence that would (if it were not too long) combine, then the candidate run does not combine.
注記: 上の段落はリスク下にある。 実装者からのコメントを歓迎する。 ◎ The above paragraph is at-risk. Comments from implementors are welcome.
例えば、次の規則: ◎ For example, given the rule
tcy { text-combine-upright: digits 4; }
および, 次のマークアップが与えられたとするとき: ◎ if the following markup were given:
<tcy>12<span>34</span></tcy>
12 と 34 は同じ `text-combine-upright$p 値を伴う先祖を共有するので、いずれも結合されない — それらは,[ ~box境界により中断されてはいるが,結合可能な、長さ 4 の数字~並び ]の一部分と見なされる。 しかしながら、次のマークアップ例では: ◎ no text would combine: the 12 and 34 both share an ancestor with the same text-combine-upright value, and therefore are considered part of a sequence of four combinable digits interrupted by a box boundary. However in these cases:
12<tcy><span>34</span></tcy> 12<tcy><span></span>34</tcy> 12<tcy>34<span></span></tcy>
34 は結合することになる。 直前の 12 が、 34 と共通の `text-combine-upright$p を伴う先祖を共有しないので、この 34 は,全体として[ 結合可能な数字からなる長さ 2 の並び ]を成すものと見なされる。 ◎ The 34 would combine, because the 12 immediately previous does not share with the 34 an ancestor with a common text-combine-upright, and therefore the 34 is considered to be the entirety of a sequence of two combinable digits.
次の規則を利用した場合にも: ◎ If we used the rule
tcy { text-combine-upright: all; }
同じ結果が生じることになる: 最初のマークアップ例では、 1234 が[ ~box境界で中断されてはいるが,結合可能な、長さ 4 の文字~並び ]を形成するので、結合しない。 2 番目のマークアップ例では、 34 が,全体として[ 結合可能な文字からなる長さ 2 の並び ]を形成するので、結合する。 ◎ the same results would occur: the first case not combining because 1234 forms a sequence of four combinable characters interrupted by a box boundary, and the second combining 34 because it forms the entirety of a sequence of two combinable characters.
注記: `text-combine-upright$p の値( `all$v または `digits^v )は、[ どの種別の`文字$が結合し得るか ], および[ 結合可能な並びの最大長 ]にのみ影響する。 それ以外のふるまいは変えない。 ◎ Note that the value of text-combine-upright (all or digits) only affects which types of characters can be combined and what is the maximum length of a combinable sequence. It does not otherwise change behavior.
9.1.2. ~layout規則
テキストを `text-combine-upright$p:all に対するときと同様に結合するとき、結合されたテキストのグリフは、[ `横組$による `line-height^p 1em の`行内~box!の内容に対するとき ]と同様に,横書に字組される( `letter-spacing!p と強制改行は無視しつつ,指定されたフォント設定群を利用して)。 字組の実効~sizeは 1em 平方と見なされ、その平方の外側にはみ出る部分は,~layout目的においては計量されない。 ~UAは、それらのグリフを,計量された 1em 平方の中で,横方向, 縦方向とも中央寄にするべきである。 ◎ When combining text as for text-combine-upright: all, the glyphs of the combined text are composed horizontally (ignoring letter-spacing and any forced line breaks, but using the specified font settings), similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em. The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes. The UA should center the glyphs horizontally and vertically within the measured 1em square.
結果の字組の基底線は、[ 基底線~整列~shift( `vertical-align!p )に先立って,平方が[ 親の`行内~box!の[ テキスト上面( text-over ), テキスト下面( text-under ) ]基底線 ]の合間で中央寄にされる ]ように,選ばれ~MUST。 双向性による並替に対しては、その字組は,[ `text-orientation$p:upright を伴う 1 個の文字 ]と同じに扱われる。 字組の前後の改行に対しては、それは,その実際の内容を伴う正規の`行内!として扱われる。 他のテキスト~layout目的 — 例えば[ 強調マーク( emphasis mark ), テキスト装飾( text-decoration ), ~spacing ], 等々 — に対しては、結果の字組は,[ Object Replacement Character (U+FFFC) を表現する単独のグリフ ]として扱われる。 ◎ The baseline of the resulting composition must be chosen such that the square is centered between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (vertical-align). For bidi reordering, the composition is treated the same as a character with text-orientation: upright. For line breaking before and after the composition, it is treated as a regular inline with its actual contents. For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC.
9.1.3. 圧縮~規則
~UAは、結合されたテキストを必要に応じて圧縮して,[ 結合された字組の送り幅(~advance横幅) ]が 1em 内に収まるようにし~MUST。 (これは,必ずしも,グリフが 1em 内に収まることを意味するわけではない。 その幾何的な境界の外側に描かれるようにデザインされるグリフもあるので。) OpenType 実装は、横幅ごとに固有の異体( OpenType 特色機能:[ `hwid^c/ `twid^c / `qwid^c ] — [ `fwid^c や `pwid^c などの,~glyph-widthに関する他の特色機能 ]は含まれない)を,[ それらの異体が字組の中のすべての`文字$に対し可用である ]ならば、テキスト圧縮に利用し~MUST。 他の場合、~UAは,テキスト圧縮にどのような手段を利用してもよい —[[ フォントから提供される[ 半角/三分角/四分角 【 = hwid/twid/qwid = half-width/third-width/quarter-width 】 ]によるグリフ代用 ], [ テキストを横書に圧縮するために設計された他のフォント特色機能 ], [ テキストを幾何的に拡縮する ],あるいはそれらの任意の組み合わせなど。 ◎ The UA must ensure that the combined advance width of the composition fits within 1em by compressing the combined text if necessary. (This does not necessarily mean that the glyphs will fit within 1em, as some glyphs are designed to draw outside their geometric boundaries.) OpenType implementations must use width-specific variants (OpenType features hwid/twid/qwid; other glyph-width features such as fwid or pwid are not included) to compress text in cases where those variants are available for all characters in the composition. Otherwise, the UA may use any means to compress the text, including substituting half-width, third-width, and/or quarter-width glyphs provided by the font, using other font features designed to compress text horizontally, scaling the text geometrically, or any combination thereof.
例えば、単純な OpenType に基づく実装は,テキストを次の様に圧縮し得る: ◎ For example, a simple OpenType-based implementation might compress the text as follows:
`文字$ 数が複数の場合には、 `n^var `文字$からなる結合されたテキストに対し,横幅 1 ÷ `n^var のグリフを有効化する(すなわち、 2 ないし 3 `文字$に対しては,それぞれ OpenType `hwid^c または `twid^c を利用する等々)。 Unicode 符号位置の個数がそのまま`文字$数になるとは限らないことに注意。 ◎ Enable 1/n-width glyphs for combined text of n characters (i.e. use OpenType hwid for 2 characters, twid for 3 characters, etc.) if the number of characters > 1. Note that the number of characters ≠ number of Unicode codepoints!
結果が 1em より幅広な場合、横方向にて 1em へ縮小する。 ◎ If the result is wider than 1em, horizontally scale the result to 1em.
OpenType ~layout特色機能を利用する実装は、最初に,テキストを通常のグリフで字組して収まるかどうかを見た上で、可用かつ必要なら,半角や三分角 形で代用するように実装し得る — それには、~approachの調整や,可用なグリフ代用に依存する拡縮~演算と組み合わせるなども含まれ得る。 ◎ A different implementation that utilizes OpenType layout features might compose the text first with normal glyphs to see if that fits, then substitute in half-width or third-width forms as available and necessary, possibly adjusting its approach or combining it with scaling operations depending on the available glyph substitutions.
一部のフォントでは、表意文字グリフが,幅の方が 1em で, 高さが 1em より低く圧縮されたデザインとして与えられる。 その種のフォントに適応するため、~UAは、"水" U+6C34 の送り幅(~advance縦幅)に合致するように,字組を縦方向に拡縮してもよい。 ◎ In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the the composition to match the advance height of 水 U+6C34.
9.1.3.1. 全角~文字
テキストが 1em に圧縮されるときでも, typographic color 【テキスト断片の,全体的な見かけの濃さ】は保たせるため、結合されたテキストが複数の`文字$からなる場合には、そのどの全角`文字$も,他の圧縮~技法を適用する前に,まず、[ `CSS3TEXT$r による `text-transform!p:full-width のために定義された~algo ]の逆を~~行って,それらに等価な非-全角~文字に変換cし~MUST。 ◎ In order to preserve typographic color when compressing the text to 1em, when the combined text consists of more than one character, then any full-width characters must first be converted to their non-full-width equivalents by reversing the algorithm defined for text-transform: full-width in [CSS3TEXT] before applying other compression techniques.
例えば、作者は `text-transform!p, `text-combine-upright$p の両者を,縦書テキストの中の日付に適用し得る。 ◎ For example, an author might apply both text-transform and text-combine-upright to a date set in vertical text.
date { text-combine-upright: digits 2; text-transform: full-width; }
このスタイル規則が次の様な日付に適用されたとする: ◎ Suppose this style rule is applied to a date such as.
<date>2010年2月23日</date>
"2010" ( 4 個の数字)は、結合するには長過ぎるが、 "2" と "23" は影響されることになる。 "23" には複数の文字があるので, `text-transform!p:full-width から影響されないが、 "2" は文字 1 個なので,全角の "2" に変換されることになる。 "2010" は結合されないので、その数字は全角の "2010" に変換され、全角なので,正立に植字されることになる: ◎ The "2010" is too long to be combined (4 digits), but the "2" and "23" will be affected. Since "23" is more than one character, it will not be affected by text-transform: full-width. However since the "2" is only one character, it will be transformed to a fullwidth "2". Since the "2010" was not combined, its digits, too, will be transformed to fullwidth "2010"; and being fullwidth, they will be typeset upright, giving the following result:
2 0 1 0 年 2 月 23 日
注記: [CSS3-FONTS] にて定義される, `font-variant!p や `font-feature-settings!p などのグリフ選定に影響する~propは、[[ 結合されたテキスト~runの中に含まれる文字 ]のための異体 ]の選定に,影響を及ぼし得る。 作者には、 `text-combine-upright$p も利用される下で,これらの~propを利用する際には、この点に配慮することを勧める。 ◎ Properties that affect glyph selection, such as the font-variant and font-feature-settings properties defined in [CSS3-FONTS], can potentially affect the selection of variants for characters included in combined text runs. Authors are advised to use these properties with care when text-combine-upright is also used.
変更点
- 2014 年 3 月 勧告候補 からの変更点 ◎ Changes since the March 2014 CSS Writing Modes Module Level 3 Candidate Recommendation
-
直交フローにおける自動sizingの規則を, shrink-wrapping についての取り扱いを改善して修正。 ◎ Fixed orthogonal flows auto-sizing rules to better handle shrink-wrapping.
謝辞
John Daggett, Martin Heijdra, Laurentiu Iancu, Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi, Ken Lunde, Nat McCully, Eric Muller, Paul Nelson, Kenzou Onozawa, Dwayne Robinson, Simon Sapin, Michel Suignard, Taro Yamamoto, Steve Zilles
付録 A. 文字とその各種~prop
Unicode は、CSS Writing Modes から参照される 3 種の符号位置レベルを定義している: ◎ Unicode defines three codepoint-level properties that are referenced in CSS Writing Modes:
- General Category
`UAX44$r にて定義され、 Unicode 文字データベース `UAX44$r の中では General_Category ~propとして与えられる。 ◎ Defined in [UAX44] and given as the General_Category property in the Unicode Character Database [UAX44].
- Script
`UAX24$r にて定義され、 Unicode 文字データベース `UAX44$r の中では Script ~propとして与えられる。 ( ~UAは、この mapping の中の あらゆる ScriptExtensions.txt assignments を include するべきである。【?】) ◎ Defined in [UAX24] and given as the Script property in the Unicode Character Database [UAX44]. (UAs should include any ScriptExtensions.txt assignments in this mapping.)
- Vertical Orientation
`UTR50$r にて定義され、 UTR50 データ~ファイルの中では Vertical_Orientation ~propとして与えられる。 ◎ Defined in [UTR50] as the Vertical_Orientation property and given in the UTR50 data file.
いくつかの節における語 `文字@ は、(そこで記された様に) `UAX29$r による 拡張書記素クラスタ ( extended grapheme cluster )として定義される。 それは、概ね,言語~利用者が文字あるいは用字系の中での基本的な単位(単独の Unicode 符号位置になるとは限らない)と考えるものに等価である。 ~UAは、この定義を,タイポグラフィック慣行により適切に合致するように,更にあつらえてもよい。 例えば、 `upright$v による植字の際に,~Tibetanの tsek や shad mark を独立のクラスタとして扱わずに,先行の字に伴わせるなど。 ◎ In several sections (as noted), the term character is defined as extended grapheme cluster per [UAX29]. It is roughly equivalent to what a language user considers to be a character or a basic unit of the script (which might not be a single Unicode codepoint). The UA may further tailor this definition as appropriate to match typographic convention. For example, when typesetting upright, Tibetan tsek and shad marks are kept with the preceding letters, rather than treated as an independent cluster.
Unicode は,文字に対し種々の~propを定義するが、 `text-orientation$p に対しては,書記素クラスタの~propを決定する必要がある。 この仕様の目的においては、それらの~propは,その基底~文字から与えられるが、次の 2 つの事例は除く: ◎ Unicode defines properties for characters, but for text-orientation, it is necessary to determine the properties of a grapheme cluster. For the purposes of CSS Writing Modes, the properties of a grapheme cluster are given by its base character—except in two cases:
Common 用字系における Enclosing Mark (Me) により形成される書記素クラスタは、 Common 用字系における Other Symbols (So) と見なされ、 Replacement Character U+FFFD と同じ Unicode ~propを持つものと見なされる。 ◎ Grapheme clusters formed with an Enclosing Mark (Me) of the Common script are considered to be Other Symbols (So) in the Common script. They are assumed to have the same Unicode properties as the Replacement Character U+FFFD.
Space Separator (Zs) により形成される書記素クラスタは、 基底~文字は Modifier Symbols (Sk) であるものと見なされ, 基底~文字と同じ East Asian Width ~propを持つものと見なされるが、他の~propについては,並びにおける最初の結合文字から取り込まれる。 ◎ Grapheme clusters formed with a Space Separator (Zs) as the base are considered to be Modifier Symbols (Sk). They are assumed to have the same East Asian Width property as the base, but take their other properties from the first combining character in the sequence.
付録 B. HTML 4 のための双向性~規則
双向性のふるまいを得るスタイルシート規則は、 HTML Strict doctype に対しては `HTML401$r にて指定され,以下に与えられる: ◎ The style sheet rules that would achieve the bidi behaviors specified in [HTML401] for the HTML Strict doctype are given below:
/* HTML dir 属性は 埋込を作成する。 注記: HTML5 では、埋込の代わりに隔離を規定する( HTML4 が策定された頃は,隔離は不可能であった)。 ◎ HTML dir attribute creates an embedding NOTE: HTML5 prescribes isolation in place of embedding (Isolation was not possible at the time HTML4 was written.) */ [dir="ltr"] { direction: ltr; unicode-bidi: embed; } [dir="rtl"] { direction: rtl; unicode-bidi: embed; } /* BDO 要素は 上書を作成する◎BDO element creates an override */ bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; } bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; } /* HTML4.01 の 8.2.6 節 — `display^p が変化しても 双向性のふるまいを保つ◎HTML4.01:8.2.6 - preserve bidi behavior if 'display' is changed */ html, body, div, address, blockquote, p, ul, ol, li, dl, dt, dd, fieldset, form, h1, h2, h3, h4, h5, h6, { unicode-bidi: isolate; }
付録 C. Unicode における縦書の用字系
この節は参考である。 ◎ This section is informative.
この付録では、 Unicode 6.0 `UNICODE$r の中の 縦書/双方位的 用字系を挙げ,それらにおける 横書~方位から縦書~方位への変換を挙げる。 明示的に挙げられていない どの用字系も,`横書専用$と見なされる。 Unicode 文字の用字系による分類は `UAX24$r にて与えられる。 ◎ This appendix lists the vertical and bi-orientational scripts in Unicode 6.0 [UNICODE] and their transformation from horizontal to vertical orientation. Any script not listed explicitly is assumed to be horizontal-only. The script classification of Unicode characters is given by [UAX24].
コード◎Code | 名前◎Name | 【和名】 | 変換(時計回)◎Transform (Clockwise) | 縦書の内在的 方向◎Vertical Intrinsic Direction |
---|---|---|---|---|
Bopo | Bopomofo | 注音符号(ボポモフォ) | 0° | 下向 |
Egyp | Egyptian Hieroglyphs | エジプト ヒエログリフ | 0° | 下向 |
Hira | Hiragana | 平仮名 | 0° | 下向 |
Kana | Katakana | 片仮名 | 0° | 下向 |
Hani | Han | 漢字 | 0° | 下向 |
Hang | Hangul | ハングル | 0° | 下向 |
Merc | Meroitic Cursive | メロエ草書体 | 0° | 下向 |
Mero | Meroitic Hieroglyphs | メロエ文字 | 0° | 下向 |
Mong | Mongolian | モンゴル文字 | 90° | 下向 |
Ogam | Ogham | オガム文字 | −90° | 上向 |
Orkh | Old Turkic | 突厥文字(オルホン文字) | −90° | 下向 |
Phag | Phags Pa | パスパ文字 | 90° | 下向 |
Yiii | Yi | ロロ文字 | 0° | 下向 |
例外: この仕様の目的においては、すべての全角( F ), 幅広( W )文字は,縦書用字系に属し, すべての半角( H )文字は,横書用字系に属しているものと扱われる。 `UAX11$r ◎ Exceptions: For the purposes of this specification, all fullwidth (F) and wide (W) characters are treated as belonging to a vertical script, and halfwidth characters (H) are treated as belonging ot a horizontal script. [UAX11]
注記: CSS3 Writing Modes は、 Ogham や Old Turkic を正しく取り扱えない。 これらの用字系を植字するときは `text-orientation$p:sideways-left の利用が推奨される。 CSS の将来バージョンは、これらの用字系の自動的な取り扱いを定義し得る。 ◎ CSS3 Writing Modes cannot correctly handle either Ogham or Old Turkic. It is recommended that text-orientation: sideways-left be used to typeset these scripts. A future version of CSS may define automatic handling of these scripts.
注記: 縦書専用の文字(~Mongolianや~PhagsPaによる字など)は、 Unicode 符号表の中では,グリフが縦書~方位で示されている。 横書テキストの中では、それらは,この方位から 90°反時計回に植字される。 ◎ Note that for vertical-only characters (such as Mongolian and Phags Pa letters), the glyphs in the Unicode code charts are shown in their vertical orientation. In horizontal text, they are typeset in a 90° counter-clockwise rotation from this orientation.