CSS 論理的なプロパティと値 — CSS Logical Properties and Values Module Level 1

1. 序論

注記： 書字~modeの本式な序論は、 `css-writing-modes-4$r を見よ。 この~moduleは，その各種用語に馴染んでいると見做す。 ◎ Note: See [css-writing-modes-4] for a proper introduction to writing modes; this module assumes familiarity with its terminology.

書記体系が異なれば書かれる方向も異なるので、 様々な`書字~mode$が存在する — ［ 左から右へ ＋ 上から下へ ］,［ 右から左へ ＋ 上から下へ ］,［ 下から上へ ＋ 右から左へ ］等々。 それに応じて、 ~pageや行lの “始端” の様な論理的~概念から，行lの “上端” や段落の “左端~辺” の様な物理的~概念への対応付けも変わる。 ~layoutには，実際には書字~方向に相対的な側面もあるので、 ~pageが他の書記体系に翻訳されれば，~layoutも変わることになる。 それ以外の側面は、 内来的に~pageの物理-方位に相対的になる。 ◎ Because different writing systems are written in different directions, a variety of writing modes exist: left to right, top to bottom; right to left, top to bottom; bottom to top, right to left; etc. logical concepts like the “start” of a page or line map differently to physical concepts like the “top” of a line or “left edge” of a paragraph. Some aspects of a layout are actually relative to the writing directions, and thus will vary when the page is translated to a different system; others are inherently relative to the page’s physical orientation.

<blockquote dir="auto">Quotation in English</blockquote>
<blockquote dir="auto">اقتباس في العربية</blockquote>

blockquote {
    `text-align$p: start; /*

~Latinにおいては `left^v,
~Arabicにおいては `right^v
◎
left in latin, right in arabic
 */
    `margin-inline-start$p: 0px; /*

~Latinにおいては `margin-left^p,
~Arabicにおいては `margin-right^p
◎
margin-left in latin, margin-right in arabic
 */
    `border-inline-start$p: 5px solid gray; /*

~Latinにおいては `border-left^p,
~Arabicにおいては `border-right^p
◎
border-left in latin, border-right in arabic
 */
    `padding-inline-start$p: 5px; /*

~Latinにおいては `padding-left^p,
~Arabicにおいては `padding-right^p
◎
padding-left in latin, padding-right in arabic
 */
}

~CSSは元々，物理-座標のみで制御するよう設計されていた。 この~moduleは、 `~flow相対$な用語で~CSS~stylesheet内の宣言を表出できるようにするため， ~text~flowに相対的な等価物を導入する。 【 “~flow相対” は、 “~flowに相対的” の短縮形である。】 それは、 次を定義する： ◎ Since CSS was originally designed with only physical coordinates in its controls, this module introduces text-flow–relative equivalents so that declarations in a CSS style sheet can be expressed in flow-relative terms. It defines＼

将来の~CSS仕様では、 その~prop, およびその値の定義に，新旧 両 座標の集合を組入れるものと期待されているので、 この~moduleは，より新たな~CSS特能の`~flow相対$な変種の導入には立ち入らない。 ◎ Future CSS specifications are expected to incorporate both sets of coordinates in their property and value definitions, so this module will not track the introduction of flow-relative variants of newer CSS features.

`CSS Writing Modes^cite `§ 抽象-~box用語＠~CSSWM#abstract-box$ は、 ~flow相対な用語から物理-用語へをどう対応付けるか定義している。 この対応付けは、［ `writing-mode$p, `direction$p, `text-orientation$p ］の`使用~値$に依存し，`~flow相対$な~keywordと~propの解釈を制御する。 ◎ CSS Writing Modes’ Abstract Box Terminology section defines how to map between flow-relative and physical terms. This mapping, which depends on the used values of writing-mode, direction, and text-orientation, controls the interpretation of flow-relative keywords and properties.

