CSS によるボックスの整列 — CSS Box Alignment Module Level 3

1.1. ~module間の相互作用

この~moduleは、いくつかの新たな整列~能力を塊~layout~model（ `CSS2$r 視覚~整形~model, 視覚~整形~modelの詳細 ）に追加し、これらの~propと［ `vertical-align$p を利用することによる~table~cell内容の整列（ `CSS2$r ~tableの高さ ） ］との相互作用を定義する。 ◎ This module adds some new alignment capabilities to the block layout model described in [CSS2] chapters 9 and 10 and defines the interaction of these properties with the alignment of table cell content using vertical-align, as defined in [CSS2] chapter 17.

これらの~propと［ 格子~layout `CSS-GRID-1$r ／ ~flex~layout `CSS-FLEXBOX-1$r ］との相互作用は、それらの~moduleにて定義される。 ここでの~prop定義は、 `CSS-FLEXBOX-1$r によるそれに取って代わる（そこでの とり得る値は，ここでの値の部分集合である）。 ◎ The interaction of these properties with Grid Layout [CSS-GRID-1] and Flexible Box Layout [CSS-FLEXBOX-1] is defined in their respective modules. The property definitions here supersede those in [CSS-FLEXBOX-1] (which have a smaller, earlier subset of permissible values).

この~moduleにおけるどの~propも `first-line^pe ／ `first-letter^pe 疑似要素には適用されない。 ◎ No properties in this module apply to the ::first-line or ::first-letter pseudo-elements.

1.2. 値

【 この節の内容は CSS 日本語訳 共通ページ に委譲 】

1.3. 部分的~実装

この~moduleにおける特色機能の~supportは、［ それに影響される種々の~layout~modelに対応する様々な実装~段階の下で，配備されることになる ］と予期されるので、［ 未~supportの~keywordを無効として扱うよう要求する 部分的~実装のための規則 ］は，次に該当する整列~keyword 【, および それを値にとる~prop，の組】 にも適用されることをここに明確化しておく ⇒ 実装が~supportする~layout~moduleのうち，次に該当するものが一つでもある ⇒ その~layoutにおいて、当の~keywordを値にとる~propを一般には~supportするが，その~propに対する当の~keywordによる特色機能は ~supportしていない。 ◎ Since it is expected that support for the features in this module will be deployed in stages corresponding to the various layout models affected, it is hereby clarified that the rules for partial implementations that require treating as invalid any unsupported feature apply to any alignment keyword which is not supported across all layout modules to which it applies for layout models in which the implementation supports the property in general.

4.1. 位置的~整列： `center^v, `start^v, `end^v, `self-start^v, `self-end^v, `flex-start^v, `flex-end^v, `left^v, `right^v ~keyword

各種 `位置的~整列@ ~keywordは、`整列対象$の位置を，その`整列~容器$を基準に指定する。 ◎ The positional alignment keywords specify a position for an alignment subject with respect to its alignment container.

各種~値の意味は、値を利用する~propが対象にしている軸~沿いにおいて： ◎ Values have the following meanings:

`center@v

`整列対象$を，その`整列~容器$の中で中央寄せにする。 ◎ Centers the alignment subject within its alignment container.

`start@v

`整列対象$が `整列~容器$の始端~辺に接合されるように整列する。 ◎ Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.

`end@v

`整列対象$が `整列~容器$の終端~辺に接合されるように整列する。 ◎ Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.

`self-start@v

`*-content^p ~propには利用できない。

`整列対象$の始端~辺が `整列~容器$の同じ側の辺に接合されるように整列する。 ◎ Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side in the appropriate axis.

`self-end@v

`*-content^p ~propには利用できない。

`整列対象$の終端~辺が `整列~容器$の同じ側の辺に接合されるように整列する。 ◎ Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side in the appropriate axis.

`flex-start@v

`flex-end@v

これらの値が利用されるのは、~flex~layoutに限られる。 `CSS-FLEXBOX-1$r ◎ Only used in flex layout. [CSS-FLEXBOX-1]＼

`整列~容器$ — すなわち`~flex容器$ — の各~辺のうち［ 次に与える側にあって，~propが対象にする軸~沿いにある方 ］に，`整列対象$が接合されるように整列する：

• `flex-start$v に対しては、`主-始端$, または`交叉-始端$
• `flex-end$v に対しては、`主-終端$, または`交叉-終端$

［ `flex-start$v ／ `flex-end$v ］値が~flex整形~文脈の外側で利用されたとき — すなわち、次に該当するとき — の挙動は［ `start$v ／ `end$v ］と同じになる：

• ~flex駒でない~box（または、~flex容器の子であって絶対位置された~boxの静的位置を決定するときなど，~flex駒を装う~box）上で，`自己-整列~prop$に利用されたとき
• ~flex容器でない~box上で，`内容-分布~prop$に利用されたとき

◎ Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. ◎ When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties. ◎ flex-end ◎ Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. ◎ When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.

`left@v

`right@v

`整列~容器$の各~辺のうち［ 次に与える側にあって，適切な軸にある方 ］に，`整列対象$が接合されるように整列する：

• `left$v に対しては、`行-左端$, または（物理的）`左端$
• `right$v に対しては、`行-右端$, または（物理的）`右端$

~propが対象にする軸が 左端↔右端 軸と平行でない場合、これらの値は `start$v と同じに挙動する。

◎ Aligns the alignment subject to be flush with the alignment container’s line-left or physical left edge, whichever is in the appropriate axis. ◎ If the property’s axis is not parallel with either left↔right axis, this value behaves as start. ◎ right ◎ Aligns the alignment subject to be flush with the alignment container’s line-right or physical right edge, whichever is in the appropriate axis. ◎ If the property’s axis is not parallel with either left↔right axis, this value behaves as start.

これらの値の一部は、次の 2 つの文法~項を利用して表現される： ◎ Two grammar terms are used to denote certain subsets of these values:

`self-position$t

この集合は、［ `justify-self$p ／ `align-self$p ］から利用され、~boxをその`整列~容器$の中で整列する。 加えて、 `justify-items$p ／ `align-items$p からも（ `justify-self$p ／ `align-self$p に対する既定の値を指定するために）利用される。 ◎ This set is used by justify-self and align-self to align the box within its alignment container, and also by justify-items and align-items (to specify default values for justify-self and align-self).

`self-position@t
    = `center$v
    | `start$v
    | `end$v
    | `self-start$v
    | `self-end$v
    | `flex-start$v
    | `flex-end$v;

`content-position$t

この集合は、［ `justify-content$p ／ `align-content$p ］から利用され、~boxの中で~box自身の内容を整列する。 ◎ This set is used by justify-content and align-content to align the box’s contents within itself.

`content-position@t
    = `center$v
    | `start$v
    | `end$v
    | `flex-start$v
    | `flex-end$v;

注記： ［ `left$v, `right$v ］は、［ `self-position$t, `content-position$t ］からは除外される — これらは［ `justify-content$p ／ `justify-self$p ／ `justify-items$p ］用の妥当な位置的~整列~値であるが， `align-*^p には許容されないので。 これらの値は、代わりに `justify-*^p ~propの文法に明示的に含められている。 ◎ Note: left and right are excluded from <self-position> and <content-position>, despite being valid positional alignment values for justify-content/justify-self/justify-items, because they are not allowed in the align-* properties. They are instead explicitly included in the justify-* properties’ grammars.

