CSS Exclusions Module Level 1

3.1.1. wrap-flow プロパティ

このプロパティに対する各種 値の意味は： The values of this property have the following meanings:

auto

排他体は作成されない。 行内フロー内容は、 通例どおり要素と相互作用する。 特に，要素が浮動体 [CSS2] である場合、 【他の値が指定されたとしても，】 ふるまいは変化しない。 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

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

start

行内フロー内容は，排他区画の始端辺の周りにフローできる一方で、 終端辺の周りの区画は，空いたままになるものとする。 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

行内フロー内容は，排他区画の終端辺の周りにフローできる一方で、 始端辺の周りの区画は，空いたままになるものとする。 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

行内フロー内容は，排他区画の［ フロー内容の包含ブロックの中で、 始端, 終端のうち，可用な空間が狭い側の辺† ］の周りにフローできる一方で、 他方の辺の周りは，空いたままになるものとする。 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

行内フロー内容は，排他区画の［ フロー内容の包含ブロックの中で、 始端, 終端のうち，可用な空間が広い側の辺 ］の周りにフローできる一方で、 他方の辺の周りは空いたままになるものとする。 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

行内フロー内容は、 フロー内容のブロック進行方向において，排他体の 前／後 にしかフローできない。 排他体の［ 始端／終端 ］辺の周りの区画は，空いたままになるものとする。 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.

要素上のプロパティの算出値が auto になる場合、 要素は排他体にならない。 If the property’s computed value is auto, the element does not become an exclusion.

算出値が auto 以外になる場合、 要素は排他体になる。 その排他区画は，要素の包含ブロックの回り込み文脈に供与され、 包含ブロックの子孫たちは，排他区画を回り込むようになる。 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.

排他体に関連する辺の決定法は、 “排他区画” を回り込んでいる内容の，書字モード [CSS3-WRITING-MODES] に依存する。 Determining the relevant edges of the exclusion depends on the writing mode [CSS3-WRITING-MODES] of the content wrapping around the 'exclusion area'.

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

上の図は、 排他体たちが どう組み合されるかを示している。 最外縁のボックスは、 要素の内容ボックスを表現する。 暗い灰色のボックス［ A, B, C, D ］は、 要素の回り込み文脈に属する排他体たちを表現する。 これらに対する wrap-flow の算出値は、 順に［ both, start, end, clear ］になる。 明るい灰色の区画は、［ wrap-flow 値の結果として，行内レイアウトにおいて排他される ］ような，追加の区画を示す。 例えば， B の右の区画は、 右向き書字モード内容の行内レイアウトには，利用できない — B の wrap-flow は start なので。 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.

背景が薄青色の区画は、［ 右向き書字モードである要素の行内内容 ］のレイアウトに，どの区画が可用になるかを示す。 明るい／暗い 灰色で表現される，すべての区画は、 （右向き書字モードの）行内内容のレイアウトには可用でない。 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;

    /* 各 升のサイズが均一な 4 × 4 の格子 */
    display: grid;
    grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;

#右上 {
    /* 左から 3 列目, 上から 2 段目， 1 × 1 の升を占める格子アイテム */
    grid-area: 3/2;
}

#左下 {
    /* 左から 2 列目, 上から 3 段目， 1 × 1 の升を占める格子アイテム */
    grid-area: 2/3;
}

.排他 {
    wrap-flow: <下を見よ>
}

#内容 {
    /* 格子全体を占める格子アイテム */
    grid-area: 1/1/span 4/span 4;
}
</style>

3.3.1. wrap-through プロパティ

このプロパティに対する各種 値の意味は： The values of this property have the following meanings:

wrap

要素は、 自身の親ノードの回り込み文脈を継承する。 要素の子孫である行内内容は、 要素の外側†にて定義される排他体たちを回り込む。 【† “継承” なので、次項により継承が途切れる所までの “外側”。】 The element inherits its parent node’s wrapping context. Its descendant inline content wraps around exclusions defined outside the element.

none

要素は、 自身の親ノードの回り込み文脈を継承しない。 要素の子孫である行内内容が回り込むのは、 要素の内側にて定義される排他区画に限られる。 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 プロパティを利用して，排他体の効果を制御する例： Using the wrap-through property to control the effect of exclusions.

<style type="text/css">
#格子 {
    /* 4 × 4 の格子 */
    display: grid;
    grid: 9fr 8fr 8fr 9fr / 1fr 1fr 1fr 1fr;
}

#真中 {
    grid-area: 2/2/span 2/span 2;
    wrap-flow: both;
    background-color: rgba(220, 230, 242, 0.5);
}

#上半分 {
    grid-area: 1/1/span 4/span 2;
    wrap-through: wrap;
}