注記： `direction$p の`使用~値$は、 `text-orientation$p との相互作用に因り，［ `writing-mode$p, `text-orientation^p ］の`算出d値$に依存する。 ◎ Note: Due to its interaction with text-orientation: upright, the used direction depends on the computed values of writing-mode and text-orientation.

2. ~flow相対な値： `block-start^v, `block-end^v, `inline-start^v, `inline-end^v

多くの~CSS~propは、 歴史的に`物理的$な `方向-~keyword@ 値（ `top^v, `bottom^v, `left^v, `right^v ）を受容している。 この仕様は、 `~flow相対$な`方向-~keyword$値 — `block-start^v, `block-end^v, `inline-start^v, `inline-end^v — を導入する。 ◎ Many CSS properties have historically accepted directional keyword values that are physical (top, bottom, left, right). This specification introduces directional keyword values that are flow-relative: block-start, block-end, inline-start, inline-end.

~propの効果は、 一次元にも二次元にもなり得る。 文脈的に一次元に拘束されるときは、 ~flow相対な~keywordは（ `start^v または `end^v に ）略語化される。 ◎ A property’s effect can be either 1-dimensional or 2-dimensional. When contextually constrained to one dimension, the flow-relative keywords are abbreviated (to start and end).

~CSS2の~propは、 ここにて，`~flow相対$な方向-~keywordも受容するよう定義し直される。 そのような値は、 対応する物理的な値に代えて利用できる。 複数の~keywordをとれるような~propに対しては、［ 物理的な値, ~flow相対な値 ］の組合nは，（将来の仕様にて指定されない限り）許容されない。 ◎ CSS Level 2 properties are here redefined to also accept flow-relative directional keywords. Such values can be used in place of the corresponding physical values. For properties that take multiple keywords, combinations of flow-relative and physical values are not allowed (unless otherwise specified in a future specification).

注記： より新たな~CSS仕様は、 ほとんどの事例で，`物理的$な値に［ 代えて／加えて ］［ `~flow相対$な値／`行l相対$な値 ］（順不同）を定義するものと期待される。 一般に，そのような相対的な値の対応付けは、 影響する対象が［ ~box自身ならば`包含塊$／ ~boxの内容ならば~box自身 ］の`書字~mode$を利用することが期待される。 そうであっても、 対応付け用に どの`書字~mode$を利用するかは，明示的に定義される必要がある。 ◎ Note: Newer CSS specifications are expected in most cases to define flow-relative or line-relative values instead of or in addition to any physical ones. In general, the mapping of such relative values are expected to use the writing mode of the containing block when affecting the box itself, and that of the box itself when affecting its contents. Regardless, which writing modes is used for the mapping needs to be explicitly defined.

3. ~flow相対な~pageの分類

~CSSにおいては、 すべての~pageは，~UAにより 左~pageか右~page のいずれかに分類される。 `CSS2$r しかしながら、 いずれの~pageが見開きの最初になるかは， `~page進行$が右向きか左向きかに依存する。 ◎ In CSS, all pages are classified by user agents as either left pages or right pages. [CSS2] Which page is first in a spread, however, depends on whether the page progression is left-to-right or right-to-left.

何~pageかに分断するとき，所与の~pageを［ 見開きの左か右かでなく，~page進行において先に来させるか後に来させるか ］を制御することを許容するるため、 この~moduleは［ `page-break-after$p ／ `page-break-before$p ］~prop `CSS2$r 用に，次に挙げる~keywordを追加する： ◎ To allow control of page breaking to the page that is on the earlier or later side of a spread, rather than to the left or right side of a spread, this module introduces the following additional keywords for the page-break-after and page-break-before properties [CSS2]:

`recto@v

`~page進行$が［ 右向きの下では `right^v ／ 左向きの下では `left^v ］に等価。 ◎ Equivalent to right in left-to-right page progressions and left in right-to-left page progressions.