`直交~flow$の下での `start$v, `end$v と縦横 両~軸の~~関係をもっと解りやすくする。 ◎ Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows.

4.2. 基底線の整列： `baseline^v ~keywordと `first^v／`last^v 改変子

`CSS-WRITING-MODES-3$r の 基底線 — 序論 も見よ。 ◎ See CSS Writing Modes 3 §4.1 Introduction to Baselines.

各種 `基底線~整列@ は、同じ`整列~文脈$を共有する複数の`整列対象$たち（同じ~rowの中の各~cellなど）を［ 互いの`整列~基底線$が合致するように整列させる ］ような，位置的~整列の一種である。 `基底線共有~group$における`整列対象$の位置が`基底線~整列$により全部的に拘束されない場合（すなわち，当の`整列~容器$の中で，`基底線~整列$は保守しつつ，ズラすこともできる）、それらの整列対象は、各自の`基底線~整列$を保全しつつ，可能な限り`~fallback整列-$される。 ◎ Baseline alignment is a form of positional alignment that aligns multiple alignment subjects within a shared alignment context (such as cells within a row) by matching up their alignment baselines. If the position of the alignment subjects within a baseline-sharing group is not fully constrained by baseline alignment (i.e., they could be shifted within their respective alignment containers while maintaining baseline-alignment), they are fallback-aligned insofar as possible while preserving their baseline alignment.

各種 `基底線~整列$~keywordは、文法においては `baseline-position$t で表現される： ◎ The baseline alignment keywords are represented with the <baseline-position> grammar term:

`baseline-position@t = [ `first$v | `last$v ]? `baseline$v

値［ `first$v ／ `last$v ］は、~boxの【~propが対象にする軸における】 `基底線~整列~選好@ を与え、省略時の既定は `first^v になる。 ◎ The first and last values give a box a baseline alignment preference: either “first” or “last”, respectively, defaulting to “first”.

各種~値の意味は、値を利用する~propが対象にしている軸~沿いにおいて： ◎ Values have the following meanings:

`baseline@v

下に定義する `first baseline$v に算出される。 ◎ Computes to first baseline, defined below.

`first baseline@v

~boxが `最初の基底線による整列@ に関与するよう，指定する： ［ ~boxの`最初の基底線~集合$の`整列~基底線$ ］と［ ~boxが属する`基底線共有~group$の対応する基底線 ］とが，整列されることになる。 詳細は、`基底線による~boxたちの整列-法$を見よ。 ◎ Specifies participation in first-baseline alignment: aligns the alignment baseline of the box’s first baseline set with the corresponding baseline of its baseline-sharing group. See §9.3 Aligning Boxes by Baseline for more details.

この値に対する`~fallback整列$は `start$v とする。 ◎ The fallback alignment for first baseline is start.

`last baseline@v

~boxが `最後の基底線による整列@ に関与するよう，指定する： ［ ~boxの`最後の基底線~集合$の`整列~基底線$ ］と［ ~boxが属する`基底線共有~group$の対応する基底線 ］とが，整列されることになる。 詳細は、`基底線による~boxたちの整列-法$を見よ。 ◎ Specifies participation in last-baseline alignment: aligns the alignment baseline of the box’s last baseline set with the corresponding baseline of its baseline-sharing group. See §9.3 Aligning Boxes by Baseline for more details.

この値に対する`~fallback整列$は `safe end^v とする。 ◎ The fallback alignment for last baseline is safe end.

これらの値が `align-content$p に指定された場合、`基底線による内容-整列$を誘発する — すなわち、内容~boxの中で~boxの内容をズラすことに加え，~box自身の~sizingにも影響し得る。 基底線による内容-整列 節を見よ。 ◎ When specified for align-content, these values trigger baseline content-alignment, shifting the content of the box within its content box, and may also affect the sizing of the box itself. See §5.4 Baseline Content-Alignment.

これらの値が `align-self$p ／ `justify-self$p に指定された場合、`基底線による自己-整列$を誘発する — すなわち、~box全体をその容器の中でズラすことに加え，その容器の~sizingにも影響し得る。 基底線による自己-整列 節を見よ。 ◎ When specified for align-self/justify-self, these values trigger baseline self-alignment, shifting the entire box within its container, which may affect the sizing of its container. See §6.4 Baseline Self-Alignment.

同じ~box上の同じ軸に対し［ `基底線による内容-整列$と`基底線による自己-整列$ ］の 両者とも指定された場合、その軸においては，`基底線による自己-整列$のみが尊守され、 その軸における内容-整列は `start$v として扱われ~MUST。 ◎ If both baseline content-alignment and baseline self-alignment are specified in the same axis on the same box, only baseline self-alignment is honored in that axis; the content-alignment in that axis must be treated as start.

画像による例を追加する必要あり。 ◎ Add example images here.

属する`整列~文脈$がない~boxに対しては、`~fallback整列$が利用される。 例えば、塊~boxの `align-content$p に `baseline$v が指定された場合、 `start^v による整列に~fall-backする。 `~fallback整列$は、`整列~容器$の中で`基底線共有~group$を整列するためにも利用される。 ◎ If a box does not belong to a shared alignment context, then the fallback alignment is used. For example, align-content: baseline on a block box falls back to start alignment. The fallback alignment is also used to align the baseline-sharing group within its alignment container.

注記： CSSOM は `first baseline$v を `baseline$v に直列化する — これら等価であり, 後者の方が短いので。 CSSOM による ~CSS値の直列化-法 を見よ。 ◎ Note: Because they are equivalent, and baseline is shorter, the CSSOM serializes first baseline as baseline. See CSSOM 1 §5.7.2 Serializing CSS Values.

注記： ある面で関係する `vertical-align$p ~propに対しては、 CSS2.1 による一貫性のない設計に因り， `baseline$v は `first baseline$v と等価でない — 行内level~boxの`基底線~整列~選好$は `display$p に依存するので（例えば `inline-block$v は，最後の基底線を既定で利用する一方で、 `inline-table$v は，最初の基底線を既定で利用する）。 ◎ Note: For the somewhat-related vertical-align property, due to inconsistent design decisions in CSS2.1, baseline is not equivalent to first baseline as an inline-level box’s baseline alignment preference depends on display. (E.g., inline-block uses its last baseline by default, while inline-table uses its first baseline by default.)

4.3. 分布型の整列： `stretch^v, `space-between^v, `space-around^v, `space-evenly^v ~keyword

各種 `分布型の整列@ 値は、容器の余分の空間を`整列対象$たちに分散するために， `justify-content$p ／ `align-content$p にて利用される。 ◎ The distributed alignment values are used by justify-content and align-content to disperse a container’s extra space among its alignment subjects.