#下半分 {
    grid-area: 1/3/span 4/span 2;
    wrap-through: 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] の古い仕様に基づくと見られるので、 修正を加えている。 】

3.5.1. 説明

排他は、 2 段階の処理で適用される： Applying exclusions is a two-step process:

• 段 1： 各 回り込み文脈に対し，どの排他ボックスが属するか 【どの排他区画が供与されるか】 を解決する。 Step 1: resolve exclusion boxes belonging to each wrapping context

• 段 2： 各 回り込み文脈に対し，順々に†、 それを解決して，包含ブロックをレイアウトする — すなわち： Step 2: resolve each wrapping context and lay out each containing block in turn:

  • 段 2-A： 回り込み文脈に属する排他ボックスたちの位置とサイズを解決する。 Step 2-A: resolve the position and size of exclusion boxes
  • 段 2-B： 排他区画たちを回り込むように，包含ブロックの内容をレイアウトする。 Step 2-B: lay out containing block, wrapping around each exclusion area

  【† “各〜に対し，順々に（ each 〜 in turn ）”： 後述の例に見られるように、 これは実際には， 段 2-B が再帰的に［ 描画ツリーの各子に対し段 2 を呼び出す ］ことを意味する。 】

3.5.2. 段 1： 各 回り込み文脈に属する排他ボックスたちを解決する

この段では、 UA は，各 排他区画がどの包含ブロックに属するかを決定する。 これは、 包含ブロックの定義, および wrap-flow の算出値が auto でない要素に基づく，単純な段である。 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： 回り込み文脈を解決して各 包含ブロックをレイアウトする

この段では、 UA は、 描画ツリー [CSS2] の上層から順に，各 包含ブロックを 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： 各 排他ボックスの位置とサイズを解決する

回り込み文脈における排他ボックスの位置とサイズを解決するとき、 レイアウトが要求されることもあれば，そうでないこともある。 例えば，排他ボックスが絶対的に位置され, サイズされている場合には必要ないが、 他の状況では，包含ブロックの内容をレイアウトすることが要求される。 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.

このレイアウトが要求されるときは、 どの排他区画も適用することなく，遂げられる。 言い換えれば、 包含ブロックは，回り込み文脈を伴わずにレイアウトされる。 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.

この段は、 与えられた回り込み文脈に属する すべての排他ボックスに対し，それぞれの位置とサイズを得る。 各 排他ボックスは，最上層から順々に処理され、 算出された各 排他区画が，包含ブロックの回り込み文脈に供与される。 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 : fixed にされた 排他ボックスの位置とサイズを解決するときは，scrolling は無視される。 Scrolling is ignored in this step when resolving the position and size of position: fixed exclusion boxes.

包含ブロックの回り込み文脈が算出されたなら、 その回り込み文脈に属する すべての排他ボックスは、 通常のフローから除去される。 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： 回り込みが適用される包含ブロックをレイアウトする

最後に、 包含ブロックの内容が，その行内内容を［ 回り込み文脈の排他区画 ］を回り込むように、 レイアウトされる。 Finally, the content of the containing block is laid out, with the inline content wrapping around the wrapping context’s exclusion area.

包含ブロック自身が排他ボックスであるときは、 § 排他体たちの順序 による規則が，［ どの排他体が，ボックスの行内／子孫の内容に影響するか ］を定義する。 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. 処理モデルの例

この節では、 排他体たちの処理モデルを，単純かつ［ レイアウトの依存関係と再レイアウトの課題に取り組むに十分な複雑さ ］を含むような例を用いて示す。 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.

次の例におけるコード片には、 文書の行内内容に影響する 2 個の排他体がある： The code snippet in the following example has two exclusions affecting the document’s inline content.

<html>
<style>
#d1 {
    position:relative;
    height: auto;
    color: #46A4E9;
    border: 1px solid gray;
}

#e1 {
    wrap-flow: both;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40%;
    height: 40%;
    border: 1px solid red;
    margin-left: -20%;
    margin-top: -20%;
}

#d2 {
    position: static;
    width: 100%;
    height: auto;
    color: #808080;
}

#e2 {
    wrap-flow: 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 ツリー ］, および［ 生成されるブロックボックスたちからなるレイアウトツリー ］を順に示す： The following figures illustrate:the document’s DOM treethe 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.＼

浮動体は 行内フローの一部であり、 行ボックス上に float する。 作者は、 浮動体が 行ボックス上で どのように 右／左 へ移動するかを制御できる。 対照的に，排他体は、 格子レイアウト [CSS3-GRID-LAYOUT] flex レイアウト [CSS3-FLEXBOX] その他の どの位置決めスキームを利用して位置させることもできる。 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.＼

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