CSS Exclusions Module Level 1

3.1.1. `wrap-flow^p ~prop

この~propに対する各種 値の意味は： ◎ The values of this property have the following meanings:

`auto@v

排他体は作成されない。 行内~flow内容は、 通例通り要素と相互作用する。 特に，要素が`浮動体$ `CSS2$r である場合、 【他の値が指定されたとしても，】 挙動は変化しない。 ◎ No exclusion is created. Inline flow content interacts with the element as usual. In particular, if the element is a float (see [CSS2]), the behavior is unchanged.

`both@v

行内~flow内容は、 排他体の［ 始端~辺, 終端~辺 ］いずれの周りにも~flowできる。 ◎ Inline flow content can flow on all sides of the exclusion.

`start@v

行内~flow内容は，`排他~区画$の始端~辺の周りに~flowできる一方で、 終端~辺の周りの区画は，空いたままになるモノトスル。 ◎ 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できる一方で、 始端~辺の周りの区画は，空いたままになるモノトスル。 ◎ 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できる一方で、 他方の辺の周りは，空いたままになるモノトスル。 ◎ 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できる一方で、 他方の辺の周りは空いたままになるモノトスル。 ◎ 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できない。 排他体の［ 始端／終端 ］辺の周りの区画は，空いたままになるモノトスル。 ◎ 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の算出d値が `auto$v になる場合、 要素は`排他体$にならない。 ◎ If the property’s computed value is auto, the element does not become an exclusion.

算出d値が `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'.

`排他~要素$は、 自身の内容に対し，新たな`塊~整形~文脈$ `CSS2$r を確立する。 ◎ An exclusion element establishes a new block formatting context (see [CSS2]) for its content.

上の図は、 排他体たちが どう組合されるかを示している。 最外縁の~boxは、 要素の内容~boxを表現する。 暗い灰色の~box［ `A^V, `B^V, `C^V, `D^V ］は、 要素の`回込み文脈$に属する排他体たちを表現する。 これらに対する `wrap-flow$p の算出d値は、 順に［ `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.

<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>

3.3.1. `wrap-through^p ~prop

この~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.

<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>

3.5.1. 説明0

排他は、 2 段階の処理nで適用される： ◎ 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 ）”： `後述の例＠#example-step-2$に見られるように、 これは実際には， 段 2-B が再帰的に［ 描画~treeの各~子に対し段 2 を呼び出す ］ことを意味する。 】

3.5.2. 段 1： 各 回込み文脈に属する排他~boxたちを解決する

この段では、 ~UAは，各 `排他~区画$がどの`包含塊$に属するかを決定する。 これは、 包含塊の定義, および `wrap-flow$p の算出d値が `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は、 `描画~tree$ `CSS2$r の上層から順に，各 包含塊を 2 段に分けて処理する。 ◎ In this step, starting from the top of the rendering tree (see [CSS2]), 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$であるときは、 `§ 排他体たちの順序＠#exclusions-order$ による規則が，［ どの排他体が，~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. 処理~modelの例

この節では、 排他体たちの処理~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片には、 文書の行内~内容に影響する 2 個の排他体がある： ◎ 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 ~tree ］, および［ 生成される`塊~box$たちからなる~layout~tree ］を順に示す： ◎ The following figures illustrate: ◎ the document’s DOM tree ◎ the layout tree of generated block boxes

3.6.1. 類似性

浮動体と排他体には、［ 行内~内容が，このどちらも回込む ］ことにおいて類似性がある。 しかしながら、 この 2 つには，ごく有意な相違点がある。 ◎ 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.

位置決め： ◎ positioning.＼

浮動体は 行内~flowの一部であり、 行l~box上に `float$p する。 作者は、 浮動体が 行l~box上で どのように 右／左 へ移動するかを制御できる。 対照的に，排他体は、 `格子~layout$ `CSS3-GRID-LAYOUT$r `~flex~layout$ `CSS3-FLEXBOX$r その他の どの位置決め~schemeを利用して位置させることもできる。 ◎ 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.

関心の分離： ◎ separation of concerns.＼

要素を浮動体にすることは、［ 要素の位置決め~scheme, 行内~内容に対する効果 ］どちらも決定する。 要素を排他体にすることは、 行内~内容に対する影響iのみを決定し，位置決め手法に対しては拘束を課さない。 ◎ 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. 相互運用能