空間をこの仕方で配分できない場合、これらの値は その`~fallback整列$に従って挙動する。 各 分布~値には、既定の`~fallback整列$が結付けられる。 （この~moduleの将来~levelでは、`~fallback整列$を明示的に指定することも許容され得る。） ◎ When space cannot be distributed in this way, these values behave as their fallback alignment. Each distribution value an associated default fallback alignment. (A future level of this module may allow the fallback alignment to be specified explicitly.)

`space-between@v

`整列対象$たちは、`整列~容器$内で均等に分布される。 最初最後の`整列対象$は，`整列~容器$の同じ側の辺に接合されるように置かれ、残りの`整列対象$たちは，隣接するどの 2 つの`整列対象$の合間も同じアキになるように分布される。 ◎ The alignment subjects are evenly distributed in the alignment container. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same.

`space-between^dgm

この値に対する既定の`~fallback整列$は `flex-start$v とする。 （ ~flex~layout以外の~layout~mode下では、 `flex-start$v は `start$v に一致する。 ） ◎ The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)

`space-around@v

`整列対象$たちを、最初最後の`整列対象$の［ 前／後 ］に，他の整列対象の合間の半分の空間を与えることを除いて， `space-between$v のときと同様に分布させる。 ◎ The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same, and the spacing before the first and after the last alignment subject is half the size of the other spacing.

`space-around^dgm

この値に対する既定の`~fallback整列$は `center$v とする。 ◎ The default fallback alignment for this value is center.

`space-evenly@v

`整列対象$たちを、最初最後の`整列対象$の［ 前／後 ］に，他の整列対象の合間と同じ空間を与えることを除いて， `space-between$v のときと同様に分布させる。 ◎ The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

`space-evenly^dgm

この値に対する既定の`~fallback整列$は `center$v とする。 ◎ The default fallback alignment for this value is center.

`~stretchAC@v

`整列対象$たちの合計~sizeが`整列~容器$の~sizeより小さい場合に、合計~sizeが`整列~容器$を正確に埋めるように，［ `整列対象$たちのうち，~sizeが `auto^v にされているもの ］の~sizeを，その［ `max-height$p ／ `max-width$p ］（あるいは等価な機能性）により課される拘束は守りつつ，等しく増やす（比例的にではなく）。 ◎ If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

`space-stretch^dgm

この値に対する既定の`~fallback整列$は `flex-start$v とする。 （ ~flex~layout以外の~layout~modeの下では `flex-start$v は `start$v と一致する。 ） ◎ The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)

これらの値は、文法においては `content-distribution$t で表現される： ◎ These values are represented with the <content-distribution> grammar term:

`content-distribution@t
    = `space-between$v
    | `space-around$v
    | `space-evenly$v
    | `~stretchAC$v

4.4. ~overflow時の整列： `safe^v, `unsafe^v ~keyword と~scroll安全用の制限-

`整列対象$が`整列~容器$より大きい場合，容器を~overflowすることになる。 整列~modeによっては、この状況でも その~modeを尊守すると，~access不能な部分が生じかねない： 例えば、中央寄せにされている~sidebarの内容が，その容器の中で~overflowする場合、~boxの一部が，表示域の始端~辺を過ぎて~scrollできない所に はみ出るかもしれない。 ◎ When the alignment subject is larger than the alignment container, it will overflow. Some alignment modes, if honored in this situation, may cause data loss: for example, if the contents of a sidebar are centered, when they overflow they may send part of their boxes past the viewport’s start edge, which can’t be scrolled to.

`overflow-position@t = `unsafe$v | `safe$v

`safe@v

`整列対象$の~sizeが`整列~容器$を~overflowする場合、`整列対象$は，整列~modeが `start$v であったかのように整列される。 ◎ If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.

`unsafe@v

`整列対象$の［ `整列~容器$に対する相対的な~size ］に関わらず，所与の整列~値は尊守される。 ◎ Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.

（値が指定されていない場合） ◎ (no value specified)

`~overflow整列$が明示的に指定されていない場合の “既定の~mode” は、 `safe$v と `unsafe$v の融合になり，`整列対象$は：

• その`整列~容器$を~overflowすることは許容されるが、
• その最も近い先祖の`~scroll容器$の`~scroll可能な~overflow領域$も~overflowする（すなわち， “~scroll不能な” 領域まで拡がる）ことになる場合は、その方向における~overflowは，残りの~overflowを反対~側へ偏らせることにより制限される。

◎ If the overflow alignment isn’t explicitly specified, the default overflow alignment is a blend of "safe" and "unsafe" in that an overflowing alignment subject is allowed to overflow its alignment container, but if this would cause it to also overflow the scrollable overflow region of its nearest ancestor scroll container (thus extending into the "unscrollable" region), then its overflow in that direction is limited by biasing any remaining overflow to the opposite side.

“賢い” 既定の挙動の実装は，~web互換に（そうなることを希望し，およそそうなると見込まれるが）ならないかもしれないので、~UAは，この点について何かあれば，WG まで~feedbackを寄せるべきである。 “賢い” 既定の挙動を実装していない~UAは、 `unsafe$v のように挙動することが要求される。 ◎ It may not be Web-compatible to implement the “smart” default behavior (though we hope so, and believe it to be likely), so UAs should pass any feedback on this point to the WG. UAs that have not implemented the “smart” default behavior must behave as unsafe.

5.1. 内容の分布： `align-content^p, `justify-content^p ~prop

どの~layout~modeにおいても，`整列対象$と`整列~容器$の`書字mode$は、これらの `*-content^p ~propが設定された~boxのそれと`見做す$。 ◎ For all layout modes, the alignment subject and alignment container both assume the writing mode of the box the *-content property is set on.

5.2. 内容-分布 略式：`place-content$p ~prop

この`略式~prop$は、 `align-content$p, `justify-content$p 両~propを単独の宣言で設定する。 2 個の値は、順に前者, 後者の~propにあてがわれる。 2 個目の値が省略された場合、後者の~propには［ 1 個目の値が `baseline-position$t ならば `start$v ／ ~ELSE_ 1 個目の値 ］があてがわれる。 ◎ This shorthand property sets both the align-content and justify-content properties in one declaration. The first value is assigned to align-content. The second value is assigned to justify-content; if omitted, it is copied from the first value, unless that value is a <baseline-position> in which case it is defaulted to start.

5.3. ~overflowと~scroll位置

`~scroll容器$を~overflowする内容は、~scroll可能でない容器~内の内容と正確に同じ様に整列される。 しかしながら，`~scroll容器$上に`内容-分布~prop$が設定されたときは — 内容が~scroll不能な領域の中へズラされるのを防止するため — 容器の`~scroll可能な~overflow領域$の~zero座標（すなわち、その地点を超えた内容は，到達-不能になる）は，`整列対象$の左上隅に設定され、実質的に`初期~scroll位置$は変更される。 ◎ Content that overflows a scroll container is aligned exactly like content in a non-scrollable container. However, to prevent content from being shifted into the unscrollable region, when the content-distribution properties are set on a scroll container, the zero coordinate of its scrollable overflow region (that is, the point beyond which content is unreachable) is set to the top left corner of the alignment subject, effectively changing the initial scroll position.