`verso@v

`~page進行$が［ 右向きの下では `left^v ／ 左向きの下では `right^v ］に等価。 ◎ Equivalent to left in left-to-right page progressions and right in right-to-left page progressions.

これらの値は、 指定d値に算出され，~~詳細は `css-break-3$r にて定義される。 【 `break-after$p ／ `break-before$p 】 ◎ These values are computed as specified and are further defined in [css-break-3].

作者は、 概して，~flow相対な配置を利用して~page番号を置くが、 ~headerの内容は，見開きのどちらの~pageがより先に来るかに依存する規約に従うことが多い。 ~flow相対な~page選択を~supportするため、 ~flow相対な次の`~page選択子$も追加される： ◎ Although authors typically place page numbers using physical placements, the contents of headers often follows conventions depending on which page in the spread is earlier. Therefore the following flow-relative page selectors are also added to support flow-relative page selection:

`recto@ps

`~page進行$が［ 右向きの下では `right$ps ／ 左向きの下では `left$ps ］に等価。 ◎ Equivalent to ':right' in left-to-right page progressions and ':left' in right-to-left page progressions.

`verso@ps

`~page進行$が［ 右向きの下では `left$ps ／ 左向きの下では `right$ps ］に等価。 ◎ Equivalent to ':left' in left-to-right page progressions and ':right' in right-to-left page progressions.

~flow相対な~page選択子の詳細度は、 `left$ps ／ `right$ps ~page選択子のそれに等しい。 ◎ The flow-relative page selectors have specificity equal to the ':left' and ':right' page selectors.

4. ~flow相対な~box~model~prop

多くの整形~効果では、 影響される［ 軸／方向 ］は，その値ではなく~prop名に符号化される。 そのような各~propの［ 方向-／軸 ］対応付けの種別（`~flow相対$か`物理的$か）は、 その `対応付け~logic@ と呼ばれる。 歴史的に，すべての~propは、 `物理的$な用語に符号化されていた — この仕様は、［ ~CSS2の`物理的$な各種~box~model~prop ］に等価な新たな~propとして，`~flow相対$な~propを導入する。 ◎ For many formatting effects, the axis or direction affected is encoded in the property name rather than in its value. The type of directional or axis mapping (flow-relative or physical) of each such property is called its mapping logic. Historically, all properties have been encoded in physical terms; this specification introduces new CSS properties that are flow-relative equivalents of CSS2’s physical box model properties.

注記： より新たな~CSS仕様は，ほとんどの事例で、 `物理的$な~propに［ 代わる／加えて ］，［ `~flow相対$, または`行l相対$ ］な~propを定義するものと期待される。 ◎ Note: Newer CSS specifications are expected in most cases to define flow-relative or line-relative properties instead of or in addition to any physical ones.

~boxの各［ 側／次元 ］に等価な~styleを設定することにより互いに関係するような，並行な各種［ `~flow相対$な~prop, `物理的$な~prop ］が成す集合は（`略式~prop$は無視して）、 `論理-~prop~group@ を形成する （どの`下位prop$も，複数の`論理-~prop~group$に属することはない）。 例えば，次に挙げるものは、 それぞれ別の単独の`論理-~prop~group$を形成する ⇒＃ 各種 `padding-*^p ~prop／ 各種 `margin-*^p ~prop／ 各種 `border-*-style^p ~prop ◎ Each set of parallel flow-relative properties and physical properties (ignoring shorthand properties) related by setting equivalent styles on the various sides or dimensions of a box, forms a logical property group. For example, the padding-* properties form a single logical property group, the margin-* properties form a separate logical property group, the border-*-style properties form another logical property group, etc. (Each longhand property can belong to at most one logical property group.)

各`論理-~prop~group$の中では、［ `~flow相対$な~prop, それに対応する`物理的$な~prop ］は、 要素の自前の`書字~mode$の`算出d値$を利用して，~pairにされる。 各~propの`指定d値$は，別個であり続けるが、 ~pairにされた~propは，同じ`算出d値$を共有する。 この共有された値は、 両~propの宣言を 1 つのものとして一緒に`~cascade$することにより決定される — 言い換えれば、 ~pairを成す両~propの`算出d値$は，［ `~cascade$において，より高い優先度を伴って宣言された方の~prop ］の`指定d値$から導出される。 `CSS-CASCADE-3$r ◎ Within each logical property group, corresponding flow-relative and physical properties are paired using the element’s own computed writing mode. Although the specified value of each property remains distinct, paired properties share a computed value. This shared value is determined by cascading the declarations of both properties together as one; in other words, the computed value of both properties in the pair is derived from the specified value of the property declared with higher priority in the CSS cascade. [CSS-CASCADE-3]

注記： これには、 実装が，~CSS宣言~塊の中で 【名前が異なる下位propについても】 宣言どうしの順序を保守することが要求される — それは、 以前までは~CSS~cascade法に要求されていなかった。 また、 `論理-~prop~group$を成す［ `~flow相対$, `物理的$ ］な各~宣言を［ それらの`算出d値$を見出すために，一緒に~cascadeする ］ための前提条件として，［ `writing-mode$p, `direction$p, `text-orientation$p ］を算出することも要求される。 ◎ Note that this requires implementations to maintain relative order of declarations within a CSS declaration block, which was not previously required for CSS cascading. It also requires that writing-mode, direction, and text-orientation be computed as a prerequisite for cascading together the flow-relative and physical declarations of a logical property group to find their computed values.

