1. 序論
~INFORMATIVEこの仕様は、行内~flow内容が［ 要素の`排他~区画$の外側に回込める ］ようにする特色機能を，定義する。 ◎ This specification defines features that allow inline flow content to wrap around outside the exclusion area of elements.
2. 各種用語
- `排他~box@ （ `exclusion box^en ）, または 単に “排他体（ `exclusion^en ）”
- 他の~boxに対する`排他~区画$を定義するような ~box （ `CSS3BOX$r ）。 排他~boxは、自身による`排他~区画$を，自身の`包含塊$の `回込み文脈$に供与する。 要素が生成する~boxを排他~boxにするためには、 `wrap-flow$p ~propを利用する — ただし、 `float^p の算出値が `none^v 以外になる要素は，排他体にはならない。 ◎ A box ([CSS3BOX]) that defines an exclusion area for other boxes. The wrap-flow property is used to make an element’s generated box an exclusion box. An exclusion box contributes its exclusion area to its containing block’s wrapping context. An element with a float computed value other than none does not become an exclusion.
- 【 語 “排他体” は、排他~box, または排他~boxを生成する要素のいずれかを指す（同時に両方の意味を兼ねることもある）。 】
- `排他~区画@ （ `exclusion area^en ）
-
行内~flow内容を，`排他~box$の周りに排他するときに利用される区画。 `排他~区画$は、`排他~box$に対する`~border~box$に等価である。 ◎ The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the border box for an exclusion box.
CSS Shapes も実装する~UAにおいては、 ~border~boxに代わって， `shape-outside^p ~propが，`排他~区画$を定義する。 ◎ If a user agent implements both CSS Exclusions and CSS Shapes, the shape-outside property defines the exclusion area instead of the border box.
- `排他~要素@ （ `exclusion element^en ）, または 単に “排他体（ `exclusion^en ）”
- `排他~要素$は、浮動体でない, かつ `排他~box$生成するような，`塊level$の要素である。 要素は、その `wrap-flow$p ~propの算出値が `auto$v でないとき，`排他~box$を生成する。 ◎ An exclusion element is a block-level element which is not a float and generates an exclusion box. An element generates an exclusion box when its wrap-flow property’s computed value is not auto.
- 【 論理的には、 “`排他~box$生成する要素” と定義しても，同じ。 浮動体（ `float^p が非 `none^v ）でもあるような排他~要素や，塊levelでない排他~要素は存在し得ないので（ `wrap-flow$p ~propを見よ）。 】
- `回込み文脈@ （ `wrapping context^en ）
- ~boxの`回込み文脈$は、それに結付けられている`排他~box$たちから供与された`排他~区画$たちの集合である。 ~layoutにおいては、~boxの行内~flow内容は，~boxの`回込み区画$ — すなわち，~boxの`内容~区画$から，それらの`排他~区画$を除いた~~区域 — 内に包装される†。 ◎ The wrapping context of a box is a collection of exclusion areas contributed by its associated exclusion boxes. During layout, a box wraps its inline flow content in the wrapping area that corresponds to the subtraction of its wrapping context from its own content area.
- 【† より厳密には， `wrap-flow$p ~propの値に依存して，より制約された区域~内に収められる場合もある。 】
- ~boxは、自身の`包含塊$の`回込み文脈$を継承する — `wrap-through$p ~propを利用して，特にそれを再設定していない限り。 ◎ A box inherits its containing block’s wrapping context unless it specifically resets it using the wrap-through property.
- `内容~区画@ （ `content area^en ）
- ~boxの行内~flow内容の~layoutには、通常， 内容~区画 が利用される。 ◎ The content area is normally used for layout of the inline flow content of a box.
- `回込み区画@ （ `wrapping area^en ）
- `回込み文脈$に影響される~boxにおいて，その行内~flow内容の~layoutに利用される区画 — ~boxの`内容~区画$から，`回込み文脈$ 【を成す排他~区画たち】 を除いた~~区域として定義される。 ◎ The area used for layout of inline flow content of a box affected by a wrapping context, defined by subtracting the wrapping context from its content area.
- 要素の`内側@ （ `inside^en ）
- 要素の`外側@ （ `outside^en ）
- この仕様においては、要素の`内側$は、要素の子孫の DOM 内容を指し，`外側$は，それ以外の DOM 内容を指す。 ◎ In this specification, outside refers to DOM content that is not a descendant of an element while inside refers to the element’s descendants.
- 始端／終端 （ `start^en／`end^en ）【この項目は訳者による補完】
- この仕様における，“始端”／“終端” は、特に断らない限り，`行内~基底~方向$の始端／終端を指す。
- 行内 （ `inline^en ） 【この項目は訳者による推定】
- この仕様における， “行内~内容” ／ “行内~flow内容” の “行内” は、`行内level$を~~意味する（`不可分な行内$も含まれる）と見られる。
3. 排他体（排他~box）
`排他~要素$（排他体）は、［ 自身の`包含塊$の`回込み文脈$に供与する，`排他~区画$ ］を定義する。 その帰結として、排他体は，包含塊の子孫の~layoutに影響0する。 ◎ Exclusion elements define exclusion areas that contribute to their containing block’s wrapping context. As a consequence, exclusions impact the layout of their containing block’s descendants.
要素の行内~内容は、要素の`内容~区画$ 内に~lay-outされつつ，［ 要素に結付けられている`回込み文脈$に属する`排他~区画$ ］を回込む — 要素~自身も排他体である場合の，それによる`排他~区画$は除いて。 また、排他体どうしの互いの影響0は、 排他体たちの順序 節にて説明されるように `z-index$p ~propにより制御される。 ◎ Elements lay out their inline content in their content area and wrap around the exclusion areas in their associated wrapping context. If the element is itself an exclusion, it does not wrap around its own exclusion area and the impact of other exclusions on other exclusions is controlled by the z-index property as explained in the 'exclusions order' section.
3.1. 排他体の宣言法
要素は、その `wrap-flow$p ~propの算出値が `auto$v 以外であるとき，排他体になる。 ◎ An element becomes an exclusion when its wrap-flow property has a computed value other than auto.
3.1.1. `wrap-flow^p ~prop
◎名 `wrap-flow@p ◎値 `auto$v | `both$v | `start$v | `end$v | `minimum$v | `maximum$v | `clear$v ◎初 `auto$v ◎適 `塊level$の要素 ◎継 されない ◎百 受容しない ◎算 指定値 — ただし、 `float$p の算出値が `none^v でない要素に対しては `auto$v ◎ as specified except for element’s whose float computed value is not none, in which case the computed value is auto. ◎順 文法に従う ◎ア 離散的 ◎表終この~propに対する各種 値の意味は： ◎ The values of this property have the following meanings:
- `auto@v
- 排他体は作成されない。 行内~flow内容は、通例のように要素と相互作用する。 特に，要素が`浮動体$ `CSS21$r である場合、 【他の値が指定されたとしても，】 挙動は変化しない。 ◎ No exclusion is created. Inline flow content interacts with the element as usual. In particular, if the element is a float (see [CSS21]), the behavior is unchanged.
- `both@v
- 行内~flow内容は、排他体の［ 始端~辺, 終端~辺 ］いずれの周りにも~flowできる。 ◎ Inline flow content can flow on all sides of the exclusion.
- `start@v
- 行内~flow内容は，`排他~区画$の始端~辺の周りに~flowできる一方で、終端~辺の周りの区画は，空いたままにされ~MUST。 ◎ Inline flow content can flow around the start edge of the exclusion area but must leave the area next to the end edge of the exclusion empty.
- `end@v
- 行内~flow内容は，`排他~区画$の終端~辺の周りに~flowできる一方で、始端~辺の周りの区画は，空いたままにされ~MUST。 ◎ Inline flow content can flow around the end edge of the exclusion area but must leave the area next to the start edge of the exclusion empty.
- `minimum@v
- 行内~flow内容は，`排他~区画$の［ ~flow内容の包含塊の中で、始端, 終端のうち，可用な空間が狭い側の辺† ］の周りに~flowできる一方で、他方の辺の周りは，空いたままにされ~MUST。 ◎ Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty.
- 【 †両~側の空間が等しくなる場合の挙動は規定されていない（~UAに依存することになる）。 次項も同様。 】
- `maximum@v
- 行内~flow内容は，`排他~区画$の［ ~flow内容の包含塊の中で、始端, 終端のうち，可用な空間が広い側の辺 ］の周りに~flowできる一方で、他方の辺の周りは空いたままにされ~MUST。 ◎ Inline flow content can flow around the edge of the exclusion with the largest available space within the flow content’s containing block, and must leave the other edge of the exclusion empty.
- `clear@v
- 行内~flow内容は、~flow内容の`塊~進行~方向$において，排他体の 前／後 にしか~flowできない。 排他体の［ 始端／終端 ］辺の周りの区画は，空いたままにされ~MUST。 ◎ Inline flow content can only flow before and after the exclusion in the flow content’s block direction and must leave the areas next to the start and end edges of the exclusion empty.
要素~上の~propの算出値が `auto$v になる場合、要素は`排他体$にならない。 ◎ If the property’s computed value is auto, the element does not become an exclusion.
算出値が `auto$v 以外になる場合、要素は`排他体$になる。 その`排他~区画$は，要素の包含塊の`回込み文脈$に供与され、包含塊の子孫たちは，`排他~区画$を回込むようになる。 ◎ Otherwise, a computed wrap-flow property value of both, start, end, minimum, maximum or clear on an element makes that element an exclusion element. It’s exclusion area is contributed to its containing block’s wrapping context, causing the containing block’s descendants to wrap around its exclusion area.
排他体に関連する辺の決定法は、 “排他~区画” を回込んでいる内容の，`書字mode$ `CSS3-WRITING-MODES$r に依存する。 ◎ Determining the relevant edges of the exclusion depends on the writing mode [CSS3-WRITING-MODES] of the content wrapping around the 'exclusion area'.
`排他~要素$は、自身の内容に対し，新たな塊~整形~文脈 `CSS21$r を確立する。 ◎ An exclusion element establishes a new block formatting context (see [CSS21]) for its content.
上の図は、排他体たちが どう組合されるかを示している。 最外縁の~boxは、要素の内容~boxを表現する。 暗い灰色の~box［ `A^V, `B^V, `C^V, `D^V ］は、要素の`回込み文脈$に属する排他体たちを表現する。 これらに対する `wrap-flow$p の算出値は、順に［ `both$v, `start$v, `end$v, `clear$v ］になる。 明るい灰色の区画は、［ `wrap-flow$p 値の結果として，行内~layoutにおいて排他される ］ような，追加の区画を示す。 例えば， `B^V の右の区画は、右向き書字mode内容の行内~layoutには，利用できない — `B^V の `wrap-flow$p は `start$v なので。 ◎ The above figure illustrates how exclusions are combined. The outermost box represents an element’s content box. The A, B, C and D darker gray boxes represent exclusions in the element’s wrapping context. A, B, C and D have their respective wrap-flow computed to both, start, end and clear respectively. The lighter gray areas show the additional areas that are excluded for inline layout as a result of the 'wrap-flow’value. For example, the area to the right of B cannot be used for inline layout of left-to-right writing mode content because the wrap-flow for B is start.
背景が薄青色の区画は、［ 右向き書字modeである要素の行内~内容 ］の~layoutに，どの区画が可用になるかを示す。 明るい／暗い 灰色で表現される，すべての区画は、（右向き書字modeの）行内~内容の~layoutには可用でない。 ◎ The background blue area shows what areas are available for a left-to-right writing mode element’s inline content layout. All areas represented with a light or dark shade of gray are not available for (left-to-right writing mode) inline content layout.
`wrap-flow$p ~prop値が適用される，排他体である`格子~item$： ◎ The wrap-flow property values applied to exclusions as grid items.
<div id="~~格子">
<div id="~~右上" class="~~排他"></div>
<div id="~~左下" class="~~排他"></div>
<div id="~~内容">Lorem ipsum…</div>
</div>
<style type="text/css">
#~~格子 {
width: 30em;
height: 30em;
/* 各 升の~sizeが均一な 4 × 4 の格子 */
display: grid;
`grid$p: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
#~~右上 {
/* 左から 3 列目, 上から 2 段目， 1 × 1 の升を占める格子~item */
`grid-area$p: 3/2;
}
#~~左下 {
/* 左から 2 列目, 上から 3 段目， 1 × 1 の升を占める格子~item */
`grid-area$p: 2/3;
}
.~~排他 {
`wrap-flow$p: <下を見よ>
}
#~~内容 {
/* 格子~全体を占める格子~item */
`grid-area$p: 1/1/span 4/span 4;
}
</style>
【 この例の原文 CSS は `CSS3-GRID-LAYOUT$r の古い仕様に基づくと見られるので、修正を加えている。 】
次の図に，`wrap-flow$p ~propに対する各種 値による視覚的~描画を示す。 灰色の`格子~線$（罫）が，`格子~升$を作り、薄青色の区画は（`格子$により位置された）`排他~box$を表す： ◎ The following figures illustrate the visual rendering for different values of the wrap-flow property. The gray grid lines are marking the grid cells and the blue area is the exclusion box (positioned by the grid).
-
.~~排他{ `wrap-flow^p: `auto$v; }
-
.~~排他{ `wrap-flow^p: `both$v; }
-
.~~排他{ `wrap-flow^p: `start$v; }
-
.~~排他{ `wrap-flow^p: `end$v; }
-
.~~排他{ `wrap-flow^p: `minimum$v; }
-
.~~排他{ `wrap-flow^p: `maximum$v; }
-
.~~排他{ `wrap-flow^p: `clear$v; }
3.2. 排他体の視野と効果
排他体が影響するのは： ［［ 排他体の`包含塊$ ］から~descendする【子~boxである？】行内~flow内容, および 同じ包含塊のすべての子孫~要素の行内~flow内容 ］である。 排他体の包含塊の内側にある，すべての行内~flow内容が影響される。 `wrap-through$p ~propを利用すれば、要素の`外側$で定義される排他体による 【要素の内側の内容の~layoutに対する】 効果を止めることができる（ 排他体の伝播 節を見よ）。 ◎ An exclusion affects the inline flow content descended from the exclusion’s containing block (defined in CSS 2.1 10.1) and that of all descendant elements of the same containing block. All inline flow content inside the containing block of the exclusions is affected. To stop the effect of exclusions defined outside an element, the wrap-through property can be used (see the propagation of exclusions section below).
`position$p : `fixed^v にされた排他体に対する包含塊は、根~要素により確立されることに留意。 ◎ As a reminder, for exclusions with position:fixed, the containing block is established by the root element.
3.3. 排他体の伝播
既定では、要素は，自身の親の`回込み文脈$を継承する。 言い換えれば、それ【要素~内容の~layout】は，要素の`外側$で定義される排他体の対象0になる【要素の行内~内容は，それらの排他体を回込む】。 ◎ By default, an element inherits its parent wrapping context. In other words it is subject to the exclusions defined outside the element.
`wrap-through$p ~propを `none$v に設定すると、要素は自身の親の`回込み文脈$を継承しなくなる。 言い換えれば、要素の`外側$で定義された排他体による~layoutの効果は、要素の子たちには及ばなくなる。 ◎ Setting the wrap-through property to none prevents an element from inheriting its parent wrapping context. In other words, exclusions defined outside the element, have not effect on the element’s children layout.
要素の子孫により定義される排他体は、依然として 子孫の包含塊の`回込み文脈$に、【子孫による排他~区画を】供与する。 その包含塊が［［ 要素の子であって， `wrap-through$p の算出値が `none$v になるもの ］, または 要素~自身 ］【が生成するもの】である場合、排他体は，依然として，［ その包含塊【を生成する】要素 ］の子たちに効果が及ぶ。 ◎ Exclusions defined by an element’s descendants still contribute to their containing block’s wrapping context. If that containing block is a child of an element with wrap-through computes to none, or the element itself, then exclusion still have an effect on the children of that containing block element.
3.3.1. `wrap-through^p ~prop
◎名 `wrap-through@p ◎値 `wrap$v | `none$v ◎初 `wrap$v ◎適 `塊level$の要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 離散的 ◎表終この~propに対する各種 値の意味は： ◎ The values of this property have the following meanings:
- `wrap@v
- 要素は、自身の親~nodeの`回込み文脈$を継承する。 要素の子孫である行内~内容は、要素の`外側$†にて定義される排他体たちを回込む。 【† “継承-” なので、次項により継承が途切れる所までの “外側”。】 ◎ The element inherits its parent node’s wrapping context. Its descendant inline content wraps around exclusions defined outside the element.
- `none@v
- 要素は、自身の親~nodeの`回込み文脈$を継承しない。 要素の子孫である行内~内容が回込むのは、要素の`内側$にて定義される`排他~区画$に限られる。 ◎ The element does not inherit its parent node’s wrapping context. Its descendants are only subject to exclusion areas defined inside the element.
`wrap-through$p ~propを利用して，排他体の効果を制御する例： ◎ Using the wrap-through property to control the effect of exclusions.
<style type="text/css">
#~~格子 {
/* 4 × 4 の格子 */
display: grid;
`grid$p: 9fr 8fr 8fr 9fr / 1fr 1fr 1fr 1fr;
}
#~~真中 {
`grid-area$p: 2/2/span 2/span 2;
`wrap-flow$p: both;
background-color: rgba(220, 230, 242, 0.5);
}
#~~上半分 {
`grid-area$p: 1/1/span 4/span 2;
`wrap-through$p: wrap;
}
#~~下半分 {
`grid-area$p: 1/3/span 4/span 2;
`wrap-through$p: none;
}
</style>
<div id="~~格子">
<div id="~~真中"></div>
<div id="~~上半分">
Lorem ipsum dolor sit amet...
</div>
<div id="~~下半分">
Lorem ipsum dolor sit amet...
</div>
</div>
【 この例の原文 CSS は `CSS3-GRID-LAYOUT$r の古い仕様に基づくと見られるので、修正を加えている。 】
3.4. 排他体たちの順序
排他体たちは、塗り順序に従う（ `CSS21$r 付録 E を見よ）。 排他体は，文書における順序の逆順に適用される。 最後の排他体は，他のすべての排他体の手前に表れ【るように見え】、したがって［ 先行する他のすべての排他体や，同じ包含塊の子孫である要素 ］の行内~flow内容に影響する。 `有位置$な`排他~box$に対しては、 `z-index$p ~propを利用して順序付けを変更できる。 静的に位置された（ `position$p: `static^v ）排他体は、 `z-index$p ~propに影響されないので，塗り順序に従う。 ◎ Exclusions follow the painting order (See [CSS21] Appendix E). Exclusions are applied in reverse to the document order in which they are defined. The last exclusion appears on top of all other exclusion, thus it affects the inline flow content of all other preceding exclusions or elements descendant of the same containing block. The z-index property can be used to change the ordering of positioned exclusion boxes (see [CSS21]). Statically positioned exclusions are not affected by the z-index property and thus follow the painting order.
排他体たちの順序付け。 ◎ Ordering of exclusions.
<style type="text/css">
.exclusion {
`wrap-flow^p: both;
position: absolute;
width: 200px;
}
.~~左上 {
top: 10px;
left: 10px;
background-color: lightblue;
}
.~~真中 {
top: 90px;
left: 90px;
background-color: lightgreen;
}
.~~右下 {
top: 170px;
left: 170px;
background-color: pink;
}
</style>
<div class="exclusion ~~左上">
The top left div...
</div>
<div class="exclusion ~~真中">
The middle div...
</div>
<div class="exclusion ~~右下">
The bottom right div...
</div>
-
.~~真中 { `z-index^p: `auto^v; }
-
.~~真中 { `z-index^p: `1^v; }
CSS 排他体の処理ing~modelは不正？ ◎ Is the CSS exclusions processing model incorrect?
現在の草案は、衝突回避~modelを伴わないような，排他体の~modelを供する。 CSS における既存の排他~modelは、浮動体を利用している — それは［ 排他体, 衝突回避 ］の両~挙動を備える。 衝突~回避を伴わない排他体を許容することは有害になり得る懸念が提起されている — 特に、絶対位置された要素に対し。 考えるべき選択肢には、次の三種がある： ◎ The current draft provides a model for exclusions without a collision-avoidance model. The existing exclusion model in CSS uses floats, which have both exclusion and collision-avoidance behavior. Concerns have been raised that allowing exclusions without collision avoidance could be harmful, particularly with absolutely-positioned elements. Three options should be considered:
- 衝突~回避を伴わない位置決め~schemeでも、排他体たちを許容する。 ◎ Allow exclusions in positioning schemes with no collision avoidance.
- 衝突~回避を伴わない位置決め~schemeでは、排他体たちを不許可にする。 ◎ Disallow exclusions in positioning schemes with no collision avoidance.
- 衝突回避の挙動を伴わない位置決め~schemeに対し，それを定義した上で，この挙動を排他体に対し既定で利用する。 ◎ Define collision-avoidance behavior for positioning schemes without it, and use this behavior by default with exclusions.
3.5. 処理ing~model
3.5.1. 説明0
排他は、二~段階の処理で適用される： ◎ Applying exclusions is a two-step process:
- 段 1： 各 `回込み文脈$に対し，どの`排他~box$が属するか 【どの排他~区画が供与されるか】 を解決する。 ◎ Step 1: resolve exclusion boxes belonging to each wrapping context
-
段 2： 各 `回込み文脈$に対し，順々に†、それを解決して，包含塊を~lay-outする — すなわち： ◎ Step 2: resolve each wrapping context and lay out each containing block in turn:
- 段 2-A： 回込み文脈に属する`排他~box$たちの位置＆~sizeを解決する。 ◎ Step 2-A: resolve the position and size of exclusion boxes
- 段 2-B： `排他~区画$たちを回込むように，包含塊の内容を~lay-outする。 ◎ Step 2-B: lay out containing block, wrapping around each exclusion area
【† “各〜に対し，順々に（ each 〜 in turn ）”： 後述の例に見られるように、これは実際には， 段 2-B が再帰的に，描画~木の各~子に対し段 2 を呼び出すことを~~意味する。 】
3.5.2. 段 1： 各 回込み文脈に属する排他~boxの集合を解決する
この段では、~UAは，各 `排他~区画$がどの`包含塊$に属するかを決定する。 これは、包含塊の定義, および `wrap-flow$p の算出値が `auto$v でない要素に基づく，単純な段である。 ◎ In this step, the user agent determines which containing block each exclusion area belongs to. This is a simple step, based on the definition of containing blocks and elements with a computed value for wrap-flow that is not auto.
3.5.3. 段 2： 回込み文脈を解決して各 包含塊を~lay-outする
この段では、~UAは、`描画~木$ `CSS21$r の上層から順に，各 包含塊を二~段に分けて処理する。 ◎ In this step, starting from the top of the rendering tree (see [CSS21]), the the agent processes each containing block in two sub-steps.
3.5.4. 段 2-A： 各 排他~boxの位置＆~sizeを解決する
`回込み文脈$における`排他~box$の位置＆~sizeを解決するとき、~layoutが要求されることもあれば，そうでないこともある。 例えば、`排他~box$が絶対的に位置され＆~sizeされている場合には，必要ないが、他の状況では，包含塊の内容を~lay-outすることが要求される。 ◎ Resolving the position and size of exclusion boxes in the wrapping context may or may not require a layout. For example, if an exclusion box is absolutely positioned and sized, a layout may not be needed to resolve its position and size. In other situations, laying out the containing block’s content is required.
この~layoutが要求されるときは、どの`排他~区画$も適用することなく，実施される。 言い換えれば、包含塊は，`回込み文脈$を伴わずに~lay-outされる。 ◎ When a layout is required, it is carried out without applying any exclusion area. In other words, the containing block is laid out without a wrapping context.
この段は、与えられた`回込み文脈$に属する すべての`排他~box$に対し，それぞれの位置＆~sizeを産生する。 各 `排他~box$は，最上層から順々に処理され、算出された各 `排他~区画$が，`包含塊$の`回込み文脈$に供与される。 ◎ Step 2-A yields a position and size for all exclusion boxes in the wrapping context. Each exclusion box is processed in turn, starting from the top-most, and each exclusion area is computed and contributed to the containing block’s wrapping context.
この段においては、 `position$p : `fixed^v にされた `排他~box$の位置＆~sizeを解決するときは，~scrollingは無視される。 ◎ Scrolling is ignored in this step when resolving the position and size of position: fixed exclusion boxes.
`包含塊$の`回込み文脈$が算出されたなら、その`回込み文脈$に属する すべての`排他~box$は、通常の~flowから外される。 ◎ Once the containing block’s wrapping context is computed, all exclusion boxes in that wrapping context are removed from the normal flow.
3.5.5. 段 2-B： 回込みが適用される包含塊を~lay-outする
~~最後に、包含塊の内容が，その行内~内容を［ `回込み文脈$の`排他~区画$ ］を回込むように、~lay-outされる。 ◎ Finally, the content of the containing block is laid out, with the inline content wrapping around the wrapping context’s exclusion area.
包含塊~自身が`排他~box$であるときは、 排他体たちの順序 による規則が，［ どの排他体が，~boxの行内／子孫の内容に影響するか ］を定義する。 ◎ When the containing block itself is an exclusion box, then rules on exclusions order define which exclusions affect the inline and descendant content of the box.
3.5.6. 処理ing~modelの例
この節では、排他体たちの処理ing~modelを，単純かつ［ ~layoutの依存関係と再~layoutの課題に取組むに十分な複雑さ ］を含むような例を用いて示す。 ◎ This section illustrates the exclusions processing model with an example. It is meant to be simple. Yet, it contains enough complexity to address the issues of layout dependencies and re-layout.
次の例における~code片には、文書の行内~内容に影響する二つの排他体がある： ◎ The code snippet in the following example has two exclusions affecting the document’s inline content.
<html>
<style>
#`d1@V {
position:relative;
height: auto;
color: #46A4E9;
border: 1px solid gray;
}
#`e1@V {
`wrap-flow^p: both;
position: absolute;
left: 50%;
top: 50%;
width: 40%;
height: 40%;
border: 1px solid red;
margin-left: -20%;
margin-top: -20%;
}
#`d2@V {
position: static;
width: 100%;
height: auto;
color: #808080;
}
#`e2@V {
`wrap-flow^p: both;
position: absolute;
right: 5ex;
top: 1em;
width: 12ex;
height: 10em;
border: 1px solid lime;
}
</style>
<body>
<div id="d1">
Lorem ipsusm ...
<p id="e1"></p>
</div>
<div id="d2">
Lorem ipsusm ...
<p id="e2" ></p>
</div>
</body>
</html>
以下の図に、上の例による［ 文書の DOM 木 ］, および［ 生成される`塊~box$たちからなる~layout木 ］を順に示す： ◎ The following figures illustrate: ◎ the document’s DOM tree ◎ the layout tree of generated block boxes
3.5.6.1. 段 1： 各 回込み文脈に属する排他~boxの集合を解決する
図には、各 要素に対応する~boxの ~layout木における包含~階層が， DOM 木から異なる様子が示されている。 例えば、［ `e1$V は 絶対的に位置されていて， `d1$V は 相対的に位置されている ］ので、 `e1$V から生成される~boxは、その包含塊である `d1$V ~box内で位置される。 一方で、 `e2$V も絶対的に位置にされているが，その包含塊は`初期~包含塊$である。 詳細は `CSS21$r, 10.1 節を見よ。 ◎ The figures illustrate how the boxes corresponding to the element sometimes have a different containment hierarchy in the layout tree than in the DOM tree. For example, the box generated by e1 is positioned in its containing block’s box, which is the d1-box, because e1 is absolutely positioned and d1 is relatively positioned. However, while e2 is also absolutely positioned, its containing block is the initial containing block (ICB). See the section 10.1 of the CSS 2.1 specification ([CSS21]) for details.
木に対する包含塊を算出した結果として、すべての要素について，その`回込み文脈$に属している~boxたちを決定できる： ◎ As a result of the computation of containing blocks for the tree, the boxes belonging to the wrapping contexts of all the elements can be determined:
- `html^e 要素に対する`回込み文脈$は、 ~box `e2$V を包含する： 以下， `回込み文脈 1@V と記す。 ◎ The wrapping context for the html element contains the e2 box: WC-1 (Wrapping Context 1)
- `body^e 要素に対する`回込み文脈$は、 `回込み文脈 1$V を継承する。 ◎ The wrapping context for the body element inherits the html element’s wrapping context: WC-1
- `d1$V に対する`回込み文脈$は、 `body^e 要素の`回込み文脈$ ＝ `回込み文脈 1$V を継承した上で，それに `e1$V ~box を追加する。 したがって，その回込み文脈は、［ `e1$V ~box, `e2$V ~box ］の二つからなる： 以下、 `回込み文脈 2@V と記す。 ◎ The wrapping context for d1 inherits the body element’s wrapping context and adds the e1-box to it. So the wrapping context is made of both the e1-box and the e2-box: WC-2
- `d2$V に対する`回込み文脈$は、 `回込み文脈 1$V を継承する。 ◎ The wrapping context for d2 inherits the body element’s wrapping context: WC-1
3.5.6.2. 段 2： 回込み文脈を解決して 包含塊を~lay-outする
この段では、 各~包含塊が順々に処理される。 各~包含塊に対し, （概念的に）二つの段階を経る： ◎ In this step, each containing block is processed in turn. For each containing block, we (conceptually) go through two phases:
- `回込み文脈$を解決する： すなわち、それに属する各 排他体【排他~区画】の位置＆~sizeを解決する。 ◎ resolve the wrapping context: resolve the position and size of its exclusions
- 包含塊を~lay-outする。 ◎ lay out the containing block
上の例では、次の各~段に分けられる： ◎ In our example, this breaks down to:
- 【初期~包含塊の回込み文脈】 `回込み文脈 1$V に属している排他体たちの 位置＆~sizeを解決する： その結果を以下、 `解決-済み回込み文脈 1^V と記す。 ◎ resolve the position and size of the exclusions belonging to WC-1: RWC-1 (Resolved Wrapping Context 1).
-
`初期~包含塊$（の内容）を~lay-outする： ◎ lay out the initial containing block (i.e., lay out its content):
- `html^e 要素の`回込み文脈$を解決する： （継承により） `解決-済み回込み文脈 1^V になる。 ◎ resolve the html element’s wrapping context: RWC-1
-
`html^e 要素を~lay-outする： ◎ lay out the html element:
- `body^e 要素の`回込み文脈$を解決する： （継承により） `解決-済み回込み文脈 1^V になる。 ◎ resolve the body element’s wrapping context: RWC-1
-
`body^e 要素を~lay-outする： ◎ lay out the body element:
- `d1$V 要素の`回込み文脈$（ ＝ `回込み文脈 2$V ）を解決する： ◎ resolve the d1 element’s wrapping context: RWC-2
- `d1$V 要素を~lay-outする。 ◎ lay out the d1 element
- `d2$V 要素の`回込み文脈$を解決する： （継承により） `解決-済み回込み文脈 1^V になる。 ◎ resolve the d2 element’s wrapping context: RWC-1
- `d2$V 要素を~lay-outする。 ◎ lay out the d2 element
3.5.6.2.1. `回込み文脈 1^V の解決-法
~layout木における最上層の`回込み文脈$は，排他体 `e2$V を包含しており、その位置＆~sizeは，解決される必要がある。 一般的に、排他体の位置＆~sizeを算出するためには，他の内容を~lay-outすることが要求されることもあれば，されないこともある。 この例では、排他体 `e2$V を~lay-outする必要はない — それは絶対的に位置されていて、その~sizeも~layoutせずに解決できるので。 この時点で、 `回込み文脈 1$V は解決され，行内~内容を~lay-outするときに利用できる。 ◎ The top-most wrapping context in the layout tree contains the e2 exclusion. Its position and size needs to be resolved. In general, computing an exclusion’s position and size may or may not require laying out other content. In this example, no content needs to be laid out to resolve the e2 exclusion’s position because it is absolutely positioned and its size can be resolved without layout either. At this point, RWC-1 is resolved and can be used when laying inline content out.
3.5.6.2.2. `回込み文脈 2^V の解決-法
処理は類似的である： 排他体 `e1$V の位置を解決する必要があり、ここでも， `e1$V の包含塊（ `d1$V ）の~layoutが要求され得る — この事例では、~~実際に該当する： `e1$V の位置＆~sizeは、 `d1$V ~boxの~sizeに相対的な百分率~長さであり，その解決-に依存するので。 そのため，まず `d1$V の~layoutが，`回込み文脈$を伴わずに（すなわち，排他を適用せずに）行われ、それにより `e1$V の~boxの位置＆~sizeが産生される。 ◎ The process is similar: the position of the e1 exclusion needs to be resolved. Again, resolving the exclusion’s position and size may require processing the containing block (d1 here). It is the case here because the size and position of e1 depend on resolving the percentage lengths. The percentages are relative to the size of d1’s box. As a result, in order to resolve a size for d1’s box, a first layout of d1 is done without any wrapping context (i.e., no exclusions applied). The layout yields a position and size for e1’s box.
この時点で， `e1$V, `e2$V のいずれも，その位置＆~sizeは解決されたので、 `回込み文脈 2$V は解決されたことになる。 ◎ At this point, RWC-2 is resolved because the position and size of both e1 and e2 are resolved.
上の処理ing例における要点の一つは、いったん要素の`回込み文脈$（に属する排他体たちの位置＆~size）が解決されたなら，それらの位置＆~sizeが，それ以上 処理されることはないことである — 要素の~sizeが，［ （ `回込み文脈 2$V に対するときのように）`回込み文脈$を考慮することなく行われる~layout ］と［ 解決された`回込み文脈$の下で行われる~layout ］との間で変化するとしても。 これが、［ `回込み文脈$の解決 ］と［ 包含塊の~layout ］との間の循環依存を，断ち切るものである。 ◎ The important aspect of the above processing example is that once an element’s wrapping context is resolved (by resolving its exclusions' position and size), the position and size of the exclusions are not re-processed if the element’s size changes between the layout that may be done without considering any wrapping context (as for RWC-2) and the layout done with the resolved wrapping context. This is what breaks the possible circular dependency between the resolution of wrapping contexts and the layout of containing blocks.
3.6. 浮動体と排他体
3.6.1. 類似性
浮動体と排他体は、行内~内容が そのいずれをも回込む点で，類似性がある。 しかしながら、この二つには大きな相違点がある。 ◎ There are similarities between floats and exclusions in that inline content wraps around floats and also wraps around exclusion areas. However, there are very significant differences.
3.6.2. 相違点
- 視野：
- 浮動体は文書~内でそれに後続する内容に適用される一方で、排他体は，自身の包含塊~内の内容に適用される。 ◎ scope. While floats apply to content that follows in the document, exclusions apply to content in their containing block.
- 位置決め：
- 浮動体は 行内~flowの一部であり、行l~box上に `float$p する。 作者は、浮動体が 行l~box上で どのように 右／左 へ移動するかを制御できる。 対照的に，排他体は、 `格子~layout$ `CSS3-GRID-LAYOUT$r `~flex~layout$ `CSS3-FLEXBOX$r その他の どの位置決め~schemeを利用して位置させることもできる。 ◎ positioning. Floats are part of the inline flow and float on the line box. Authors can control how the floats move on the line box, to the right or to the left. By contrast, exclusions can be positioned using any positioning scheme such as grid layout ([CSS3-GRID-LAYOUT]), flexible box ([CSS3-FLEXBOX]) or any other CSS positioning scheme.
- 関心の分離：
- 要素を浮動体にすることは、［ 要素の位置決め~schemeと, 行内~内容に対する効果 ］の両者を決定する。 要素を排他体にすることは、行内~内容に対する影響0のみを決定し，位置決め手法に対しては拘束を課さない。 ◎ separation of concerns. Making an element a float determines both its positioning scheme and its effect on inline content. Making an element an exclusion only determines its impact on inline content and does not impose constraints on its positioning method.
3.6.3. 相互運用性
3.6.3.1. 排他体に対する浮動体の効果
浮動体の効果は、排他体の位置決めにも，排他体の行内~内容の~layoutにも及ぶ。 例えば、排他体が行内boxであって，浮動体と同じ行l上にあるならば、その排他体の位置は、 段 2-A にて算出されるように，他の行内~内容と同様に，浮動体から影響0される。 ◎ Floats have an effect on the positioning of exclusions and the layout of their inline content. For example, if an exclusion is an inline-box which happens to be on the same line as a float, its position, as computed in Step 2-A will be impacted by the float, as is any other inline content.
3.6.3.2. 浮動体に対する排他体の効果
排他体の効果は、行内~内容に及ぶのと同様に，浮動体の位置決めにも及ぶ。 したがって、 段 2-B において，浮動体は、`排他~区画$を避けることになる。 ◎ Exclusions have an effect on the positioning of floats as they have an effect on inline content. Therefore, in Step 2-B, floats will avoid exclusion areas.