CSS 2.2 — 9. 視覚整形モデル

Visual formatting model

9.1. 視覚-整形~model 序論

この § 9 と次の `§ 10$ では、 `視覚-整形~model@ — ~UAが視覚的な`媒体$に対し `文書~tree$をどう処理するか — について述べる。 ◎ This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.

視覚-整形~modelの下では、文書~tree 内の各~要素は, ~box~model に則って 0 個~以上の~boxたちを生成する。 これらの~boxたちの~layoutは、次により統制される: ◎ In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

この § 9 と次の `§ 10$ で定義される各種~propは、`連続的~媒体$, `~paged媒体$どちらにも適用される。 しかしながら,各種`~margin~prop$の意味は、`~paged媒体$に適用されるときは変わる(詳細は § ~page~model を見よ)。 ◎ The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).

視覚-整形~modelは、整形のすべての側面までは指定しない(例: 字詰め( `letter-spacing^en )の~algo)。 `適合~UA$は、この仕様が受持っていない これらの整形の課題に対しては,挙動を違えてもヨイ。 ◎ The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.

9.1.1. 表示域

`連続的~媒体$ 用の~UAは、一般に,利用者が文書とやりとりするための `表示域@ ( `viewport^en — ~screen上の~UIwindowその他の,見えている区画)を提供する。 ~UAは、表示域が~resizeされたときには,文書の~layoutを変更してもヨイ(`初期~包含塊$を見よ)。 ◎ User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document’s layout when the viewport is resized (see the initial containing block).

~UAは、表示域が[ ~canvas内の,文書が描画される区画 ]より狭いときは,~scrolling-mechanismを提供するべきである。 ◎ When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.

表示域は,`~canvas$ごとに高々一つまでであるが、~UAは複数の~canvasに描画してもヨイ(すなわち、同じ文書に対する複数の~viewを~~同時に供してもヨイ)。 ◎ There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

9.1.2 包含塊

~CSS2においては、多くの~boxの位置と~sizeは,包含塊( `containing block^en )と呼ばれる矩形な~boxの各~辺を基準に計算される。 一般に、生成された~boxは,子孫~box用の包含塊として動作する。 このことを、~boxは,(その子孫たち用の)包含塊を “確立する” という。 “~boxの包含塊” という句は、 “~boxが確立するそれ” ではなく, “~boxは その包含塊の中に居る” ことを意味する。 ◎ In CSS 2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box’s containing block" means "the containing block in which the box lives," not the one it generates.

各~boxには,その包含塊を基準にする位置が与えられるが、この位置は,この包含塊の~~枠内から`~overflow$することもある。 ◎ Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

包含塊の寸法を計算する方法の詳細は、 § 包含塊の定義 にて述べる。 ◎ The details of how a containing block’s dimensions are calculated are described in the next chapter.

9.2. ~box生成の制御-法

次の節に、~CSS2にて生成され得る~boxたちの各種 表示~型について述べる。 ~boxの表示~型は、`視覚-整形~model$における その挙動に少なからず影響する。 後述の `display$p ~propが,~boxの表示~型を指定する。 ◎ The following sections describe the types of boxes that may be generated in CSS 2. A box’s type affects, in part, its behavior in the visual formatting model. The display property, described below, specifies a box’s type.

表示型 ( `display type^en )という訳語は, CSS Display 仕様に倣ったもの — 原文では単に “型” とされている。 】

9.2.1. 塊~levelの要素と塊~box

`塊~levelの要素@ とは、視覚的に塊として整形される~source文書の要素である(例: 段落など)。 要素を塊~levelにするような `display!p ~propの値には,[ `block$v, `list-item$v, `table$v ]がある。 ◎ Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the display property make an element block-level: block, list-item, and table.

`塊~levelの~box@ は、`塊~整形~文脈$に関与する~boxである。 各`塊~levelの要素$は、 `首要~box@ ( `principal box^en )と呼ばれる,塊~levelの~boxを生成する。 首要~boxが、子孫の~boxと 生成d内容 を包含し、また,`位置決め~scheme$に関わる~boxになる。 ◎ Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.

塊~levelの要素には、`首要~box$の他に追加的な~boxを生成させるものもある — `display!p が `list-item$v にされた要素など。 これらの追加的な~boxは、`首要~box$を基準に配置される。 ◎ Some block-level elements may generate additional boxes in addition to the principal box: list-item elements. These additional boxes are placed with respect to the principal box.

【 “関与する”: 言い換えれば、[ `~box~tree$の中で,~boxの先祖~boxであって, かつ`整形~文脈$を確立しているもの ]のうち,~boxに最も近い先祖は、[ 種別が “塊” である`整形~文脈$ ]を確立していて,~boxの~layoutは[ その種別の整形~文脈に定義される規則 ]により統制される。 】

[ `~table~box$, `置換d要素$ ]を除き,塊~levelの~boxは、`塊~容器~box$でもある。 `塊~容器~box@ は、塊~levelの~boxのみを包含するか,または `行内~整形~文脈$を確立する — すなわち,行内~levelの~boxのみを包含する。 `塊~容器~box$には、`塊~level$でないものもある — `非置換d$[ 行内~塊( `inline-block$v ) / ~table~cell( `table-cell$v ) ]は塊~容器であるが、塊~levelの~boxではない。 塊~levelの~boxであって, 塊~容器でもあるものは、 `塊~box@ とも呼ばれる。 ◎ Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

3 種の用語 “`塊~levelの~box$”, “`塊~容器~box$”, “塊~box” は、多義的にならない所では,単に “塊” と略称されることもある。 ◎ The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

【 `整形~文脈$における これらの~boxの役割については、 § 9.4.X にて,俯瞰する。 】

9.2.1.1. 匿名~塊~box

次の様な文書において: ◎ In a document like this:

<DIV>
  Some text
  <P>More text
</DIV>

`DIV^e は、行内~内容と塊~内容の両者を持つように現れる( `DIV^e と `P^e の `display$p はいずれも `block^v とする)。 整形をより定義し易くするため、 "Some Text" の周りには, `匿名~塊~box@ が在るものと見做される。 【それは、`塊~容器$になり, かつ`塊~level$であるとされるので、“`塊~box$” と称される。】 ◎ (and assuming the DIV and the P both have 'display: block'), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

Some text 匿名~box
More text P ~box
上の例から生成される 3 つの~box — 外枠の DIV ~boxの中の`匿名~塊~box$(上段)と P ~box(下段) — を示す図式。 ◎ Diagram showing the three boxes, of which one is anonymous, for the example above.

言い換えれば: 内側に`塊~levelの~box$(上の `P^e など)があるような`塊~容器~box$(上の `DIV^e に対し生成されるものなど)は、その内側には`塊~levelの~box$しかないように強制される。 ◎ In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

`行内~box$ %I が `~flow内$にある`塊~levelの~box$の 連なり を包含する場合:

  1. %I (および %I と同じ`行l~box$に属する %I の行内~先祖)は,その連なりの周りで,分断され、
  2. 分断された前後それぞれの行l~box群(空, すなわち 0 個の行l~boxにもなり得る)は,`匿名~塊~box$に封入される。
  3. これらの `匿名~塊~box$, および その連なりは,互いに同胞になる。 【連なりが複数あれば、合間に生じる各~行l~box群も匿名~塊~boxで包装される。】

ここでの 連なり とは、[ 連続する, または[ `縮約-可能$な`空白$や`~flow外$にある要素 ]のみにより分離される ]ような,互いに同胞の 1 個以上の`塊~levelの要素$を意味する。

%I が`相対~位置決め$により~offsetされる場合、その中の(匿名なものも含めた)塊~boxたちも一緒に~offsetされる。

◎ When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) is broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

この~modelは、次の例にも適用されることになる。 次の規則が: ◎ This model would apply in the following example if the following rules:

p    { display: inline }
span { display: block }

次の~HTMLに利用された場合: ◎ were used with this HTML document:

<BODY>
<P>
SPAN の前の匿名~text
<SPAN>SPAN の内容</SPAN>
SPAN の後の匿名~text
</P>
</BODY>

`P^e 要素は(`行内~level$にされてはいるが)、順に,[ 匿名~text片 %C1, `塊~level$にされた `SPAN^e 要素, 別の匿名~text片 %C2 ]を包含する。 結果の~boxたちは、[ 次のものを包含している `BODY^e ]を表現している`塊~box$になる:

  1. %C1 を包装する`匿名~塊~box$
  2. `SPAN^e による`塊~box$
  3. %C2 を包装する別の`匿名~塊~box$
◎ The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.

`匿名~box$の~propは、それを封入している非~匿名~boxから継承される(例: この節の最初の例では、匿名~box "Some text" は,親の `DIV^e から継承する)。 継承されない~propについては,それぞれの初期~値にされる。 例えば、匿名~boxの~fontは `DIV^e から継承されるが,~marginは 0 になる。 ◎ The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.

[ `匿名~塊~box$を生成させる要素 ]上に設定された各~propは、依然として,それらの~boxと 要素の内容にも適用される。 例えば、上の例で `P^e 要素に~borderが設定されていたなら、~borderは %C1, %C2 の周りにも描かれることになる(この~borderは、[ %C1/ %C2 ]の行lの[ 終端/始端 ]では開いた~~状態になる)。 ◎ Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).

【上の例の,利用中の~browserによる呈示(この訳による追加):】

上の例において `P^e に~border(赤線)が設定されているとき — ~borderは,合間の塊を飛ばして描かれるであろう。
SPAN の前の匿名~text SPAN の内容 SPAN の後の匿名~text
一つ前の例で `P^e の `display^p が `block^v であったなら、~borderは単に `P^e の周囲に描かれるであろう。
SPAN の前の匿名~text SPAN の内容 SPAN の後の匿名~text
2 つ前の例から, `SPAN^e の前後の匿名~textを削除したとき — それでも、行l~boxは分割の前後に生成されるであろう。
SPAN の内容
一つ前の例から、更に~border~styleも削除したとき — 行l~boxは(少なくとも見かけ上は)生成されなくなるであろう( この挙動の説明 )。
SPAN の内容
一つ前の例に、 `P^e に青い外形線~style( `outline^p: `blue^v )を加えたとき — ~layoutは同じになるべきだが、見えない行l~boxにも外形線を描く実装はあるかもしれない。
SPAN の内容

行内 %I が包含している塊~上の~borderを,他の仕方で実装している~UAも中にはある: 例えば、そのような入子の塊を “匿名~行l~box” の内側に包装して、この匿名~boxの周りに %I の~borderを描くような。 ~CSS1 / ~CSS1998 は,この挙動を定義していないので、この別の~modelを実装するような ~CSS1 /~CSS1998 “のみの” ~UAであっても、~CSS2のこの部分には適合するものと主張できる。 このことは、この仕様が~~発行された後に開発された~UAには,適用されない。 ◎ Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 (1998) did not define this behavior, CSS1-only and CSS2 (1998)-only user agents may implement this alternative model and still claim conformance to this part of CSS 2. This does not apply to UAs developed after this specification was released.

`匿名~塊~box$は、百分率~値を解決する際には,~~参照されずに無視される — 代わりに,先祖の非 `匿名~box$のうち,最も近いものを利用して解決される。 例えば、[ この節の最初の例の `DIV^e の子である`匿名~塊~box$( "Some Text" ) ]において,百分率による縦幅を解決する際に,その包含塊の縦幅を知る必要があるならば、その匿名~塊~boxの縦幅ではなく, `DIV^e により形成される包含塊の縦幅を利用することになる。 ◎ Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead. For example, if the child of the anonymous block box inside the DIV above needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV, not of the anonymous block box.

9.2.2. 行内~levelの要素と行内~box

`行内~levelの要素@ は、~source文書の要素であって,その内容により,新たな塊が形成されないものである†。 その内容(例えば、段落の中で強調される~text片, 行内~画像, 等々)は、何~行lかに分布する。 `display!p ~propに対する値[ `inline$v, `inline-table$v, `inline-block$v ]は、要素を行内~levelにする。 ◎ Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the display property make an element inline-level: inline, inline-table, and inline-block.

`行内~levelの要素$は、 `行内~levelの~box@ を生成する。 それは、`行内~整形~文脈$に関与する~boxである。 ◎ Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

【† 実際には,前節の例のように塊を生成する要素を包含することもあるので、この定義は厳密さに欠く。 】

`行内~levelの~box$は、次の 2 種に大別される:

`行内~box@ 【 “可分な行内” 】
その内容も,~boxが関与している`行内~整形~文脈$に関与するもの。 `display$p 値が `inline$v にされた`非置換d要素$は、`行内~box$を生成する。
`不可分な行内@
`行内~box$でないもの( `行内~level$の`置換d要素$が生成する~box / `行内-塊$ / `行内-~table$ など)。 その名称の由来は、それが単独の 不透明な~box として`行内~整形~文脈$に関与することによる。
◎ An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a display value of inline generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

9.2.2.1. 匿名~行内~box

(行内~要素の内側ではなく)`塊~容器~要素$の内側に直に包含される,どの~textも、`匿名~行内~box$を生成するもの【!匿名~行内~要素】として扱うモノトスル。 ◎ Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

次の様な~HTML~markupを伴う文書において: ◎ In a document with HTML markup like this:

<p>ある<em>強調された</em>テキスト</p>

`p^e は、その内側にいくつかの`行内~box$たちを伴う`塊~box$を生成する。 "強調された" に対する~boxは,行内~要素( `em^e )により生成される`行内~box$であるが、他の~box( "ある" と "テキスト" )は,`塊~levelの要素$( `p^e )により生成される`行内~box$である。 後者の~boxには、結付けられる`行内~levelの要素$がないため, `匿名~行内~box@ と呼ばれる。 ◎ the <p> generates a block box, with several inline boxes inside it. The box for "emphasized" is an inline box generated by an inline element (<em>), but the other boxes ("Some" and "text") are inline boxes generated by a block-level element (<p>). The latter are called anonymous inline boxes, because they do not have an associated inline-level element.

そのような`匿名~行内~box$は、その親の塊である~boxから継承-可能な~propを継承する。 継承されない~propは、初期~値にされる。 上の例では、`匿名~行内~box$の色は `P^e から継承されるが,背景は透明になる。 ◎ Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent.

`空白$のみからなる内容は、 `white-space$p ~propに則って`縮約され$て消える場合には,`匿名~行内~box$を生成しない。 【関連事項】 ◎ White space content that would subsequently be collapsed away according to the white-space property does not generate any anonymous inline boxes.

この仕様では、どの`表示~型$の匿名~boxを指すのか文脈から明らかな所では、 `匿名~行内~box$, `匿名~塊~box$ どちらも,単に `匿名~box@ と記される。 ◎ If it is clear from the context which type of anonymous box is meant, both anonymous inline boxes and anonymous block boxes are simply called anonymous boxes in this specification.

~tableを整形する際には、 他の表示~型の匿名~box が~~導入される。 ◎ There are more types of anonymous boxes that arise when formatting tables.

9.2.3. 同行見出し( `run-in^en )~box

この節は、以前の草案と節~番号を揃えるためにある。 `display$p 用の `run-in^v 値は、今や CSS3( CSS basic box model § 同行見出し~layout )にて定義される。 ◎ [This section exists so that the section numbers are the same as in previous drafts. 'display: run-in' is now defined in CSS level 3 (see CSS basic box model).]

9.2.4. `display^p ~prop

◎名 `display@p ◎値 `inline$v | `block$v | `list-item$v | `inline-block$v | `table$v | `inline-table$v | `table-*$t | `none$v ◎初 `inline$v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 ~textを見よ ◎順 文法に従う ◎ア 離散的 ◎表終

この~prop用の各種~値の意味は: ◎ The values of this property have the following meanings:

`block@v
この値は、要素に`塊~box$を生成させる。 ◎ This value causes an element to generate a block box.
`inline-block@v
この値は、要素に`行内~level$の`塊~容器$を生成させる。 `inline-block^v の内側は,`塊~box$として整形される一方で、要素それ自身は`不可分な行内$として整形される。 ◎ This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
`inline@v
この値は、要素に一つ以上の`行内~box$を生成させる。 ◎ This value causes an element to generate one or more inline boxes.
`list-item@v
この値は、要素に`首要$`塊~box$に加えて,~marker~boxも生成させる(例: ~HTMLの `LI^e )。 ~listについて, および その整形の例については、 § ~list にアタられたし。 ◎ This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.
`none@v
この値は、要素を`整形~構造$に現れなくさせる(すなわち,視覚-媒体においては、要素は,~boxを生成せず, ~layoutに効果は及ばなくなる)。 要素のどの子孫も,~boxを生成しなくなり、要素とその内容は,整形~構造から全面的に除去される。 子孫に `display$p ~propを設定しても,この挙動が上書きされることはない。 ◎ This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the display property on the descendants.
`display^p 値 `none$v は、不可視~boxを作成するものではないことに注意。 それは~boxを全く作成させなくする。 ~CSSには、要素が[ 整形に影響しつつ,それ自身は可視でない【透明な】~box ]を整形~構造~内に生成する仕組みも~~用意されている。 詳細は § 可視性 にアタられたし。 ◎ Please note that a display of none does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
`table@v
`inline-table@v
`table-*$t
これらの値は、要素を `table^e 要素の様に挙動させる( § ~table に述べられる制約の~subjectになる)。 ◎ These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

ここで:

`table-*@t
    = `table-row-group@v
    | `table-header-group@v
    | `table-footer-group@v
    | `table-row@v
    | `table-column-group@v
    | `table-column@v
    | `table-cell@v
    | `table-caption@v

これらの値の意味は、 ~table~model にて定義される。

【 この `table-*^t は、他から簡潔に参照できるよう,訳者が導入した非公式な値~型である(これらの値は、~table整形~文脈により統制される~boxを生成させる)。 】

算出d値は、指定d値と同じになる — ただし,`有位置$な要素, `浮動~要素$, `根~要素$に対する場合は除く: `display^p, `position^p, `float^p の関係性 を見よ。 ◎ The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between display, position, and float) and for the root element. For the root element, the computed value is changed as described in the section on the relationships between display, position, and float.

`display$p の`初期~値$は `inline$v とされているが、多くの要素に対し,この値は~UAの 既定の~stylesheet による規則で上書きされ得ることに注意。 付録の~HTML 4 用の ~stylesheetの見本 を見よ。 【現在においては、~HTML仕様(WHATWG)に定義される~UA~stylesheet】 ◎ Note that although the initial value of display is inline, rules in the user agent’s default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.

ここに `display$p ~propの例をいくつか示す: ◎ Here are some examples of the display property:

p   { display: block }
em  { display: inline }
li  { display: list-item } 
img { display: none }      /* 
画像は表示させない
◎
Do not display images
 */

9.3. 位置決め~scheme

~CSS2においては、~boxは,次の3種の `位置決め~scheme@ に則って~lay-outし得る: ◎ In CSS 2, a box may be laid out according to three positioning schemes:

`通常~flow$
~CSS2における通常~flowには、[ `塊~levelの~box$の`塊~整形$ / `行内~levelの~box$の`行内~整形$ / [ `塊~levelの~box$/`行内~levelの~box$ ]の`相対~位置決め$ ]が含まれる。 ◎ Normal flow. In CSS 2, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
`浮動体$

浮動~modelにおいては、~boxは:

  1. 先ず,`通常~flow$に則って~lay-outされてから†
  2. その~flowから外され、アリな限り,左方, または右方 のいずれかへ寄せられる††。
  3. しかる後、周りの内容は,浮動体の脇に~flowし得るようになる†††。

【† すなわち,`現在の行l$を決定する。 】【†† 現在の行lの左端, または右端へ寄せられる。 】【††† 現在の行l 以降に生成される`行l~box$は,浮動体の右, または左に配置される。 】

◎ Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
`絶対~位置決め$
絶対~位置決め~modelにおいては、~boxは,`通常~flow$からまるごと除去された上で(後続の内容は~boxが元から無かったかのように~layoutされる)、包含塊を基準に位置がアテガわれる。 ◎ Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
【 ~CSS2における`絶対~位置決め$に関する内容は、今や `CSS Positioned Layout^cite にて定義されるので,この訳では(一部を除き)省略している。 】

[ `浮動体$ / `絶対的に位置され$た要素 / `根~要素$ ]は, `~flow外@ にあると呼ばれ、`~flow外$でない要素は, `~flow内@ にあると呼ばれる。

`~flow@ とは、[ `~flow外$にある,ある要素を根とする下位tree ]から,その中の[ `~flow外$にある要素を根とする下位tree ]すべてを~~除外した部分である。

【 定義により、要素が`~flow内$にあることと,要素が ある`~flow$に含まれる(その根は除く)ことは、同じことを意味する。 】

◎ An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

注記: ~CSS2の位置決め~schemeは、~markupによる技巧(例:不可視な画像)を要することなく,~layout効果を得られるようにして、作者が,より~access可能な文書を書き易くするためにある。 ◎ Note. CSS 2’s positioning schemes help authors make their documents more accessible by allowing them to avoid mark-up tricks (e.g., invisible images) used for layout effects.

9.3.1. 位置決め~schemeの~~選択: `position^p ~prop

【 この節の内容は、 `CSS Positioned Layout^cite § 位置決め~schemeの~~選択 に定義されるので,和訳は省略する。 】

9.3.2. ~boxの~offset: `top^p, `right^p, `bottom^p, `left^p

【 この節の内容は、 `CSS Positioned Layout^cite § ~box~inset に定義されるので,和訳は省略する。 】

9.4. 通常~flow

通常~flow( `normal flow^en )における~boxは、塊, 行内いずれかの `整形~文脈@ ( `formatting context^en )に所属する【関与する】 — が、これら 2 つに同時に所属することはない。 `塊~level$の~boxは、`塊~整形~文脈$に関与する。 `行内~level$の~boxは、`行内~整形~文脈$に関与する。 ◎ Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

9.4.X. 【塊~整形~文脈における各種~boxの~~位置付け】

【 この節は、訳者による注釈である。

この節では、この仕様が定義する各種~boxの,整形~文脈における~~位置付けについての( CSS3 も視野に入れた)説明を試みる(この節は、何かを定義するものではない)。 尚、ここでは`首要~box$でない~boxは~~脇に置く。

視覚的な~layoutは、~boxたちが成す~tree構造に基いて行われる。 これは、`~box~tree$, あるいは描画~treeとも呼ばれている(これは,概ね文書~treeの構造を反映するが、文書~treeの一部は,~box~treeの中では別の場所に組み替えられることもある — `絶対的に位置され$た要素など)。 整形~文脈は、この~box~treeの中のある下位treeを表現する。 上述の様に,整形~文脈にはいくつかの種別があり、ある整形~文脈に関与する~boxの~layoutは,その種別に定義される規則により統制される。

整形~文脈の下位treeの中で,新たな整形~文脈を確立するものは、親の整形~文脈の視点からは,末端の( “不透明な” )~boxになる。 すなわち、子孫の整形~文脈に関与する内容の~layoutには,親の整形~文脈による統制は及ばない — 及ぶのは、子~整形~文脈の根である末端~boxの~size/位置に限られる。 一般に、~CSSに規定される~layout特能のほとんどは,整形~文脈を超えて影響しあうことはない(`浮動体$は、塊~整形~文脈と行内~整形~文脈との間で影響しあう点で特別だが)。

この仕様が定義する`塊~整形~文脈$を成す下位treeにおいては:

  • 根~自身が末端でないときは:

    • 根~以外のすべての~boxは、`塊~levelの~box$である。 そのうち,`浮動~box$のみが`~flow外$にある。
    • 末端~以外のすべての~boxは、(`塊~levelの~box$を包含する方の)`塊~容器$である。
    • よって、末端でも根でもない すべての~boxは,`塊~box$になる。
  • 末端の~boxは、次の3種に大別される:

    • `行内~整形~文脈$を確立するもの(塊~levelの~boxを包含しない方の`塊~容器~box$)。 次項に該当しない,内容が空な~boxは、形式的に[ 0 個の`行l~box$を生成する`行内~整形~文脈$を確立する ]ものと見做す下で、ここに分類される。
    • 行内~整形~文脈でない`整形~文脈$を確立するもの — 例えば、~table~layout, あるいは ~flex~layoutなどの CSS3 で定義される各種~整形~文脈。 塊~整形~文脈も末端に入子にされ得る。 `overflow$p が `visible^v でないものや,`浮動~box$は、ここに分類される。
    • 置換d要素。 (言い換えれば、 “~CSSからは未知な整形~文脈” を確立するもの。)
  • 根~boxは、別の整形~文脈の末端であるか,~box~tree全体(根~要素が確立する整形~文脈)の根になる。 親の整形~文脈が`行内~整形~文脈$である(したがって,`行内~levelの~box$である)ような 根~boxは、特に,`不可分な行内$と呼ばれ、複数の行l~boxに分断されて~flowされることはない。

`行内~整形~文脈$は、親の整形~文脈が`塊~整形~文脈$でないならば,暗黙的に塊~整形~文脈も成すと見なされる点で特別な地位にある(すなわち,この塊~整形~文脈の根~自身が末端の行内~整形~文脈を確立する)。 言い換えれば、 “塊~level”/“行内~level” の区別が意味を成すのは,`塊~整形~文脈$の中に限られる — 他の種別の`整形~文脈$の中の行内~levelの~boxは、常に塊~整形~文脈の中に包装されることになるので(塊~整形~文脈, 行内~整形~文脈をひっくるめたものは、 ~flow~layout とも呼ばれている)。 “塊~容器” という用語は、`塊~整形~文脈$でない整形~文脈の中で利用されることもある — その場合、塊~容器~自身が塊/行内~整形~文脈を確立していることを含意する。 また,塊/行内~整形~文脈でない整形~文脈においては、通例,~boxは浮動されないことになる( `float$p を非 `none^v に設定しても~~効果はない) — その文脈における挙動が新たに定義されない限り。 したがって、浮動という用語は,塊~整形~文脈の~~存在を含意することになる。

9.4.1. 塊~整形~文脈

次のものは、その内容に対し,新たな`塊~整形~文脈$を確立する:

  • `浮動体$
  • `絶対的に位置され$た要素
  • `塊~容器$( `inline-block^v, `table-cell^v, `table-caption^v など)であって,`塊~box$でないもの 【言い換えれば、塊~整形~文脈でない整形~文脈の中に置かれた塊~容器】
  • `塊~box$であって, `overflow$p は `visible^v でないもの(その値が`表示域に伝播され$たものであるときは除く)
◎ Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

`塊~整形~文脈$の下では、各~boxは,包含塊の上端から, 縦方向に, 順々に,~lay-outされる。 2 つの同胞~boxの縦方向の~~間隔は、それらの `margin$p ~propにより決定される。 同じ`塊~整形~文脈$に関与する,隣り合う`塊~levelの~box$では、その合間の縦方向~marginは,`相殺され$る。 ◎ In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the margin properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

`塊~整形~文脈$の下では、各~boxの左端~外縁~辺は, 包含塊の左端~辺に接する(右横書き整形に対しては右端~辺どうしが接する)。 このことは、`浮動体$が存在していても成り立つ(~box内の `行l~box$ は、浮動体に因り縮短され得るが) — その~boxが,新たな`塊~整形~文脈$を確立するのでない限り(この場合、~box自身は,浮動体に因り より幅狭になり得る )。 ◎ In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

`~paged媒体$における~page分断については、 § 許容される~page分断にアタられたし。 ◎ For information about page breaks in paged media, please consult the section on allowed page breaks.

9.4.2. 行内~整形~文脈

行内~整形~文脈の下では、~boxたちは,その包含塊の上端から, 横方向に,順々に~lay-outされていく。 これらの~boxの合間の横方向[ ~margin / ~border / ~padding ]は、尊重される†。 一連の~boxが縦方向に整列される仕方は、様々になり得る: それらの下端/上端が,互いに整列されることもあれば、それらの~textの基底線が 互いに整列されることもある。 ある一つの行lを形成する~boxたちを包含する矩形な区画は、 `行l~box@ と呼ばれる。 ◎ In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

【† 行内~levelの非置換d要素に対しては、 縦方向の~marginによる効果はない。 また,[ ~border/~padding ]は、縦方向でも効果はあるが,行l~boxの縦幅には影響しない(下に例を示す)。 】

`行l~box$の横幅は、その`包含塊$と, `浮動体$の有無により決定される。 `行l~box$の縦幅は、 § 行l縦幅の計算 に与える規則から決定される。 ◎ The width of a line box is determined by a containing block and the presence of floats. The height of a line box is determined by the rules given in the section on line height calculations.

`行l~box$の高さは、常に,それを形成しているすべての~boxを包含するに十分な高さにされる。 しかしながら,この高さは、それらの~boxの高さの最大よりも高くなる場合もある(例えば、~boxたちが互いの基底線が~~揃うように整列されている場合)。 ~box %B の縦幅が`行l~box$より狭い場合の,その行l~boxの中での %B の縦方向の整列は、 `vertical-align$p ~propにより決定される。 ◎ A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the vertical-align property.\

`行内~levelの~box$たちが単独の`行l~box$の中に横方向に収まり切らない場合、収まり切らない部分は,次の`行l~box$に折り~~返され 【これは、1 個の行内~levelの~boxを複数個の行l~boxに分断し得る】 、縦方向に堆積されていく。 したがって、段落は,縦方向に堆積する`行l~box$たちからなる。 `行l~box$たちが堆積されるときは、(他から指定されない限り)縦方向に離されることなく,また 重合することも決してない。 ◎ When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes. Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

一般に、`行l~box$の[ 左端~辺/右端~辺 ]は,その包含塊の[ 左端~辺/右端~辺 ]に接する。 しかしながら、包含塊の辺と`行l~box$辺の合間に,浮動~boxが来ることもある。 したがって、同じ`行内~整形~文脈$ 内の`行l~box$たちの横幅は,一般的には同じ(包含塊の横幅)になるが、横方向に可用な空間が`浮動体$に因り抑制される場合には,変わり得ることになる。 また、一般に,同じ`行内~整形~文脈$に関与する各`行l~box$の縦幅も,まちまちになり得る(例:背が高い画像を包含する行lと, ~textのみを包含する行lなど)。 ◎ In general, the left edge of a line box touches the left edge of its containing block and the right edge touches the right edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same width (that of the containing block), they may vary in width if available horizontal space is reduced due to floats. Line boxes in the same inline formatting context generally vary in height (e.g., one line might contain a tall image while the others contain only text).

同じ`行l~box$上にある一連の`行内~levelの~box$の横幅の合計が,その行l~boxの横幅より狭い場合、その行l~boxにおける,それらの横方向の分布は、 `text-align$p ~propにより決定される。 その~propの値が `justify^v 【 “両端揃え” 】 ならば、~UAは,`行内~box$(ただし, `inline-table^v / `inline-block^v ~boxは除く)内の~spaceや単語を伸張してもヨイ。 ◎ When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the text-align property. If that property has the value justify, the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

`行l~box$の横幅を超過するような`行内~box$は、複数の`行l~box$にわたるように,いくつかの~boxに分割される。 分割できない`行内~box$は、`行l~box$を~overflowする(例: 単独の文字からなる`行内~box$ / 言語に特有な単語~分断~規則から `行内~box$の中での分断【 “~~改行” 】が許容されていない / `行内~box$に対する `white-space$p 値が `nowrap^v または `pre^v にされている)。 ◎ When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

`行内~box$が分割されるとき、どの分割-の切り口の所でも,[ ~margin / ~border / ~padding ]による視覚的な効果はない。 ◎ When an inline box is split, margins, borders, and padding have no visual effect where the split occurs (or at any split, when there are several).

`行内~box$は、`双方向-~text$処理に因り, 同じ`行l~box$の中であっても,複数の~boxに分割されることもある。 ◎ Inline boxes may also be split into several boxes within the same line box due to bidirectional text processing.

`行l~box$は、`行内~整形~文脈$の中で,`行内~level$の内容を保持する必要に応じて作成される。 次のいずれも包含しないような`行l~box$は…:

  • 空でない~text — `保全d空白$も含め【!~CSS22/text.html#white-space-prop】†
  • 非 0 の【横方向の】††[ ~margin, ~padding, ~border ]いずれかを伴う`行内~level$の要素
  • `~flow内$にある内容(画像, `行内-塊$, `行内-~table$など)

…は:

  • その内側にある要素†††の位置を決定する目的††††においては,縦幅 0 の`行l~box$として扱うモノトスル。
  • 他の目的においては、存在しないものとして扱うモノトスル。
◎ Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

【† この “保全d空白” には,改行文字も含まれる。 】【†† この 0 は、横方向~margin用の `auto^v 値も含む(行内~要素に対しては,その使用~値は 0 になるので)。 また、縦方向の[ ~margin, ~padding, ~border ]は何であれ,上の条件に影響しない(それは、 行l~boxの縦幅に影響しない ので)。 】【††† その行l~boxを生成させた要素の,子孫が生成する~box。 】【†††† 例えば、`浮動体$の`現在の行l$の位置。 】

`行内~box$の構築~例をここに示す。 ( ~HTML `塊~levelの要素$ `P^e で作成された)次の段落は、合間に[ `EM^e, `STRONG^e ]要素が挟まれた,匿名~textを包含している: ◎ Here is an example of inline box construction. The following paragraph (created by the HTML block-level element P) contains anonymous text interspersed with the elements EM and STRONG:

<P>いくつかの<EM>強調された単語</EM>が,
<STRONG>この文の中</STRONG>に現れています。</P>
◎
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

`P^e 要素は、`塊~box$を生成する。 それは、 5 つの`行内~box$を包含し,うち 3 つは匿名である: ◎ The P element generates a block box that contains five inline boxes, three of which are anonymous:

  • 匿名: "いくつかの"
  • `EM^e: "強調された単語"
  • 匿名: "が,"
  • `STRONG^e: "この文の中"
  • 匿名: "に現れています。"
◎ Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear."

~UAは、段落を整形するときに,これら 5 ~boxをいくつかの`行l~box$の中へ~flowする。 この例では、 `P^e 要素により生成される~boxが、これらの`行l~box$用に包含塊を確立する。 この包含塊が,すべての`行内~box$に足るほど幅広であれば、単独の`行l~box$に収まることになる: ◎ To format the paragraph, the user agent flows the five boxes into line boxes. In this example, the box generated for the P element establishes the containing block for the line boxes. If the containing block is sufficiently wide, all the inline boxes will fit into a single line box:

いくつかの強調された単語が,この文の中に現れています。
◎
Several emphasized words appear in this sentence, dear.

そうでなければ、一部の`行内~box$が分割され、いくつかの`行l~box$にまたがることになる。 段落は、例えば次のように分割される: ◎ If not, the inline boxes will be split up and distributed across several line boxes. The previous paragraph might be split as follows:

いくつかの強調された単語が,
この文の中に現れています。
◎
Several emphasized words appear
in this sentence, dear.

あるいは次の様に: ◎ or like this:

いくつかの強調された
単語が,この文の中
に現れています。
◎
Several emphasized  
words appear in this 
sentence, dear.

前の例では、 `EM^e ~boxは, 2 つの `EM^e ~boxたちに分割された(以下 `前半^V, `後半^V と記す)。 この~box用の[ ~margin, ~border, ~padding, ~text装飾 ]は、[ `前半^V の~~終端 / `後半^V の~~始端 ]に対しては可視~効果を持たない。 ◎ In the previous example, the EM box was split into two EM boxes (call them "split1" and "split2"). Margins, borders, padding, or text decorations have no visible effect after split1 or before split2.

上の例の `EM^e 要素に、次の~styleが適用されたとする: ◎ Consider the following example:

EM {
  padding: 2px;
  margin: 1em;
  border: medium dashed green;
  line-height: 2.4em;
  background: yellow;
}

`P^e の横幅に依存して、~boxたちは,例えば次のように分布する: ◎ Depending on the width of the P, the boxes may be distributed as follows:

いくつかの強調された単語が,この文の中に現れています。
段落の内縁~横幅
 
~margin, ~border, ~paddingの表示に対する,行l分断の効果を示す図(利用中の~browserによる呈示)。 ◎ Image illustrating the effect of line breaking on the display of margins, borders, and padding.
  • "強調された単語" は、`前半^V, `後半^V の 2 つの~boxに分断され, `後半^V は次の行lに折り~~返されている。
  • `前半^V / `後半^V を含む行l~boxの縦幅は、 `EM^e ~boxによる縦幅( `line-height^p ) `2.4em^v になる(図では,ちょうど `前半^V の~borderと `後半^V の~borderの下端の間隔に等しくなる)。
  • ~marginは, `前半^V の前 / `後半^V の後 に挿入される。 ◎ The margin is inserted before "emphasized" and after "words".
  • ~paddingは、 `前半^V の[ 前, 上, 下 ], および `後半^V の[ 後, 上, 下 ]に挿入される。 いずれにせよ,点線( `dashed^v )の~borderは 3 側に描画される。 ◎ The padding is inserted before, above, and below "emphasized" and after, above, and below "words". A dashed border is rendered on three sides in each case.
  • 【 `可分な行内$に対しては、縦方向の[ ~margin / ~border / ~padding ]は,行l~boxの縦幅に影響しない(次の図)。 】
前に現れる内容は、後続の~textの背景と~borderで覆われるかもしれない。
いくつかの強調された単語が,この文の中に現れています。
上の例から,縦方向についてのみ[ ~margin, ~border, ~padding ]を増やしたときの,利用中の~browserによる呈示。

9.4.3. 相対~位置決め

【 この節の内容は、 `CSS Positioned Layout^cite § 相対~位置決め に定義されるので,和訳は省略する。 】

9.5. 浮動体

`浮動体@( float — “浮動された( `floated^en )” / “浮動( `floating^en )” ~boxとも称される)は、`現在の行l$において,[ 左端, または右端 ]へ寄せられる~boxである。 浮動体の最も興味を引く特徴は、その周りの内容が,浮動体の脇に沿って~flowし得るようになることである(また、 `clear$p ~propにより,それを禁制することもできる)。 周りの内容は、左方へ浮動された~boxに対しては,その右~脇から下へ~flowし、右方へ浮動された~boxに対しては,左~脇から下へ~flowする。 以下は、浮動体の位置決めと内容~flowの序論である — 浮動体の挙動を統制する正確な規則 は、 `float$p ~propの記述にて与えられる。 ◎ A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the clear property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the float property.

【 原文には、明示的に定義されていないが: 】

浮動された~boxは、その外縁~辺が[ 包含塊の辺, または[ その~boxに`先行する$別の浮動~boxがあるならば,その外縁~辺 ]]に接するまで、左方へまたは右方へ寄せられる。 浮動される~boxの上端 `外縁~辺$は、`現在の行l$の上端に整列される。 ◎ A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

浮動体の脇に~flowされる内容に対し,横方向の部屋が十分でない場合、内容は[ 何らかの内容を収められるようになるか, または 浮動体を過ぎる所 ]まで,下方へズレる。 ◎ If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.

浮動体は`~flow内$にないので、浮動~boxの 前/後 に作成される,`有位置$でない`塊~box$は、浮動体が存在しなかったかのように縦方向に~flowする†。 しかしながら、[ 浮動体の`側方$に重合する,`現在の行l$ 以降の`行l~box$ ]は、浮動体の~margin~boxが占める部屋に必要とされるだけ短縮される。 ◎ Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

【† すなわち、浮動体に後続する塊~boxの位置と~size自体は,浮動体が無かったかのように決定され、浮動体は,塊~boxの中に入り込むように配置され、塊~boxの行内~内容は,浮動体の脇に~flowする。 次の例の様に: 】

【この例は,この訳による追加。】
<div style="border:solid blue 4px;">
  <div style="float:left; background:silver;">左へ浮動する内容</div>
  <div style="border:solid red 1px; margin: 0.5em;">
    浮動体に後続する塊~box内の,行内~内容
  </div>
</div>
左へ浮動する内容
浮動体に後続する塊~box内の,行内~内容
利用中の~browserによる,上の~HTMLの実際の呈示。

外側の `div^e の内縁~辺(この例では図の青線の内縁)が、当の塊~box用の包含塊になる。 塊~boxの~border(図の赤線)は、浮動体の有無に関わらず,包含塊の横幅のほとんど(~marginを除いた部分)を占めることになる。 `現在の行l$は、塊~boxの上端~外縁~辺(包含塊の上端)に概念的に存在する,縦幅 0 の行l~boxと見なされる。

浮動体の `側方@ とは、浮動体の上端~margin辺から下端~margin辺まで(両端は含まない)を占める,横幅~無限な区画である。 ◎ A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.

【 この訳では、原文による “側方” ( “a shortened line box is next to a float” )の定義を,行l~box以外の対象にも転用できるように一般化した上で,この用語を利用する他の定義も 等価な言い回しに変換している。 】

注記: 外縁~縦幅が 0 以下の浮動体に対しては、その`側方$は空になるので,`行l~box$は短縮されないことになる。 ◎ Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.

`行l~box$が短縮されるとき,その中に~flowされる内容を包含するには短か過ぎる場合、`行l~box$は,[ 何らかの内容を収められるようになるか, または 浮動体の`側方$を過ぎる所 ]まで、下方へズレる(それに伴い,その横幅も算出し直される)。 そうでなければ、浮動~boxが浮動されないとするとき,`現在の行l$に~flowされることになる内容は、書字方向( `direction$p )に関わらず,~boxが浮動する方向の反対~側に~flowし直される。 ◎ If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the same line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.

次に挙げる要素の~border~boxは、要素~自身と同じ`塊~整形~文脈$に関与する どの`浮動体$の~margin~boxとも重合してはならない:

  • ~table
  • `塊~level$の`置換d要素$
  • `通常~flow$にて,新たな`塊~整形~文脈$を確立するような要素( `overflow$p が `visible^v でない要素など)

実装は、これらの要素をそのように配置する際には,必要に応じて 次を行うべきである:

  • 要素を,それに`先行する$どの浮動体よりも下に配置する。
  • ただし、空間が足りるなら、要素を それらの浮動体の隣に配置してもヨイ — その際には要素の~border~boxを § 10.3.3 に定義されるものより幅狭にしてもヨイ。 【浮動体が要素の`~clear対象$である場合、この選択肢はない。】

~UAが要素をいつ浮動体の`側方$に置くか, あるいは 要素が どの程度 より幅狭になれるかについては、~CSS2では定義されない。

◎ The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with overflow other than visible) must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS 2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

次の文書~断片において、包含塊は,その内容を浮動体の`側方$に包含するには幅狭~過ぎるので、内容は浮動体の下に移動される。 ◎ Example. In the following document fragment, the containing block is too narrow to contain the content next to the float, so the content gets moved to below the floats where it is aligned in the line box according to the text-align property.

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }
...
<p>
  <span>浮動体</span>
  Supercalifragilisticexpialidocious
</p>

この断片は、次の様になるであろう: ◎ This fragment might look like this:

浮動体
Supercalifragilisticexpialidocious
分断できない内容~片が,浮動体の`側方$に収まり切らないとき、その下へ~flowし直される効果を示す図。 ◎ Image illustrating the effect of an unbreakable piece of content being reflowed to just after a float which left insufficient room next to it for the content to fit.
【この例は,この訳による追加。】
<div style="border:solid black 1px; width:20em;">
  浮動体の現在の行lに配置される行内~内容は、浮動する方向
  <em style="float:left;">(左~浮動体)</em>
  の反対~側に~flowし直される。
</div>

文書は左横書きとする。 文書~内で左~浮動体より先に現れる内容であっても,現在の行lに配置される部分は、浮動体が左へ浮動するに伴い,その右~脇へ移動することになる:

浮動体の現在の行lに配置される行内~内容は、浮動する方向 (左~浮動体) の反対~側に~flowし直される。
利用中の~browserによる,上の~HTMLの実際の呈示。
浮動体の現在の行lに配置される行内~内容は、浮動する方向 (右~浮動体) の反対~側に~flowし直される。
上の例の 左~浮動体右~浮動体`float$p: `right^v )に変えたときの呈示。

複数の浮動体が,同じ行l上で互いに隣接し得る — この~modelは、それらの浮動体にも適用される。 ◎ Several floats may be adjacent, and this model also applies to adjacent floats in the same line.

【この例は,この訳による追加。】

次の行内~levelの内容に対し:

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす

文字 “~_fL” は左に浮動させ( `float$p は `left^v ),文字 “~_fR” は右に浮動させた( `right^v )とする。 複数の浮動体が同じ行lに配置され、同じ行lにて,浮動体の前/後に現れる~textは、浮動体の反対~側の脇に~flowし直される:

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
利用中の~browserによる呈示。

上の例から更に,すべての浮動体に下端~borderを加えて縦幅を増やした場合 — 浮動体は、`先行する$他の浮動体の`側方$に~~空きがある限り,なるべく上方へ寄せられる:

い~_fRろは~_fLに~_fLほへ~_fRと~_fLち~_fLり~_fRぬる~_fLを~_fLわ~_fRか~_fLよ~_fRた~_fLれ~_fRそ~_fLつね~_fRな~_fR~_fLら~_fRむ~_fLう~_fLゐ~_fRの~_fLお~_fRく~_fLや~_fL~_fRま~_fLけ~_fRふ~_fLこ~_fRえ~_fLて~_fRあ~_fRさ~_fLき~_fRゆ~_fRめ~_fLみ~_fRしゑ~_fRひも~_fLせ~_fRす
利用中の~browserによる呈示。

次の規則は、 class="icon" を伴うすべての `IMG^e ~boxを左方へ浮動させる(加えて,左端~marginも `0^v に設定する): ◎ The following rule floats all IMG boxes with class="icon" to the left (and sets the left margin to 0):

img.icon { 
  float: left;
  margin-left: 0;
}

次の~HTML~sourceと~stylesheetを考える: ◎ Consider the following HTML source and style sheet:

<BODY>
  <P><IMG src=img.png alt="浮動する画像">
     これは見本の~textであって、...
</BODY>

~CSS:

IMG { float: left }
BODY, P, IMG { margin: 2em 1em; }

`IMG^e ~boxは左方へ浮動される。 後続する内容は、浮動体の右方に,浮動体の`現在の行l$から開始するように整形される。 浮動体の右方に来る`行l~box$たちは、浮動体が在ることに因り短縮されるが、浮動体を過ぎて以降は, “通常の” 横幅( `P^e 要素により確立される包含塊のそれ)に戻る。 この文書は、次の様に整形されるであろう: ◎ The IMG box is floated to the left. The content that follows is formatted to the right of the float, starting on the same line as the float. The line boxes to the right of the float are shortened due to the float’s presence, but resume their "normal" width (that of the containing block established by the P element) after the float. This document might be formatted as:

max( %B, %P )
%B %P
%P %B
`IMG^e
これは見本の~textであって、浮動~要素が,親の中で その ~margin, ~border, ~padding は尊守しつつ,左/右に移動されることを示す以外の目的はない。 これは見本の~textであって、浮動~要素が,親の中で その ~margin, ~border, ~padding は尊守しつつ,左/右に移動されることを示す以外の目的はない。
浮動~boxが,相互作用する様子を示す図。 図の %B, %P は、順に `BODY^e, `P^e の~marginを表す。 浮動しない要素の間では,連接する縦方向の~marginが相殺される一方で、 浮動体( `IMG^e )の~margin(図の黄色の枠)は、他と相殺されない。 ◎ Image illustrating how floating boxes interact with margins.

~HTMLが次であったとしても、整形は正確に同じになる: ◎ Formatting would have been exactly the same if the document had been:

<BODY>
  <P>これは見本の~textであって、
  <IMG src=img.png alt="この画像は浮動体の説明用。">
           ...
</BODY>

何故なら、浮動体の左方に来る`現在の行l$上の内容は,浮動体の右~脇から下へ~flowするように配置し直されるので。 ◎ because the content to the left of the float is displaced by the float and reflowed down its right side.

`~marginの相殺-法$に言明されているように、浮動~boxの~marginと他の~boxの~marginとが`相殺され$ることは、決してない。 したがって,この例においては、 `P^e ~boxと, 浮動された `IMG^e ~boxとの合間の縦方向~marginが`相殺され$ることはない。 ◎ As stated in section 8.3.1, the margins of floating boxes never collapse with margins of adjacent boxes. Thus, in the previous example, vertical margins do not collapse between the P box and the floated IMG box.

浮動体は、`通常~flow$の下でも,他の~boxと重合することはある(例:浮動体の`側方$に重合するような 通常~flowに属する~boxがあって,その横方向~marginが負である場合など)。 その際の塗ng順序については、`積層~文脈$を見よ。 ◎ The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float’s parent stacking context. A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

`通常~flow$の下で,浮動体が他の要素の~borderと重合する場合に何が起こるかを,次の図に示す: ◎ Here is another illustration, showing what happens when a float overlaps borders of elements in the normal flow.

最初の段落の見本~textがこの中に~flowされている。 ~sourceのこのあたりには
浮動する画像がある。 画像は縦に長いので、この段落より下へ突き出る。
ゆえに、 2 番目の段落も影響されることになる。 この中のどの行内~boxも,画像の~marginより内側に侵入することは禁制されているので、 “脇へ押し出される”。 段落の~boxは,依然として矩形であるが、その~borderと背景は,浮動している画像の背後に隠される。
浮動している画像は、それに重合する`塊~box$の~border(図の赤線)を遮る。 図の灰色の点線は外縁~辺(~margin辺), 細い青線が`内縁~辺$(内容~辺)を表す。 ◎ Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image. ◎ A floating image obscures borders of block boxes it overlaps.

`clear$p ~propを利用して,内容を浮動体の`側方$に~flowさせなくする方法を、次の例で、図解する。 ◎ The following example illustrates the use of the clear property to prevent content from flowing next to a float.

上の例に、次の規則が加えられたとするとき: ◎ Assuming a rule such as this:

p { clear: left }

整形は、次の様になるであろう: ◎ formatting might look like this:

最初の段落の見本~textがこの中に~flowされている。 ~sourceのこのあたりには
浮動する画像がある。 画像は縦に長いので、この段落より下へ突き出る。

~clearance
この段落は、先行するどの左~浮動体の~margin辺よりも下に来るように, `clear^p ~propが `left^v に設定されている。 段落の上端~marginの上には`~clearance$が加えられる。
両~段落とも、 `clear$p は `left^v に設定されることにより、 2 番目の段落は,浮動体の下へ “押出される” 。 この~~効果は、段落の上端~marginの上に “~clearance” を加えることで成遂げられる( `clear$p ~propを見よ)。 ◎ Both paragraphs have set 'clear: left', which causes the second paragraph to be "pushed down" to a position below the float — "clearance" is added above its top margin to accomplish this (see the clear property).

9.5.1. 浮動体の位置決め: `float^p ~prop

◎名 `float@p ◎値 `left$v | `right$v | `none$v ◎初 `none^v ◎適 すべての要素 — ただし、`絶対的に位置され$た要素は除く(注釈文を見よ)。 ◎継 されない ◎百 受容しない ◎算 指定d値 — ただし、注釈文を見よ。 ◎順 文法に従う ◎ア 離散的 ◎表終

この~propは、~boxが浮動すべきか, するならば 左方, 右方 のいずれへ浮動するかを指定する。 どの要素にも設定し得るが、`絶対的に位置され$た~boxを生成する要素には適用されず,その算出d値も~~改められることになる — § 9.7を見よ。 各種~値の意味は: ◎ This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

`left@v
要素は、左浮動~box — 左方へ浮動される`塊~box$ — を生成する。 周りの内容は、~boxの右~脇に, かつ ~boxの上端から~flowする( `clear$p ~propの~subjectになる)。 ◎ The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the clear property).
`right@v
要素は、右浮動~box — 右方へ浮動される`塊~box$ — を生成する。 周りの内容は、~boxの左~脇に, かつ ~boxの上端から~flowする( `clear$p ~propの~subjectになる)。 ◎ Similar to left, except the box is floated to the right, and content flows on the left side of the box, starting at the top.
`none@v
~boxは浮動されない。 ◎ The box is not floated.

~UAは、`根~要素$に対しては,その `float$p を `none$v に扱ってもヨイ。 ◎ User agents may treat float as none on the root element.

浮動体の挙動は、以下に与える規則で統制されるモノトスル — 尚,以下の規則においては:

  • 他の浮動体も含め,どの~boxも、規則が対象にする浮動体と同じ`塊~整形~文脈$に関与するものに限るとする。
  • 浮動体の[ 上端/右端/下端/左端 ]は、`外縁~辺$を指すとする。

【 原文には明示的に述べられていないが、以下の規則は,`相対~位置決め$より先に適用される。 】

◎ Here are the precise rules that govern the behavior of floats:
  1. 所与の左浮動~box %L に対し ⇒ %L の左端は, %L の`包含塊$の左端より左に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
  2. 所与の左浮動~box %L1, %L2 に対し, %L1 は %L2 に`先行する$ならば、次のいずれかが満たされる:

    • %L1 の右端は, %L2 の左端より右に位置しない
    • %L1 の下端は, %L2 の上端より下に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
  3. 所与の左浮動~box %L, 右浮動~box %R に対し, %L, %R の`側方$が重合するならば ⇒ %L の右端は, %R の左端より右に位置しない ◎ The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.
  4. 所与の浮動~box %F に対し ⇒ %F の上端は、 %F の`包含塊$の上端より上に位置しない ◎ A floating box’s outer top may not be higher than the top of its containing block.\
  5. `相殺され$る 2 つの~marginの合間にある浮動体は、[ その`~flow$の一部を成す,浮動体の他は内容が空な`匿名~塊~box$である親 ]があるかのように位置される。 【浮動体の`現在の行l$は、この親に包含される縦幅 0 の行l~boxになる。】 そのような親の位置は、 ~margin相殺の規則 にて定義される。
    <div style="margin-bottom:1em;">塊</div>
    <span style="float:left;">左浮動~box</span>
    <div style="margin-top:1em;">塊</div>
    
    左浮動~box
    ◎ When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
  6. 所与の浮動~box %F, および %F に`先行する$[ `塊~box$ / `浮動~box$ ] %B に対し ⇒ %F の上端は %B の外縁~上端~辺より上に位置しない ◎ The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  7. 所与の浮動~box %F, および[ %F に`先行する$ ある~boxを包含している`行l~box$ %B ]に対し ⇒ %F の上端は %B の上端 より上に位置しない ◎ The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
  8. 所与の左浮動~box %L に対し, %L の左端が,包含塊の左端に接していないならば† ⇒ %L の右端は,包含塊の右端より右に位置しない

    右浮動~boxについても相似的な規則が課されるとする。

    ◎ A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
  9. 【 `clear$p が設定された浮動体に対する 追加的な拘束。 】
  10. 以上による制約の下で、浮動~boxは アリな限り上方に配置する。 ◎ A floating box must be placed as high as possible.
  11. 前項も含め,以上による制約の下で、[ 左浮動/右浮動 ]~boxは アリな限り[ 左方/右方 ]に配置する。 ◎ A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

【† 原文では次の様に記されている: 】

“所与の左浮動~box %L1, %L2 に対し, %L1 は %L2 に`先行する$, かつ %L2 は %L1 の右にあるならば: %L2 の右端~外縁~辺は,包含塊の右端~辺より右に位置しない(くだけて言えば、可能な限り左方に来ていない左~浮動体は、包含塊の右端を突き出てはならない)”

しかしながら、 %L1 の横幅が 0 の場合は,例外とされるべきであろう( “くだけて言えば” 以下の部分が正しい挙動とされるべき)。 例えば:

<div style="width: 10em; border:solid blue 1px;">
<!-- 左~浮動体1(横幅 0 ) -->
<span style="float:left; height:1em; outline:solid red 1px;"></span>
<span style="float:left; width: 20em;">
左~浮動体2(横幅は包含塊のそれを超える)
</span>
…
</div>
左~浮動体2(横幅は包含塊のそれを超える)
利用中の~browserによる上の~HTMLの呈示。 原文の規則に従うなら、 2 番目の左~浮動体は最初の浮動体(図の赤線)の下端より下に来なければならない。

ただし,~CSS2においては、次の様な浮動体 %F の位置は未定義である: [ %F と同じ`塊~整形~文脈$に属する, `~flow内$にある負な縦方向~margin ]があって,[ そのような~marginすべてが 0 に設定された ]とするとき、 %F の位置がより上になる。 ◎ But in CSS 2, if, within the block formatting context, there is an in-flow negative vertical margin such that the float’s position is above the position it would be at were all such negative margins set to zero, the position of the float is undefined. ◎ ↑↑References to other elements in these rules refer only to other elements in the same block formatting context as the float.

次の~HTML断片により、 b は右端へ浮動される。 ◎ This HTML fragment results in the b floating to the right.

<P>a<SPAN style="float: right">b</SPAN></P>

`P^e 要素の横幅が十分あれば、 a と b は次の様に横並びにされる: ◎ If the P element’s width is enough, the a and the b will be side by side. It might look like this:

a
b
`P^e が生成する~box(赤い点線)の中で、左に位置する a と, 浮動して右へ寄せられる b ◎ An a at the left side of a box and a b at the right side

9.5.2. 浮動体の~~脇への~flowの制御-法: `clear^p ~prop

◎名 `clear@p ◎値 `none$v | `left$v | `right$v | `both$v ◎初 `none^v ◎適 `塊~levelの要素$ ◎継 されない ◎百 受容しない ◎算 指定d値 ◎順 文法に従う ◎ア 離散的 ◎表終

この~propは、要素の `~clear対象@ とされる浮動~boxたちを指示する:

  • 浮動しない`塊~levelの要素$に対しては、次が要求される:[ 要素が生成する~box(たち)の上端`~border辺$ ]は,[ 要素の`~clear対象$である どの浮動体の下端 `外縁~辺$ ]よりも上に位置しない。
  • `浮動~要素$に対しては、 後述の拘束 を見よ。
  • 他の要素には適用されない(ただし、 後述の注記 を見よ)。

【 “`~clear対象$” は、この訳で新たに導入した用語である。 その理由は、原文の “clear する” という動詞としての用法を和訳するためには,その目的語 — すなわち,~clear対象 — に変換する必要があること,および このように定義した方が本文を簡潔に記述できるからである。 】

◎ This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The clear property does not consider floats inside the element itself or in other block formatting contexts.

要素の`~clear対象$は、`clear$p の値に応じて,次で与えられる: ◎ Values have the following meanings when applied to non-floating block-level boxes:

`left@v
要素に`先行する$すべての左浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
`right@v
要素に`先行する$すべての右浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
`both@v
要素に`先行する$すべての浮動~box。 ◎ Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
`none@v
空集合(すなわち、~boxの位置には,以下に述べる拘束は適用されないことを意味する)。 ◎ No constraint on the box’s position with respect to floats.

【 この節の以下の記述は、下の例の終わりまで,浮動体でない要素を対象にする。 】

`none$v 以外の値に対しては、 `~clearance@ が導入され得る。 ~clearanceは、~margin相殺を妨げつつ,要素の `margin-top$p の上方にアキを加えるものとして動作する。 それは、浮動体の`側方$に重合しない所まで,要素を下方へ押出すために利用される。 ◎ Values other than none potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

要素の `仮の位置^V とは、要素が,[ その `clear$p ~propが `none^v である下で配置されたとき ]の,上端~border辺として与えられる。 要素は、その `仮の位置^V が,要素の`~clear対象$に含まれている いずれかの浮動体の`側方$にあるとき、 `~clearanceを持つ@ とされ、`~clearance$が導入されることになる(必然的に、要素の `clear$p の算出d値は,非 `none^v である必要がある)。 ◎ Computing the clearance of an element on which clear is set is done by first determining the hypothetical position of the element’s top border edge. This position is where the actual top border edge would have been if the element’s clear property had been none.

要素が`~clearanceを持つ$場合、要素とその周りの要素による~margin相殺の挙動も,`~marginの相殺-法$に則って変化し、`~clearance$の量は,次のいずれかの挙動により設定される: ◎ If this hypothetical position of the element’s top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

  • 挙動 A: `~clearance$を,次に挙げる 2 つの量の最~大に設定する: ◎ Then the amount of clearance is set to the greater of:

    1. 要素が生成する塊の上端~border辺を[ `~clear対象$の浮動体の下端~外縁~辺のうち,最も下方にある位置 ]に配置するために必要とされる量。

      【 `~clearance$がこの量で与えられる場合、塊の上端~marginは,塊の上端~位置に影響しなくなることになる。 】

      ◎ The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
    2. 塊の上端~border辺を `仮の位置^V に配置するために必要とされる量。

      【 `仮の位置^V は浮動体の`側方$にある筈なので,何のために この量も得る必要があるのか不思議に見えるが、このことは,`~clearance$が導入される — すなわち,要素の上端~marginが他と相殺されなくなる — と同時に,その副作用として浮動体の上端~位置も変わり得ることを意味する(下の例を見よ)。 】

      ◎ The amount necessary to place the top border edge of the block at its hypothetical position.
  • 挙動 B: `~clearance$を,単に挙動 A の最初の項で与えられる量に設定する。 ◎ Alternatively, clearance is set exactly to the amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

注記: いずれの挙動も、既存の Web 内容との互換性に関する評価を待っているため,許容されている。 将来の~CSS仕様は、このいずれか, または他の挙動を要求することになる。 ◎ Note: Both behaviors are allowed pending evaluation of their compatibility with existing Web content. A future CSS specification will require either one or the other.

注記: `~clearance$は 0 以下にもなり得る。 ◎ Note: The clearance can be negative or zero.

【~clearanceの計算例。以下、この例の和訳は省略する。】
【~clearanceが負になり得る例。以下、この例の和訳は省略し,次の例に差し替える。】

次の~HTMLが与えられた下では:

<div style="line-height:1.2em;">
  <div style="margin-bottom:4em; border:solid pink 5px;"
  >塊1</div>
  <div>
    <div style="float:left; background:yellow;"
    >(浮動体)</div>
    <div style="margin-top:1em; border:solid pink 5px;"
    >塊2</div>
  </div>
</div>

塊1と塊2の~marginは相殺され,塊1の下端~border辺と塊2の上端~border辺との間隔は、[ 塊1の下端~marginと塊2の上端~marginの最~大 ] = `4em^v になる。 浮動体の`現在の行l$の上端は、塊2の親 `div^e の上端`内縁~辺$(図の点線)に位置する(塊2の~border辺に一致する):

塊1
(浮動体)
塊2
利用中の~browserによる上の~HTMLの呈示。 赤みがかった太めの線は、塊1/2の~border。

塊2の~styleに `clear$p: `left^v を追加したとする。 その呈示は、次の様になる:

塊1
(浮動体)
塊2
塊2に `clear$p: `left^v を追加したときの,利用中の~browserによる呈示

~marginは相殺されなくなり、塊2は浮動体の下に来る。 塊1の~marginが浮動体との間を隔てる結果,浮動体の位置はそのままになるので、`~clearance$は,挙動 A, B いずれにせよ ( ( 浮動体の縦幅 ) − ( 塊2の上端~margin ) ) になる。

上の~HTMLにて、今度は、塊1の下端~marginと塊2の上端~marginを入れ替えたとする:

<div style="line-height:1.2em;">
  <div style="margin-bottom:1em; border:solid pink 5px;"
  >塊1</div>
  <div>
    <div style="float:left; background:yellow;"
    >(浮動体)</div>
    <div style="margin-top:4em; border:solid pink 5px;"
    >塊2</div>
  </div>
</div>

その呈示は,入れ替える前と同じになるが、塊2の~styleに `clear$p: `left^v を追加したときの呈示は、次の様になる:

塊1
(浮動体)
塊2
`clear$p の効果により,浮動体の位置が変化する図。

~marginが相殺されなくなるに伴い、浮動体の`現在の行l$の位置(図の点線)は,塊2の上端~borderから塊1の下端~margin辺へ移動する。 浮動体の縦幅が図のように小さければ: 挙動 A の下では、塊2の位置は そのまま維持されることになる。 挙動 B の下では、塊2の上端が浮動体の下端に接合され,~~元の位置より上に移動することになる。

`clear^p ~propが浮動~要素~上に設定されたときは、 浮動体の位置決め規則 に次の拘束も追加される: ◎ When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

  • 所与の浮動体 %F に対し ⇒ %F の上端 `外縁~辺$は、 %F の`~clear対象$である,どの浮動体の下端 `外縁~辺$よりも上に位置しない ◎ The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

注記: `clear$p ~propは、~CSS1においては 【行内~levelも含め】 すべての要素に適用される — したがって、すべての要素~上でこの~propを~supportする実装もある。 [ ~CSS1998 /~CSS2 ]においては、`塊~levelの要素$のみに適用される。 したがって、作者は,この~propを`塊~levelの要素$に限って利用するべきである。 `clear$p を`行内~levelの要素$ 上でも~supportする実装は、上に説明した`~clearance$を設定するのでなく,分断を強制するべきである — 実質的には、空な`行l~box$を一つ以上~挿入する(または、 § 9.5 に述べたように,新たな`行l~box$を下方へズラす)ことにより、[ `~clearanceを持つ$ような行内~levelの要素を含んでいる`行l~box$ ]の上端を`~clear対象$の どの浮動~boxよりも下へ移動させる ]ことになる。 ◎ Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 (1998) and CSS 2 the clear property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline’s line box to below the respective floating box(es).

9.6. 絶対~位置決め

【 この節の内容は、 `CSS Positioned Layout^cite § 絶対~位置決め に包摂されるので,和訳は省略する。 】

9.7. `display^p, `position^p, `float^p の関係性

~boxの生成と~layoutに影響する 3 種の~prop — `display$p, `position$p, `float$p — は、次の様に相互作用する【以下における各~propは、当の~boxの それを指す】: ◎ The three properties that affect box generation and layout — display, position, and float — interact as follows:

  1. `display!p の指定d値は `none$v ならば ⇒ 要素は~boxを生成しないので, `position$p / `float$p は適用されない。 ◎ If display has the value none, then position and float do not apply. In this case, the element generates no box.
  2. 他の場合, `position$p の指定d値は[ `absolute$v / `fixed$v ]ならば ⇒ ~boxは`絶対的に位置され$る(~boxの位置は,各種`~inset~prop$と~boxの包含塊から決定される)。 `float!p の算出d値は `none$v になり, `display$p の算出d値は 下の表に従う。 ◎ Otherwise, if position has the value absolute or fixed, the box is absolutely positioned, the computed value of float is none, and display is set according to the table below. The position of the box will be determined by the top, right, bottom and left properties and the box’s containing block.
  3. 他の場合, `float$p の指定d値は `none$v 以外ならば ⇒ ~boxは浮動され, `display$p の算出d値は 下の表に従う。 ◎ Otherwise, if float has a value other than none, the box is floated and display is set according to the table below.
  4. 他の場合,要素は`根~要素$であるならば ⇒ `display$p の算出d値は 下の表に従う。 ただし、 `display!p の指定d値が `list-item$v の場合に その算出d値が[ `block$v / `list-item$v ]のいずれになるかは、~CSS2においては未定義である。 ◎ Otherwise, if the element is the root element, display is set according to the table below, except that it is undefined in CSS 2 whether a specified value of list-item becomes a computed value of block or list-item.
  5. 他の場合 ⇒ `display!p ~propの指定d値が,そのまま算出d値になる。 ◎ Otherwise, the remaining display property values apply as specified.
指定d値◎ Specified value 算出d値◎ Computed value
`inline-table$v `table$v
`table-*$t `block$v
`inline$v, `inline-block$v `block$v
その他 指定d値

【* この表は、他の~CSS~module(~flex~layoutなど)により,拡張されていることに注意。 】【 参考: ~box型の自動的な変形n

9.8. 通常~flow, 浮動体, 絶対~位置決めの比較

【 この節の和訳は,省略する。 】

9.9. 多層化された呈示

9.9.1. 積層-~levelの指定法: `z-index^p ~prop

◎名 `z-index@p ◎値 `auto$v | `integer$t ◎初 `auto^v ◎適 `有位置$な要素 ◎継 されない ◎百 受容しない ◎算 指定d値 ◎順 文法に従う ◎ア 離散的【ではなく、 “算出d値の型による” ?】 ◎表終

`z-index$p ~propは、要素が生成する`有位置$な~boxに対し,次を指定する: ◎ For a positioned box, the z-index property specifies:

  1. ~boxが属している`積層~文脈$における,~boxの`積層-~level$。 ◎ The stack level of the box in the current stacking context.
  2. ~boxは`積層~文脈$を確立するかどうか。 ◎ Whether the box establishes a stacking context.

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

`integer$t
生成される~boxは、新たな`積層~文脈$を確立する。 ~boxの`積層-~level$は,所与の整数になる。 ◎ This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.
`auto@v
生成される~boxの`積層-~level$は, 0 になる。 ~boxは、根~要素でない限り,新たな`積層~文脈$を確立しない。 【この~propによる効果としては。積層~文脈は、他の要因により確立される場合もある。】 ◎ The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

この節の表記 “手前” は、利用者が面する~screenから,利用者に近づく方を意味する ◎ In this section, the expression "in front of" means closer to the user as the user faces the screen.

~CSS2においては、各~boxは,横方向, 縦方向の位置に加え, “z-軸” 方向(~screen面から垂直に利用者に近づく方向)の位置 — 略して z-位置 — も持つ。 z-位置は、特に~boxたちが視覚的に重合する場合に関わり、整形する際の他の~boxによる層との重なり順を表す。 この節では、各~boxが z-軸~沿いのどこに位置されるかについて論じる。 ◎ In CSS 2, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

描画~treeが~canvasに塗られる順序は、`積層~文脈$を通して述べられる。 `積層~文脈$は、別の`積層~文脈$を包含し得る†。 `積層~文脈$は、その親の`積層~文脈$の視点からは不可分である — それらの~boxたちの合間に,他の`積層~文脈$に属する~boxが来ることはない††。 ◎ The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

【† すなわち、各 積層~文脈は,`~box~tree$の中の ある下位treeを表現する。 】【†† すなわち、親の視点からは,不可分な一枚の層(=末端の子孫)として扱われる。 】

どの~boxも,ある一つの `積層~文脈@ に所属する。 所与の`積層~文脈$に属する,どの`有位置$な~boxも、整数の `積層-~level@ を持つ(負にもなり得る)。 それは、同じ`積層~文脈$に属する他の~boxの`積層-~level$に相対的な, z-位置である — 同じ積層~文脈の中では:

  • ~boxたちは、`積層-~level$がより高いものほど,手前の層に整形される。
  • `積層-~level$が同じ~boxたちは、~tree順序に則って,奥から手前にかけて積層される。
◎ Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

`根~要素$は、`積層~文脈$が成す階層の根になる。 他の`積層~文脈$は、 `z-index$p の算出d値が `auto$v 以外にされた,`有位置$な要素(`相対的に位置され$た要素も含む)により生成される。 `積層~文脈$は、包含塊に関係するとは限らない。 将来~levelの~CSSでは、他の~propからも`積層~文脈$が導入され得る — 例えば、 `opacity$p 。 ◎ The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of z-index other than auto. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example opacity [CSS3COLOR].

それぞれの`積層~文脈$の中では、次に挙げる各~層が,挙げられる順に,奥から手前の順序で塗られる: ◎ Within each stacking context, the following layers are painted in back-to-front order:

  1. `積層~文脈$を確立している要素の,背景と~border。 ◎ the background and borders of the element forming the stacking context.
  2. 子 `積層~文脈$のうち,`積層-~level$が負であるもの(最も負であるものが最初)。 ◎ the child stacking contexts with negative stack levels (most negative first).
  3. 子孫たちのうち,`有位置$でないもの — 次の順に塗られる: ◎ ↓

    1. `~flow内$にある, かつ `行内~level$でないもの。 ◎ the in-flow, non-inline-level, non-positioned descendants.
    2. `浮動体$。 ( A ) ◎ the non-positioned floats.
    3. `~flow内$にある, かつ `行内~level$であるもの。 ( B ) ◎ the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  4. [ 子 `積層~文脈$ / `有位置$な子孫 ]のうち,`積層-~level$が 0 のもの。 ( C ) ◎ the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  5. 子 `積層~文脈$のうち,`積層-~level$が正であるもの(最も正であるものが最後)。 ◎ the child stacking contexts with positive stack levels (least positive first).

ただし、次に挙げる【子 積層~文脈でない】要素は,要素~自身が新たな`積層~文脈$を生成したかのように塗られる — その[ `有位置$な子孫, および 子 `積層~文脈$ ]は、要素が属する`積層~文脈$の一部を成すことを除いて:

  • `有位置$でない浮動体( 層 A )
  • `行内-~table$/`行内-塊$(層 B ) 【より一般的には、`不可分な行内$。】
  • `有位置$な, かつ `積層-~level$は 0 の要素(層 C )

【 すなわち,これらの要素は、各~要素ごとに,その内容から[ 有位置な子孫/積層~文脈を成す下位tree ]は除外した部分が,上の手続きに従って不可分な一枚の層に塗られる(具体的には、段 1 と段 3 のみ関わる)。 この結果の各~層と, 除外されたものたちが、要素が属する積層~文脈の下で,上の手続きに従って塗られることになる。 】

◎ Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

この塗ng順序は、各`積層~文脈$に対し,再帰的に適用される。 この,`積層~文脈$の塗ng順序の記述は、 付録 E による詳細な規範的~定義の概観である。 ◎ This painting order is applied recursively to each stacking context. This description of stacking context painting order constitutes an overview of the detailed normative definition in Appendix E.

【この例は,この訳による追加。】

塗ng順序が適用されるのは、文書~treeから~box~treeに組み替えられた後になる。 次の様な~HTMLがあるとき:

<div style="z-index:-1">
  <div style="position:fixed; z-index:1; ..."
  >固定的に位置された内容</div>
</div>

`固定的に位置され$た要素は,~box~treeにおいては根(`初期~包含塊$)の直下に移動されるので、この~HTMLの “固定的に位置された内容” は,親 `div^e の`積層-~level$を問わず,[ 根~要素が確立する積層~文脈の中で 積層-~level 0 のもの ]より,手前に塗られることになる。

次の例では、( "id" 属性で命名された)各~boxの`積層-~level$は,[ "text2" = 0, "image" = 1, "text3" = 2, "text1" = 3 ]になる。 "text2" の`積層-~level$は、根~boxから継承される 【積層-~levelの継承-とは?】 。 他のものは `z-index$p ~propで指定されている。 ◎ In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the z-index property.

<HTML lang="ja">
  <HEAD>
    <META charset="utf-8">
    <TITLE>z-位置の用例</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <IMG id="image" class="pile" 
         src="butterfly.png" alt="見本~画像"
         style="z-index: 1"
    >

    <DIV id="text1" class="pile" 
         style="z-index: 3"
    >
      
この~textは、見本~画像より手前の層に来る
◎
This text will overlay the butterfly image.

    </DIV>

    <DIV id="text2">
      
この~textは、一番~奥の層に来る
◎
This text will be beneath everything.

    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2"
    >
      この~textは、 text1 より奥, かつ
      見本~画像より手前の層に来る
◎
This text will underlay text1, but overlay the butterfly image

    </DIV>
  </BODY>
</HTML>

この例は、透明度の観念をデモる。 背景に対する既定の挙動では、背後にある~boxは可視にされる。 この例では、各~boxは,下~層の~boxの上~層に透明に~~重ねられる。 この挙動は、既存の各種 背景~prop のいずれかを利用して上書きできる。 ◎ This example demonstrates the notion of transparency. The default behavior of the background is to allow boxes behind it to be visible. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.

9.10 ~text方向: `direction^p, `unicode-bidi^p ~prop

`双方向-~text@ を~supportしない`適合~UA$は、この節にて述べる `direction$p / `unicode-bidi$p ~propを無視してもヨイ。 この例外には、単に ~system上の~fontが~supportするがため,右横書き文字を描画し得るが、右横書き~text方向の概念は~supportしないような~UAも含まれる。 ◎ Conforming user agents that do not support bidirectional text may ignore the direction and unicode-bidi properties described in this section. This exception includes UAs that render right-to-left characters simply because a font on the system contains them but do not support the concept of right-to-left text direction.

【 以下、この節の内容の和訳は、 CSS Writing Mode 仕様の § ~textの方向性, § `direction^p ~prop, § `unicode-bidi^p ~prop に委譲。 参照のため, および CSS Writing Mode による拡張との差分を示すため、この節にて定義される用語のみ,以下に挙げる: 】

  • `双方向性@
◎名 `direction@p ◎値 `ltr@v | `rtl@v ◎表終 ◎名 `unicode-bidi@p ◎値 `normal@v | `embed@v | `bidi-override@v ◎表終