p {
  margin-inline-start: 1px;
  margin-left: 2px;
  margin-inline-end: 3px;
}

算出d値を返す `CSSOM$r ~API（ `getComputedStyle()^c など）は、 そのような~pairを成す各~個々の~propに対しては，同じ値を返すモノトスル。 ◎ [CSSOM] APIs that return computed values (such as getComputedStyle()) must return the same value for each individual property in such a pair.

注記： 【親ではなく，】 要素の自前の`書字~mode$に依存して，`~flow相対$な各~propを`物理的$な等価物に対応付けることで、 ~cascade法の計算は単純になり，作者が素直に選り分けれるような~modelを与える。 しかしながら、 多くの事例で問題になり得る — 例えば、 この論点を見よ。 作者は、［ 要素の`書字~mode$を親から変更するときに，対応付けの正しい挙動を得る ］ためには， 要素を入子にして利用する必要もあり得る。 ◎ Note: Depending on the element’s own writing mode for mapping every flow-relative property to its physical equivalent simplifies the cascading calculations and gives a straightforward model for authors to reason about. However, it is problematic in many cases, see for example this discussion. Authors may need to use nested elements to get the correct mapping behavior when changing an element’s writing mode from its parent.

各~propは、 親の対応する~propから継承する。 例えば、 `ltr$v ~box【 `direction$p が `ltr^v にされた~box】の`行内-始端$~marginは，~boxの右端~marginになるが、 この~boxの `margin-inline-start$p は，親の `margin-inline-start^p を継承することになる — 親は `rtl$v で，その `margin-inline-start^p は左端~marginになるとしても。 ◎ Inheritance of each property is from its corresponding property on the parent. For example, although the inline-start margin of anrtl box is its right margin, margin-inline-start on this box will inherit the margin-inline-start of an ltr parent even though that happens to be the parent’s left margin.

他が指定されない限り，［ 論理-, 物理- ］両~下位propを包摂する`略式~prop$（ `all$p など）は、 【それら下位prop用の値のうち】物理-下位prop用の値を最後に設定する。 例えば， `all^p: `inherit^v は `margin$p の下位propすべてを `inherit$v に設定するが、 物理-下位propは最後に設定されるので， 子の各~marginは親の対応する物理-下位propから継承することになる。 ◎ Unless otherwise specified, shorthand properties that encompass both logical and physical longhands (such as the all shorthand) set their physical longhands last. For example, all: inherit will set all of the margin properties to inherit, but since the physical longhands are set last, the child’s margins will inherit from their physical counterparts in the parent.