例えば、~scroll可能な`~flex容器$の `justify-content$p が `flex-end^v （あるいは， `flex-flow$p が `row-reverse$v にされている下では `flex-start^v ）に設定されている場合、初期~時には，~scroll可能な区画の`主-終端$~辺まで~scrollされて表示されることになり、容器の内容は，容器の`主-始端$を~overflowする。 ◎ For example, if a scrollable flex container is set to justify-content: flex-end (or justify-content: flex-start with flex-flow: row-reverse), it will be initially displayed scrolled all the way to the main-end edge of the scrollable area, and its content will appear to overflow its main-start edge.

5.4. 基底線による内容-整列

~rowを連ねる様な~layout文脈に関与している（同じ`整列~文脈$を共有する）~boxたちの内容は、互いに基底線整列できる。 `基底線による内容-整列@ は、それらが属する`基底線共有~group$内の，各~boxの内容の`整列~基底線$を互いに整列するときに、実質的に~boxの~paddingを増やす。 ◎ The content of boxes participating in row-like layout contexts (shared alignment contexts) can be baseline-aligned to each other. Baseline content-alignment effectively increases the padding on the box to align the alignment baseline of its contents with that of other baseline-aligned boxes in its baseline-sharing group.

最初最後の`基底線による内容-整列$に関与する~boxたちの集合は、~layout~modelに依存する（以下， “／” は同順）： ◎ The set of boxes that participate in baseline content-alignment depends on the layout model:

~table~cell：◎ Table Cells:

次をいずれも満たすような~table~cellたち：

• ~spanする最も［ 始端／終端 ］側の~rowは、互いに同じである
• ~cellの`行内-軸$は~tableのそれと平行である
• `align-content$p の算出値は［ `first baseline$v ／ `last baseline$v ］

◎ A table cell participates in first (last) baseline content-alignment in its startmost (endmost) row if its inline axis is parallel to that of the table itself and its computed align-content is first baseline (last baseline).

注記： 同じ~colを共有する~cellどうしの`基底線による内容-整列$は、~supportされない。 しかしながら，将来~levelでは、十分な需要と実装者からの関心があれば，追加され得る。 ◎ Note: Baseline content-alignment of cells sharing a column is not supported; however this may be added in a future level if there is sufficient demand and implementer interest.

`~flex駒$：

次をいずれも満たすような`~flex駒$たち：

• 互いに同じ`~flex~line$内にある
• `align-content$p の算出値は［ `first baseline$v ／ `last baseline$v ］
• `行内-軸$は`主-軸$に平行である

◎ A flex item participates in first (last) baseline content-alignment in its flex line if its computed align-content is first baseline (last baseline) and its inline axis is parallel to the main axis.

`格子~駒$：

次をいずれも満たすような`格子~駒$たち：

• ~spanする最も［ 始端／終端 ］側の`格子~筋$ — `行内-軸$に平行な方 — は、互いに同じである
• `align-content$p の算出値は［ `first baseline$v ／ `last baseline$v ］

◎ A grid item participates in first (last) baseline content-alignment in its startmost (endmost) row or column (whichever is parallel to its inline axis) and if its computed align-content is first baseline (last baseline).

加えて，ある軸において~boxに`自己-整列$が適用される場合、~boxがその軸における`基底線による内容-整列$に関与するためには、【基底線による内容-整列と】~boxの `自己-整列~選好は協調して@ い~MUST — すなわち，~boxは、その軸に関連する`自己-整列~prop$ %P に関して，次を満たしてい~MUST： ◎ Additionally, if self-alignment applies to the box in an axis, in order to participate in baseline content-alignment in that axis it must also have a coordinated self-alignment preference; that is:

• %P の算出値は、~boxの`基底線~整列~選好$に応じて［ `first^v ならば `stretch^v か `self-start$v ／ `last^v ならば `stretch^v か `self-end$v ］である — ただし，この目的においては、値［ `start$v ／ `end$v ／ `flex-start$v ／ `flex-end$v ］は［ `self-start$v, `self-end$v ］のうち等価になる方を与えているものと扱われる。 ◎ If its baseline alignment preference is “first” (“last”), the relevant computed self-alignment property is either 'align-self/stretch or self-start (self-end''). For this purpose, the start, end, flex-start, and flex-end values are treated as either self-start or self-end, whichever they end up equivalent to.
• %P の使用値は、~boxの`~overflow整列$により影響されない（すなわち， %P の使用値は、`~overflow整列$が `unsafe$v であるときに得られる結果になる）。 ◎ Its used self-alignment is not affected by its overflow alignment. (That is, the used self-alignment is what would result from an unsafe overflow alignment.)

他の場合、~boxの`~fallback整列$を採るものとする。 ◎ It otherwise takes its fallback alignment.

正確な詳細は、`基底線による~boxたちの整列-法$を見よ。 `基底線による内容-整列$は、~boxの内在的~sizeを増やすこともある。 ◎ See §9.3 Aligning Boxes by Baseline for exact details. Baseline content-alignment can increase the intrinsic size of the box.

6.1. 行内-軸／主-軸 沿いの整列： `justify-self^p ~prop

~box（`整列対象$）を その包含塊（`整列~容器$）の中で `整列~容器$の［ `行内-軸$／~row軸／`主-軸$ ］沿いに，両端揃えにする — すなわち，~boxの`外縁~辺$は、`整列~容器$の中で，`整列~keyword$ 節にて述べたように整列される。 各種~値の意味は： ◎ Justifies the box (as the alignment subject) within its containing block (as the alignment container) along the inline/row/main axis of the alignment container: the box’s outer edges are aligned within its alignment container as described by its alignment value. Values have the following meanings:

`auto@v

［ 親がない~boxに対しては ／ 絶対位置された~boxの実際の位置を決定するときは ］ `~normalJS$v と同じに挙動する。 他の場合（絶対位置された~boxの静的位置を決定するときも含め）、親~boxの `justify-items$p の算出値（から `legacy$v ~keywordを（もし在れば）除いたもの）と同じに挙動する。 ◎ Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed justify-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).

`~normalJS@v

~layout~modeに対する “既定の” 整列を表現する。 その挙動は、下に述べるように，~layout~modeに依存する。 ◎ Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below.

`~stretchJS@v

対象の軸に応じて：

横方向の場合

［ ~boxの `width$p の算出値は `auto^v ］, かつ［ ~boxの `margin-left^p, `margin-right^p とも非 `~autoS$v ］ならば、~boxの使用~sizeを，次のように設定する：

• `min-width$p, `max-width$p により課される拘束は守りつつ、
• ~boxの外縁~size（横幅）は，`整列~容器$を埋めるに必要とされる長さに可能な限り近くする

縦方向の場合

［ `height$p, `margin-top^p, `margin-bottom^p, `min-height$p, `max-height$p, 縦幅 ］に関して，横方向の場合と同様とする。

◎ When the box’s computed width/height (as appropriate to the axis) is auto and neither of its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width.

この値に対する既定の`~fallback整列$は、一般には `flex-start$v とするが，`基底線~整列~選好$として［ `最初の基底線~集合$ ／ `最後の基底線~集合$ ］も~boxに指定されている場合は［ `self-start$v ／ `self-end$v ］とする。 ◎ Unless otherwise specified, this value falls back to flex-start generally, and to self-start or self-end if the box has also specified first baseline or last baseline baseline content-alignment (respectively) in the same axis.

注記： `~stretchJS$v ~keywordは、要素を その容器に収まるように縮短させる。 ◎ Note: The stretch keyword can cause elements to shrink, to fit their container.

`baseline-position$t

`基底線による自己-整列$を指示する — 次に挙げる各節に定義されるように： 基底線の整列~値, 基底線による自己-整列, 基底線~整列の詳細 ◎ Indicates baseline self-alignment, as defined in §4.2 Baseline Alignment: the baseline keyword and first/last modifiers, §6.4 Baseline Self-Alignment, and §9 Baseline Alignment Details.

`overflow-position$t? `self-position$t

`整列~keyword$ 節にて定義される。 ◎ Defined in §4 Alignment Keywords, above.

`~stretchJS$v 以外の値は、 `width$p／`height$p に対する値 `~autoS$v が `fit-content^v として扱われるようにする。 ◎ Values other than stretch cause a width/height of auto to be treated as fit-content.

注記： ~marginに対する `auto^v は、実質的に~margin区画の~sizeを調整するので， `justify-self$p より優先される。 ◎ Note: auto margins, because they effectively adjust the size of the margin area, take precedence over justify-self.

6.2. 塊-軸／交叉-軸 沿いの整列： `align-self^p ~prop

~box（`整列対象$）を その包含塊（`整列~容器$）の中で `整列~容器$の［ `塊-軸$／~col軸／`交叉-軸$ ］沿いに整列する： `整列~keyword$ 節に述べたように、~boxの`外縁~辺$が，その`整列~容器$の中で整列される。 各種~値の意味は： ◎ Aligns the box (as the alignment subject) within its containing block (as the alignment container) along the block/column/cross axis of the alignment container: the box’s outer edges are aligned within its alignment container as described by its alignment value. Values have the following meanings:

`auto@v

［ 親がない~boxに対しては ／ 絶対位置された~boxの実際の位置を決定するときは ］ `~normalAS$v と同じに挙動する。 他の場合（絶対位置された~boxの静的位置を決定するときも含め）、親~boxの `align-items$p の算出値（から `legacy$v ~keywordを（もし在れば）除いたもの）と同じに挙動する。 ◎ Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).

`~normalAS@v

下に定義されるように，~layout~modeに対する “既定の” 整列を表現する。 ◎ Represents the “default” alignment for the layout mode, as defined below.

`~stretchAS@v

`justify-self$p （ 行内-軸／主-軸の整列 節）に対するときと同じに定義される。 ◎ As defined for justify-self in §6.1 Inline/Main-Axis Alignment: the justify-self property.

`baseline-position$t

`基底線による自己-整列$を指示する — 次に挙げる各節に定義されるように： 基底線の整列~値, 基底線による自己-整列, 基底線~整列の詳細 ◎ Indicates baseline self-alignment, as defined in §4.2 Baseline Alignment: the baseline keyword and first/last modifiers, §6.4 Baseline Self-Alignment, and §9 Baseline Alignment Details.

`overflow-position$t? `self-position$t

`整列~keyword$ 節にて定義される。 ◎ Defined in §4 Alignment Keywords, above.

注記： ~marginに対する `auto^v は、実質的に~margin区画の~sizeを調整するので， `align-self$p より優先される。 ◎ Note: auto margins, because they effectively adjust the size of the margin area, take precedence over align-self.

6.3. 自己-整列： `place-self^p 略式~prop

この`略式~prop$は、 `align-self$p, `justify-self$p 両~propを単独の宣言で設定する。 値が 1 個だけ与えられた場合は，その値が両~propにあてがわれ、 2 個~与えられた場合は， 2 個目の値が後者の~propにあてがわれる。 ◎ This shorthand property sets both the align-self and justify-self properties in a single declaration. The first value is assigned to align-self. The second value is assigned to justify-self; if omitted, it is copied from the first value.

6.4. 基底線による自己-整列

~rowを連ねる様な~layout文脈に関与している（同じ`整列~文脈$を共有する）~boxたちは、互いを基底線整列できる。 `基底線による自己-整列@ は、同じ`基底線共有~group$に属する各~boxの内容の`整列~基底線$を互いに整列するため、実質的に，それらの~boxの~marginを増やす。 ◎ Boxes participating in row-like layout contexts (shared alignment contexts) can be baseline-aligned to each other. baseline self-alignment effectively increases the margins on the box to align its alignment baseline with that of other baseline-aligned boxes in its baseline-sharing group.

最初最後の`基底線による自己-整列$に関与する~boxたちの集合は、~layout~modelに依存する（以下， “／” は同順）： ◎ The set of boxes that participate in baseline self-alignment depends on the layout model:

`~flex駒$：

次をいずれも満たすような`~flex駒$たち：

• 互いに同じ`~flex~line$内にある
• `align-self$p ~propの算出値は［ `first baseline$v ／ `last baseline$v ］

詳細は `CSS-FLEXBOX-1$r を見よ。

◎ A flex item participates in first (last) baseline self-alignment in its flex line if its computed align-self is first baseline (last baseline). See [CSS-FLEXBOX-1] for details.

`格子~駒$：

次をいずれも満たすような`格子~駒$たち：

• ~spanする最も［ 始端／終端 ］側の`格子~row$は、互いに同じである
• `align-self$p ~propの算出値は［ `first baseline$v ／ `last baseline$v ］

次をいずれも満たすような`格子~駒$たち：

• ~spanする最も［ 始端／終端 ］側の`格子~col$は、互いに同じである
• `justify-self$p ~propの算出値は［ `first baseline$v ／ `last baseline$v ］

◎ A grid item participates in first (last) baseline self-alignment in its startmost (endmost) row or column if its align-self or justify-self property (respectively) computes to first baseline (last baseline).

正確な詳細は、`基底線による~boxたちの整列-法$を見よ。 `基底線による自己-整列$は、~boxが供与する内在的~sizeを増やすこともある。 ◎ See §9.3 Aligning Boxes by Baseline for exact details. Baseline self-alignment can increase the intrinsic size contribution of the box.

7.1. 行内-軸／主-軸 沿いの整列： `justify-items^p ~prop

この~propは、この~boxの整形~文脈に関与している すべての子~boxたち（匿名~boxも含む）に対する，既定の `justify-self$p を指定する。 各種~値の意味は： ◎ This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have the following meanings:

`legacy@v

この~keywordは、実質的に，値を子孫の中へ継承させる。 ◎ This keyword causes the value to effectively inherit into descendants.

この~keywordが［ `left$v ／ `right$v ／ `center$v ］~keywordを伴わずに現れた場合、算出値は，［ `justify-items$p の`継承値$が `legacy$v ~keywordを含むならば 継承値 ／ 他の場合は `normal^v ］になる。 ◎ If the legacy keyword appears on its own (without an accompanying left, right, or center keyword): if the inherited value of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal.