【 “最後” とは、 次を意味するであろう： ~cascade法の目的においては、 略式~propの宣言を一連の下位prop宣言に展開したとするとき， それらの中で`最後＠~CASCADE#cascade-order$に宣言されたものと扱われる。 】

`value-type^t{1,4}

`logical$v? `value-type^t{1,4}

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

謝辞

Cameron McCormack, David Baron, Oriol Brufau, Shinyu Murakami, Tab Atkins

変更点

`2018年 8月 27日 作業草案＠~TR/2018/WD-css-logical-1-20180827/$ からの変更点 ◎ Changes since the 27 August 2018 Working Draft include:

~flow相対な~propの継承を定義した。 ◎ Defined inheritance of flow-relative properties.

`resize$p 用の~flow相対な値を `CSS-UI-4$r へ移動した。 ◎ Moved flow-relative values of resize to [CSS-UI-4].

編集上の明確化として、 この仕様を成す多数の各部を書き直した。 ◎ Editorially rewrote large parts of the specification for clarity.

対応付け依存関係たちが成す~listに `text-orientation$p を追加した。 ◎ Added text-orientation to list of mapping dependencies.

［ `border-inline$p, `border-block$p ］は、 影響される どちら側にも同じ値を設定することを明確化した。 ◎ Clarified that border-inline and border-block set both affected sides to the same value.

`border-*-radius^p 用の対応付けを明確化した。 ◎ Clarified the mapping for border-radius.

物理的な各種［ ~margin, ~border, ~padding ］~propは，それらが適用される要素において【対応する~flow相対な~propから】参照rされるので、 【後者の適用-対象からも】~ruby基底~容器と~ruby注釈~容器は除外される。 ◎ Referred to physical margin, border, and padding properties in the elements they apply to, so ruby base containers and ruby annotation containers are excluded.

一貫性を得るため、 各種【~flow相対な】［ ~margin, ~padding ］~propは，対応する `*-top^p ~propを参照rするようにした。 ◎ Made margin and padding properties refer to *-top properties for consistency.

用語 `~inset~prop$を定義した。 ◎ Defined the term inset properties.

諸々の細かな明確化。 ◎ Miscellaneous minor clarifications.

`Web Platform Tests coverage^en を追加した。 ◎ Added Web Platform Tests coverage.

`2017年 5月 18日 最初の公な作業草案＠~TR/2017/WD-css-logical-1-20170518/$ までの，それ以前の編集者草案からの変更点 ◎ Changes between the earlier Editors Drafts and the 18 May 2017 First Public Working Draft include:

すべての~propは、 親ではなく要素~自身に指定された`書字~mode$を利用して，~cascadeするようにした。 ◎ Making all properties cascade using the writing mode specified on the element, not on its parent.

`margin$p に類する略式~propの中での下位prop値の順序を， `inline-start^v が `inline-end^v より前になるようにした。 ◎ Making the ordering of longhands within margin-like shorthands put inline-start before inline-end.

~margin／~border／~padding用に［ `*-inline^p, `*-block^p ］略式~形を追加した。 ◎ Adding the *-inline and *-block shorthand forms for margins/borders/padding.

各種 `offset-*^p ~propを `inset-*^p に改称した上で、 論点となる課題を付与した。 ◎ Renaming the offset-* properties to inset-* and marking an issue for discussion.

序論~節を追加した。 ◎ Adding an Introduction section.

各種用語を CSS Writing Modes の現在のそれらに更新した。 ◎ Updating to current terminology of CSS Writing Modes.

諸々の注釈文を整理した。 ◎ Miscellaneous prose cleanup.

~privacyの考慮点

この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new privacy considerations have been reported on this specification.

~securityの考慮点

この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new security considerations have been reported on this specification.