他の場合、 `justify-self$p: `auto^v にされた子は，［ `justify-items$p の値から `legacy$v ~keywordを除いた，整列~keyword ］のみを参照する。 これは、［ ~HTMLの［ `center^e 要素／ `align^a 属性 ］による，旧来の整列の挙動 ］を実装するために存在する。 ◎ When justify-self:auto references the value of justify-items, only the alignment keyword, not the legacy keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.

他の値は、特別に取扱われることなく，そのまま `justify-self$p から参照される。 ◎ Other values have no special handling and are merely referenced by justify-self.

7.2. 塊-軸／交叉-軸 沿いの整列： `align-items^p ~prop

この~propは、この~boxの整形~文脈に関与している すべての子~boxたち（匿名~boxも含む）に対する，既定の `align-self$p を指定する。 ◎ This property specifies the default align-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

この~propの値は、特別に取扱われることなく，そのまま `align-self$p から参照される。 ◎ Values have no special handling and are merely referenced by align-self.

7.3. 自己-整列： `place-items$p 略式~prop

この`略式~prop$は、 `align-items$p, `justify-items$p 両~propを単独の宣言で設定する。 値が 1 個だけ与えられた場合は，その値が両~propにあてがわれ、 2 個~与えられた場合は， 2 個目の値が後者の~propにあてがわれる。 ◎ This shorthand property sets both the align-items and justify-items properties in a single declaration. The first value is assigned to align-items. The second value is assigned to justify-items; if omitted, it is copied from the first value.

8.1. ~row／~colの側溝：`row-gap^p ／ `column-gap^p ~prop

これらの~propは、容器~内の各~駒~間に空間を追加する，固定~長さの `側溝@ を指定する — `内容-分布~prop$の `space-between$v ~keywordのような方式で、ただし残りの空間に対する割合分としてではなく，固定~sizeにより。 `column-gap$p ~propは、容器の`行内-軸$において各~boxを（`行内-軸$ ~marginと同様に）分離するような，各 “~col” 間のアキを指定する。 `row-gap$p ~propは、容器の`塊-軸$において各~boxを分離するような，各 “~row” 間のアキを指定する。 ◎ These properties specify fixed-length gutters between items in the container, adding space between them—in a manner to the space-between keyword of the content-distribution properties, but of a fixed size instead of as a fraction of remaining space. The column-gap property specifies spacing between “columns”, separating boxes in the container’s inline axis similar to inline-axis margin; while row-gap indicates spacing between “rows”, separating boxes in the container’s block axis.

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

`length-percentage$t

各［ “~row” ／ “~col” ］間の~gapを指定する。 どちらに適用されるかは、~layout~modeにより定義される — 詳細は以下の各 下位節を見よ。 ◎ Specifies a gap between “rows” or “columns”, as defined by the layout modes to which it applies; see subsections below for details.

負の値は無効。 ◎ Negative values are invalid.＼

`CSS-SIZING-3$r による 最小~size~prop, ~margin／~padding のときと同じく， 百分率は、内在的~size供与を決定するときには 0 を基準に解決されるが，~boxの内容を~lay-outするときには~boxの内容~boxを基準に解決される。 ◎ As in the min size properties and margins/paddings [CSS-SIZING-3], percentages resolve against zero for determining intrinsic size contributions, but resolve against the box’s content box when laying out the box’s contents.

`normal@v

`複柱~容器$上では、使用値 `1em^v を表現する。 他のすべての文脈においては、使用値は `0px^v になる。 ◎ The normal represents a used value of 1em on multi-column containers, and a used value of 0px in all other contexts.

側溝による効果は各~駒~間の最小アキであり、［ `justify-content$p ／ `align-content$p ］によるアキも追加され得る。 そのような追加の空間は、実質的に，`側溝$の~sizeを増やす。 ◎ Gutters effect a minimum spacing between items: additional spacing may be added by justify-content/align-content. Such additional space effectively increases the size of these gutters.

これらの~propの正確な取扱いは、~layout容器に応じて変わる： ◎ The exact handling of these properties varies by layout container:

`複柱~容器$

`column-gap$p は、隣接する `柱~box$間の`側溝$を指定する。 これが複柱~容器の~layoutにどう影響するかの詳細は `CSS-MULTICOL-1$r を見よ。 `row-gap$p は現在~適用されない。 ◎ column-gap specifes the gutter between adjacent column boxes. See [CSS-MULTICOL-1] for details on how this affects the layout of multicol elements. row-gap does not currently apply.

`~flex容器$

`主-軸$に適用されるときは（例： `flex-direction$p が `row$v にされた`~flex容器$に対する `column-gap$p ）、各~駒~間の最小アキを指示する（同じ~line内にある隣接する`~flex駒$の合間に固定~sizeの~marginが追加で挿入されるかのように）。 ◎ When applied to the main axis (e.g. column-gap in a row flex container), indicates minimum spacing between items (as if an additional fixed-size margin were inserted between adjacent flex items in a single line).

`交叉-軸$に適用されるときは（例： `flex-direction$p が `row$v にされた`~flex容器$に対する `row-gap$p ）、隣接する各`~flex~line$間の最小アキを指示する。 ◎ When applied to the cross axis (e.g. row-gap in a row flex container), indicates minimum spacing between adjacent flex lines.

`格子~容器$

［ `row-gap$p ／ `column-gap$p ］~propが`格子~容器$に指定されたときは、各［ `格子~row$ ／ `格子~col$ ］間の`側溝$を定義する。 精確な詳細は、 `CSS-GRID$r の 各種 側溝~prop 節を見よ。 ◎ The row-gap and column-gap properties, when specified on a grid container, define the gutters between grid rows and grid columns, respectively. See CSS Grid Layout 1 §10.1 Gutters: the row-gap, column-gap, and gap properties for precise details.

注記： ~table~boxにおいては、 `gap$p ~propを利用しても，各~cell間の分離を指定することはない。 代わりに `border-spacing$p ~propを利用する： その機能性は少し異なり、継承されることに加え，最も外側の~cellと~tableの~borderとの合間にも追加のアキを指定する（ `space-between$v よりも `space-evenly$v に似る）。 ◎ Note: Table boxes do not use the gap properties to specify separation between their cells. Instead, they use the border-spacing property, which has slightly different functionality: it inherits, and it also specifies the additional spacing between the outermost cells and the border of the table (similar to space-evenly rather than space-between).

8.2. ~gap略式~prop： `gap^p

この~propは、［ `row-gap$p, `column-gap$p ］を 1 個の宣言で設定する`略式~prop$である。 `column-gap$tp が省略された場合、 `row-gap$tp と同じ値が設定される。 ◎ This property is a shorthand that sets row-gap and column-gap in one declaration. If <‘column-gap’> is omitted, it’s set to the same value as <‘row-gap’>.

8.3. 旧来の~gap~prop： `grid-row-gap$p, `grid-column-gap$p, `grid-gap$p

Grid Layout ~moduleは、元々，自前の各種 `側溝$~propを備えていた — それらの~prop名が，既存の `row-gap$p ／ `column-gap$p に統一されるまでは。 旧来の内容との互換性のため、それらの旧来の~prop名も，別名として~supportされ~MUST： ◎ The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap/column-gap naming. For compatibility with legacy content, those legacy property names must be supported as aliases:

• ［ `grid-row-gap@p, `grid-column-gap@p, `grid-gap@p ］は、順に［ `row-gap$p, `column-gap$p, `gap$p ］用の略式~propとして扱われ~MUST。 ◎ grid-row-gap must be treated as a shorthand for the row-gap property ◎ grid-column-gap must be treated as a shorthand for the column-gap property ◎ grid-gap must be treated as a shorthand for the gap property
• これらの旧来の~propは、それぞれが別名としている~propと同じ文法をとり，値を 単にその~propに “転送-” し~MUST。 ◎ In all three cases, the legacy properties must take the same grammar as the property they are aliasing, and just "forward" the value to their aliased property.

9.1. ~boxの基底線~集合の決定-法

各~boxには、その中の~textの［ 最初最後の行l ］の`基底線~集合$に~~代表として対応する，［ `最初の基底線~集合@ ／ `最後の基底線~集合@ ］がある — これは、各 軸ごとに定義される。 `整列~基底線@ は，この集合から~~選ばれる一つであり、通例的には，`共有~整列~文脈$に結付けられている`支配的~基底線$がそれになる（ `CSS-INLINE-3$r の `alignment-baseline$p, `dominant-baseline$p を見よ）。 ◎ Each box, for a given axis, has a first baseline set (and last baseline set) that nominally corresponds to the baseline set of the first (last) line of text within the box. The alignment baseline is one of these, usually the dominant baseline associated with the shared alignment context. (See the dominant-baseline and alignment-baseline properties in [CSS-INLINE-3].)

所与の軸における，~boxの最初最後の`基底線~集合$は、~layout~modelごとに異なり，次に従って決定される（以下， “／” は同順）： ◎ The first and last baseline sets of a box are determined differently based on the layout model, as follows:

`塊~容器$

`基底線~集合$は、次のうち最初最後に来る方になる： ◎ The first (last) baseline set of a block container is＼

• `塊~容器$内の，`~flow内$にある最初最後の行l~boxの，最初最後の`支配的~基底線$から`生成-$されるもの。 ◎ generated from the dominant first (last) baseline of the first (last) in-flow line box in the block container,＼
• `塊~容器$内の，`~flow内$にある［ `塊level$の子であって, 最初最後の基底線~集合を供与するもの ］のうち，最初最後のものから得られるもの。 【最初最後の塊levelの子であって, 最初最後の基底線~集合も供与するもの… とも読めるが、どうもはっきりしない。】 ◎ or is taken from the first (last) in-flow block-level child in the block container that contributes a set of first (last) baselines, whichever comes first (last).

そのような行l~boxや子が無い場合、`基底線~集合$は無い。 ◎ If there is no such line box or child, then the block container has no baseline set.

`複柱~容器$

最初の`基底線~集合$は、次のうち最初に来る方になる： ◎ The first baseline set of a multi-column container is＼

• 最初の`柱~box$内の，`~flow内$にある最初の行l~boxの，最初の`支配的~基底線$から`生成-$されるもの。 ◎ generated from the dominant first baseline of the first in-flow line box in the first column box,＼
• `~flow内$にある［ `塊level$の子であって, 最初の基底線~集合を供与するもの ］のうち，最初のものから得られるもの。 【最初の塊levelの子であって, 最初の基底線~集合も供与するもの… とも読めるが、どうもはっきりしない。】 ◎ or is taken from the first in-flow block-level child that contributes a set of first baselines, whichever comes first.＼

そのような行l~boxや子が無い場合、最初の`基底線~集合$は無い。 ◎ If there is no such line box or child, then the multi-column container has no first baseline set.

`複柱~容器$には、最後の`基底線~集合$は無い。 ◎ Multi-column containers have no last baseline set.

~table

`基底線~集合$は、~tableの最初最後の~rowの，最初最後の`基底線~集合$になる。 ◎ The first (last) baseline set of a table box is the first (last) baseline set of its first (last) row.

`行内-塊$の最初最後の`基底線~集合$を見出すときは、~table~boxから供与される基底線は，すべて飛ばされ~MUST（これは、 `CSS2$r による旧来の挙動との過去互換のためにある）。 ◎ When finding the first (last) baseline set of an inline-block, any baselines contributed by table boxes must be skipped. (This quirk is a legacy behavior from [CSS2].)

~table~row

最初最後の基底線~集合は、~row内に，~row軸~沿いの［ `first baseline$v ／ `last baseline$v ］整列に関与する~cellがある場合は、それらの整列が遂行された上で，［ それらの~cellが共有する`整列~基底線$と, ~rowにて`可用な最初の~font$ ］から`生成-$される。 他の場合、［ ~row内の各~cellの内容~辺の中で［ 最も低い, 最も高い ］もの ］から`合成-$される `CSS2$r ◎ If any cells in the row participate in first baseline (last baseline) alignment along the row axis, the first (last) baseline set of the row is generated from their shared alignment baseline and the row’s first available font, after alignment has been performed. Otherwise, the first (last) baseline set of the row is synthesized from the lowest and highest content edges of the cells in the row. [CSS2]

`~flex容器$

`CSS-FLEXBOX-1$r の ~flex基底線 を見よ。 ◎ See Flex Baselines in [CSS-FLEXBOX-1].

`格子~容器$

`CSS-GRID-1$r の 格子~基底線 を見よ。 ◎ See Grid Baselines in [CSS-GRID-1].

~boxに対し，所与の単独の基底線 %基底線 から `基底線たちを生成する@ ときは、［ ~font設定群からの基底線~table, および その~boxにて`可用な最初の~font$ ］を利用して得られる基底線~集合を， %基底線 に整列する。 ◎ To generate baselines for a box from a single baseline, use the baseline table from the font settings and first available font of that box, and align that baseline set to the given single baseline.

［ 矩形 ／ 2 本の平行~線 ］から `基底線を合成-@ するときは、`行-下面$の線から `alphabetic^v 基底線を合成し，［ 矩形の対~辺 ／ 2 本の平行~線 ］の位置の平均から `central^v 基底線を合成する。 追加の基底線を合成するための規則は、 `CSS-INLINE-3$r による 基底線の合成-法 を見よ。 ◎ To synthesize baselines from a rectangle (or two parallel lines), synthesize the alphabetic baseline from the line-under line, and the central baseline by averaging the positions of the two edges or lines. See CSS Inline Layout 3 § Synthesizing Baselines for rules on synthesizing additional baselines.

合成~用に［ `行-下面$, `行-上面$ ］辺を決定するときには、一般に，［ ~boxの`書字mode$, 図形, その他の整列されている~obj ］が利用される。 しかしながら，`書字mode$の`塊~flow方向$が`整列~文脈$の軸に平行なときは、軸に互換な方の`書字mode$と見做され~MUST： ◎ In general, the writing mode of the box, shape, or other object being aligned is used to determine the line-under and line-over edges for synthesis. However, when that writing mode’s block flow direction is parallel to the axis of the alignment context, an axis-compatible writing mode must be assumed:

• `整列~文脈$を確立している~box %B の`塊~flow方向$が，`整列~文脈$の軸に直交する場合、 %B の`書字mode$を利用する。 ◎ If the box establishing the alignment context has a block flow direction that is orthogonal to the axis of the alignment context, use its writing mode.
• 他の場合、 `writing-mode$p は［［ `horizontal-tb$v, `vertical-lr$v ］のうち，~boxの自前の `writing-mode$p に直交する方 ］と見做す。 ◎ Otherwise, assume either horizontal-tb or vertical-lr writing-mode, whichever is orthogonal to the box’s own writing-mode.

~boxの基底線を見出す目的においては、［ ~box, および ~boxの子孫のうち`~flow内$にあるもの ］のうち，~scroll用の仕組み（ `overflow$p ~propを見よ）を伴うものは、その原点~位置に~scrollされていたかのように見なされ~MUST。 加えて，~boxは`~scroll容器$である事例では、結果の最初最後の基底線の位置が~boxの［ 終端／始端 ］~border辺を過ぎる場合には，~border辺まで寄せられるとする。 ◎ For the purposes of finding the baselines of a box, it and all its in-flow descendants with a scrolling mechanism (see the overflow property) must be considered as if scrolled to their origin. Furthermore, if, in the case of a scroll container box, the resulting position of a first (last) baseline is past a box’s end (start) border edge, its position is clamped to that border edge.

9.2. 基底線~整列の~group分け

基底線~整列に一緒に関与するような~boxたちは、 `基底線共有~group@ を成すものとされる。 ~boxたちは、次の両~条件とも満たす場合に限り，そのような~groupを成し得る： ◎ A baseline-sharing group is composed of boxes that participate in baseline alignment together. This is possible only if they

• それらが基底線整列されている軸に垂直な軸~沿いに，同じ`整列~文脈$を共有する。 （例えば， `align-self$p が `baseline^v にされた格子~駒は、格子の塊-軸~沿いに基底線整列するので，同じ~row内の他の駒とともに関与する。） ◎ Share an alignment context along an axis perpendicular to the axis they’re being baseline-aligned in. (For example, grid items with align-self: baseline are baseline-aligning along the grid’s block axis, and therefore participate with other items in their row.)
• それらの`基底線~整列~選好$は`互換$である（すなわち，整列させたい基底線は、それらが共有する整列~文脈の同じ側にある）。 ◎ Have compatible baseline alignment preferences (i.e., the baselines that want to align are on the same side of the alignment context).

次のいずれかに該当する~boxたちは、特定0の軸~沿いに，特定0の~boxにより確立される `整列~文脈@ を共有するとされる： ◎ Boxes share an alignment context, along a particular axis, and established by a particular box, when they are:

注記： 概念的には、行l~box内の行内level~boxたちも，自己-整列~文脈を共有し, 基底線共有~groupに関与するが、それらの基底線~整列に関わるのは `vertical-align$p に限られ，この~moduleに定義される各種~propは関わらない。 `CSS-INLINE-3$r を見よ。 ◎ Note: Conceptually, the inline-level boxes in a line box also share a self-alignment context and participate in a baseline-sharing group; however they only baseline-align in response to the vertical-align property, not any of the properties defined in this module. See [CSS-INLINE-3].

~boxが 複数の`共有~整列~文脈$にまたがる場合、それらのうち，当の軸~沿いの最も［ 始端／終端 ］側の整列~文脈のみに関与するものとする。 例えば， 3 本の~rowに~spanしている~table~cellは、それが~spanする最も［ 始端／終端 ］側の~row内にある~table~cellたちの［ `最初の基底線による整列$ ／ `最後の基底線による整列$ ］に関与する。 ◎ If a box spans multiple shared alignment contexts, then it participates in first (last) baseline alignment within its start-most (end-most) shared alignment context along that axis. For example, a table cell spanning three rows participates in first-baseline alignment with the table cells in the first row that it spans, or alternatively in last-baseline alignment with the table cells in the last row that it spans.

2 つの~boxの`基底線~整列~選好$は、互いの［ `塊~flow方向$, `基底線~整列~選好$ ］が両方とも同じか，両方とも反対ならば， `互換@ とされる。 ◎ The baseline alignment preferences of two boxes in a baseline-sharing group are compatible if they have: ◎ • the same block flow direction and baseline alignment preference ◎ • opposite block flow direction and opposite baseline alignment preference

9.3. 基底線による~boxたちの整列-法

同じ`基底線共有~group$ %~group に所属する［ `整列対象$たち, および それらの基底線~集合 ］が与えられた下で、`整列対象$たちは，次に従って基底線整列される： ◎ Given a set of alignment subjects and their baselines that all belong to a single baseline-sharing group, the alignment subjects are baseline-aligned as follows:

1. 先ず、 %~group の`整列~文脈$にて`可用な最初の~font$から %~group の基底線~tableを生成する。 加えて、この~tableとその鏡像とを，互いの `central^v 基底線が整列するように重層する。 これらが，`整列対象$たちが整列されることになる基底線 “格子” になる。 ◎ First, generate the baseline-sharing group’s baseline table from the first available font of the group’s alignment context and overlay also the mirror of this baseline table by aligning their central baselines. These are the baseline “grids” to which the alignment subjects will align.

2. 次に、各 `整列対象$に対し，`整列対象$に指定されている`整列~基底線$と［ %~group の［ 基底線~tableまたは その鏡像（`整列対象$の`行l方位$に合致する方） ］］【の中の同種の基底線】とを整列する†。 `整列対象$の`整列~基底線$は、他から指定されない限り（例えば `alignment-baseline$p ~propを介して），整列~文脈の`支配的~基底線$†【と同種の基底線】とする。

   【† 例えば、~boxに指定されている整列~基底線が `alphabetic^v ならば、~boxは，基底線~tableの中の `alphabetic^v 基底線と整列される。 支配的~基底線は、 `dominant-baseline$p で明示的に指定することもできる。 】

   ◎ Next, align each alignment subject by its specified alignment baseline to the group’s baseline table or its mirror, whichever matches the alignment subject’s line orientation. Unless otherwise specified (e.g. via the alignment-baseline property), the alignment baseline is the dominant baseline of the alignment context.
3. 指定された`基底線~整列~選好$に結付けられている`~fallback整列$に則って，当の`基底線共有~group$を`整列~容器$の中で位置させる。 最初最後の`基底線による内容-整列$に対しては、`整列~容器$の［ 始端／終端 ］内容~辺と`整列対象$の辺の合間に，［ `整列~文脈$内のすべての`整列~容器$の［ 始端／終端 ］~margin辺を整列する ］ために必要とされる，最小限空間を追加する — `基底線共有~group$の中での基底線~整列は保守しながら。 ◎ Position the aligned baseline-sharing group within the alignment container according to the fallback alignment associated with the specified baseline alignment preference. For first (last) baseline content-alignment, then add the minimum necessary extra space between the alignment container’s start (end) content edge and the alignment subject’s edge to align the start (end) margin edges of all the alignment containers in the alignment context while maintaining baseline alignment within the baseline-sharing group.