1. 序論
~INFORMATIVEこの~moduleは、~CSSによる複柱~layout†について述べる。 この文書に述べる機能性を利用すれば、~stylesheetにて 要素の内容を複数の柱に~lay-outされるように宣言できるようになる。 ◎ This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns.
【 日本語では一般に “段組” と呼ばれているが、段組の “~~段（横方向に伸びる柱）” は 縦組が念頭に置かれている語であり， `~row$を表す “~~段” と紛らわしいので、この訳ではより直接的に， “複柱” と記す。 原文のこの意味を表す語 “multi-column” は “multicol” とも略記されるが、訳語では区別しない。 】
~webでは、複柱~layoutを記述するために，~tableも利用されてきた。 ~CSSに基づく柱を利用する主な便益は柔軟性にある — 内容は柱から別の柱へ~flowでき, 柱~数は 表示域の~sizeに依存して変われる。 文書から呈示~用の~table~markupを除去することにより、発話~合成器や携帯端末も含め，種々の出力~機器~上に，より容易く呈示し得るようになる。 ◎ On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.
【 この~layoutは、各~柱を~text行lになぞらえた下での “より粒度の荒い” 行内~layoutとも捉えられる。 ~lay-outされる内容は、~textの自動改行と同様に，頁~分断（改~頁）／後述の`~spanning要素$により “自動改~柱 （平準化）”され、各~柱の幅は，~textの行高と同様に一定にされる。 】
~CSSで複柱~layoutを記述するのは簡単である。 単純な例を示す： ◎ Multi-column layouts are easy to describe in CSS. Here is a simple example:
body { column-width: 12em }
この例では、
body
要素は、各 柱の~~幅が少なくとも `12em^v 以上になるように設定される。
正確な柱~数は，`可用な空間$に依存することになる。
◎
In this example, the body element is set to have columns at least 12em wide. The exact number of columns will depend on the available space.
~stylesheetの中で柱~数を明示的に設定することもできる： ◎ The number of columns can also be set explicitly in the style sheet:
body { column-count: 2 }
この事例では、柱~数が固定され，各~柱の横幅は，可用な横幅に依存して変わり得ることになる。 ◎ In this case, the number of columns is fixed and the column widths will vary depending on the available width.
略式~prop `columns$p を利用すれば、一つの宣言で，一方のみ† または両方の~propを設定できる： ◎ The shorthand columns property can be used to set either, or both, properties in one declaration.
次の例は、順に，［ 柱~数のみ, 各~柱の横幅のみ, 柱~数と横幅の両者 ］を設定する： ◎ In these examples, the number of columns, the width of columns, and both the number and width are set, respectively:
body { columns: 2 }
body { columns: 12em }
body { columns: 2 12em }
しかしながら、下に述べられるように，柱幅と柱~数の両者とも設定することが有意義になるのは稀である。 ◎ However, as described below, setting both the width and number of columns rarely makes sense.
【† 通例の略式~propとふるまいが異なるわけではなく，実際には両者とも設定する — 値を指定しなかった方の~propは初期値 `auto^v にされる。 】
この~moduleは、各~柱~間の間隙と罫線について記述する，別の~prop群も導入する。 ◎ Another group of properties introduced in this module describe gaps and rules between columns.
body {
column-gap: 1em;
column-rule: thin solid black;
}
上の例の最初の宣言は、隣接する 2 本の柱の間隙を `1em^v に設定する。 柱~間隙は，~padding域に似る。 間隙の真中には、 `column-rule$p ~propで記述される罫線が存在することになる。 ◎ The first declaration in the example above sets the gap between two adjacent columns to be 1em. Column gaps are similar to padding areas. In the middle of the gap there will be a rule which is described by the column-rule property.
`column-rule$p ~propの値は、~CSS~border~propのそれに似る。 `border$p と同様に， `column-rule$p は、略式~propである。 ◎ The values of the column-rule property are similar to those of the CSS border properties. Like border, column-rule is a shorthand property.
上の例の `column-rule$p 略式~prop宣言を展開したものは次になる： ◎ In this example, the shorthand column-rule declaration from the above example has been expanded:
body {
column-gap: 1em;
column-rule-width: thin;
column-rule-style: solid;
column-rule-color: black;
}
`column-fill$p, `column-span$p ~propは、~stylesheetによる複柱~layoutに，より広範な視覚的~~表現を与える ◎ The column-fill and column-span properties give style sheets a wider range of visual expressions in multi-column layouts.
次の例では、各~柱の内容が平準化されるように — すなわち，およそ同じ長さになるように — 設定され、 `h2^e 要素は，~row内のすべての柱に渡って~spanするように設定される。 ◎ In this example, columns are set to be balanced, i.e., to have approximately the same length. Also, h2 elements are set to span across all columns.
div { column-fill: balance }
h2 { column-span: all }
この仕様は、 10 個の新たな~propを導入する（どれも，これまでの例に~~現れている）。 ◎ This specification introduces ten new properties, all of which are used in the examples above.
すべての柱~propが初期~値をとる場合、要素の~layoutは，単独の柱による複柱~layoutに一致する。 ◎ If all column properties have their initial value, the layout of an element will be identical to a multi-column layout with only one column.
2. 複柱の~model
`複柱~容器@ （ multi-column 容器, 略して multicol 容器）とは、 `column-width$p または `column-count$p ~propが `~auto0$v でない値にされ，従って 複柱~layoutの容器としてふるまう要素である。 ◎ A multi-column container (or multicol container for short) is an element whose column-width or column-count property is not auto and therefore acts as a container for multi-column layout.
従来の~CSS~box~modelにおいては、要素の内容は，対応する要素の内容~boxの中へ~flowされていた。 複柱~layoutは、内容~boxと内容の間に， `柱~box@ （略して `柱^i ）と呼ばれる 新たな型の容器を導入する。 複柱~容器の内容は、この一連の`柱~box$の中へ~flowされる： ◎ In the traditional CSS box model, the content of an element is flowed into the content box of the corresponding element. Multi-column layout introduces a new type of container between the content box and the content, namely the column box (or column for short). The content of a multicol container is flowed into its column boxes.
-
複柱~容器~内の一連の`柱~box$は、何~~段かの `~row@ の中へ配列される。
【 例えば頁d媒体の下で，複柱~容器の内容が何~頁かに流し込まれる（~flowする）ときは、各~頁が 1 ~~段（またはそれ以上）の~rowに対応することになる。 】
◎ Column boxes in a multi-column container are arranged into rows.＼ -
~table~cellと同様、各~柱~boxは，各~rowごとに 複柱~容器の行内~方向に順序付けられて並ぶ。 ［ `柱幅@ ／ `柱高@ ］とは、その柱~boxの［ 行内~方向／塊~方向 ］における長さ†である。 同じ~row内に並ぶ すべての柱~boxの 柱幅, 柱高は，同じに揃う††。
【† CSS Writing Modes の用語で言えば［ `行内~size$／`塊~size$ ］。 この仕様は，`横組$の下での~layoutを念頭に記されている。 `縦組$の下での［ 横幅／縦幅 ］は，［ 縦方向の幅／横方向の幅 ］に読み替えて解釈することになる。 】【†† 柱幅については、たいていは，~rowが異なっても一定になるが、~rowに可用な幅が~rowごとに変わる場合は変わり得る — `断片d文脈$のうち，各~断片の幅が一定でないもの（ CSS Region ）の下では、それが普通になるであろう。 】
◎ Like table cells, the column boxes in a row are ordered in the inline direction of the multicol container. The column width is the length of the column box in the inline direction. The column height is the length of the column box in the block direction. All column boxes in a row have the same column width, and all column boxes in a row have the same column height.＼ -
複柱~容器~内の同じ~row内で隣接する各~柱~boxは、 `柱~間隙@（ column gap ） で分離され，各 柱~間隙は `柱~罫線@（ column rule ）を包含し得る†。 同じ~row内の すべての柱~間隙は，等しい。 同じ~row内の すべての柱~罫線もまた，それらが現れるならば等しく現れる — ただし、柱~罫線が現れるのは，その両側の柱とも内容を持つときに限られる。
【† すなわち、柱~間隙は，~layoutに占める空間を指示し、柱~罫線は，その空間に描画されるものになる。詳細は 柱の間隙と罫線 節に。 】
◎ Within each row in the multi-column container, adjacent column boxes are separated by a column gap, which may contain a column rule. All column gaps in the same row are equal. All column rules in the same row are also equal, if they appear; column rules only appear between columns that both have content.
最も単純な場合、 1 個の複柱~容器には，いくつかの柱からなる 1 ~~段の~rowのみが含まれ、各~柱の縦幅は，複柱~容器の内容~boxの使用~縦幅に等しくなる。 ◎ In the simplest case a multicol container will contain only one row of columns, and the height of each column will be equivalent to the used height of the multi-column container’s content box.
次の描画~見本に、~padding（図のピンク）を伴う複柱~容器における， 柱~間隙（図の黄色＋緑色）, 柱~罫線（図の緑色） を示す。 これらの色は，説明目的で呈示するものであり、実際の実装では，これらの区域のうち罫線~以外には背景が~~現れることになる。 2 個目の図に，灰色の罫線を伴う複柱~容器の描画を示す。 ◎ Column gaps (diagonal hatching) and column rules are shown in this sample rendition of a multi-column container with padding (cross hatching). The hatched areas are present for illustrational purposes only. In actual implementations these areas will be determined by the background, the second image shows a rendering of a multi-column container with column-rules.＼
複柱~容器が頁割される場合、各`~row$の縦幅は 頁に拘束され，内容は 次の頁~上の新たな`~row$に継続する — `~row$が 2 頁にまたがることは、決してない。 ◎ If the multi-column container is paginated, the height of each row is constrained by the page and the content continues in a new row of column boxes on the next page; a column box never splits across pages.
同じ効果は、`~spanning要素$が複柱~容器を【上下の~rowに】分け隔てるときにも生じる： `~spanning要素$に先行する内容は、`~row$内の各~柱に収まるように平準化され，~boxの高さは最小限に縮短される。 `~spanning要素$に後続する内容は、新たな`柱~box$からなる`~row$の中へ~flowする。 ◎ The same effect occurs when a spanning element divides the multi-column container: the columns before the spanning element are balanced and shortened to fit their content. Content after the spanning element then flows into a new row of column boxes.
`柱~box$は、`塊~容器~box$である。 それらは，`匿名~box$であり、`複柱~容器$が`主要~box$を成す。 ◎ Column boxes are block container boxes. The multi-column container is the principal box, and column boxes are anonymous.
注記： 柱~boxは、 `position$p が［ `fixed^v ／ `absolute^v ］にされた要素~用の`包含塊$にはならない。 包含塊になれるのは、`主要~box$である複柱~要素である。 ◎ Note: Column boxes do not become the containing block for elements with position: fixed or position: absolute. The containing block is the multicol element, it being the principal box.
次の例では、複柱~容器の子である画像の `position$p は `absolute^v にされている。 画像の包含塊は、 `position$p が `relative^v にされている複柱~容器になる — 画像の位置決めは、柱~boxではなく，複柱~容器を基準にする： ◎ In this example, the multi-column container has position: relative thus becoming the containing block. The image is a direct child of the multi-column container and has position: absolute. It takes positioning from the multi-column container and not from the column box.
.container {
position: relative;
column-count: 3;
}
img {
position: absolute;
top: 2em;
left: 3em;
}
次の例では、画像の横幅を 次の規則により設定する。 ◎ In this example, the width of the image is set with these rules:
img { display: block; width: 100% }
画像は、［ `柱~box$に相対的に計算される横幅 ］の下で，`柱~box$と同じ~~幅にされる： ◎ Given that the width is calculated relative to the column box, the image will be as wide as the column box:
複柱~layoutの内側に現れる浮動体は、それが現れる`柱~box$に基づいて位置される。 ◎ Floats that appear inside multi-column layouts are positioned with regard to the column box where the float appears.
次の~CSS片は、画像の呈示を記述する： ◎ In this example, this CSS fragment describes the presentation of the image:
img { display: block; float: right }
複柱~容器は、 CSS 2.1 節 9.4.1 に従って，新たな塊~整形~文脈を確立する。 ◎ A multi-column container establishes a new block formatting context, as per CSS 2.1 section 9.4.1.
複柱~容器の最初の子~要素に設定された上端~marginは、複柱~容器の~marginとは相殺されないことになる。 ◎ A top margin set on the first child element of a multicol container will not collapse with the margins of the multicol container.
入子の複柱~容器も許容されるが、実装~特有な制限があり得る。 ◎ Nested multi-column containers are allowed, but there may be implementation-specific limits.
注記： `柱~box$上には~propや値を設定できない。 例えば、背景を ある`柱~box$にだけ設定することはできない。 `柱~box$には、 ~padding／~margin／~border の概念は無い。 将来の仕様は，追加の機能性を追加し得る — 例えば、柱ごとに横幅や背景を異ならせる機能が~supportされるかもしれない。 ◎ Note: It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders. Future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.
注記： 柱高が表示域の縦幅より大きくなる複柱~容器は、~accessibilityを損なうおそれがある。 【例えば 連続的~文脈に，長大な内容が 明示的な分断なしに~lay-outされた場合、柱から次の柱へ閲覧するときに頁の端から端までスクロールを要し得る。】 ◎ Note: Multicol containers with column heights larger than the viewport may pose accessibility issues.
3. 柱の本~数と横幅
複柱~内容を~lay-outするにあたり，最も基本的なことは、柱の本数と横幅を見出すことである。 次の~propが、柱の本数と横幅を設定するために利用される： ◎ Finding the number and width of columns is fundamental when laying out multi-column content. These properties are used to set the number and width of columns:
- `column-count$p
- `column-width$p
加えて、この両者を設定する略式~propとして， `columns$p ~propが用意されている。 ◎ A third property, columns, is a shorthand property which sets both column-width and column-count.
柱~数と`柱幅$の`実際の値$には、［ 明示的な`柱~分断$, 内容, ［ 縦幅に対する拘束 ］］などの他の要因も波及し得る。 ◎ Other factors, such as explicit column breaks, content, and height constraints, may influence the actual number and width of columns.
3.1. `column-width^p ~prop
◎名 `column-width@p ◎値 `~auto0$v | `length$t ◎初 `auto^v ◎適 `塊~容器$ — ただし，`~table包装~box$は除く ◎ block containers except table wrapper boxes ◎継 されない ◎百 受容しない ◎算 絶対化された長さ ◎ the absolute length ◎順 文法に従う ◎ア `length^t として ◎表終この~propは、複柱~容器における`柱幅$を記述する。 ◎ This property describes the width of columns in multicol containers.
- `~auto0@v
- 柱幅は、他の~prop（例えば， `auto^v でない値が指定された `column-count$p ）から決定されることを意味する。 ◎ means that the column width will be determined by other properties (e.g., column-count, if it has a non-auto value).
- `length$t
- 最適とされる柱幅を記述する。 柱幅の`実際の値$は、（`可用な空間$を埋めるために）より幅広にされたり, （可用な空間が指定された柱幅より小さい場合に限り）より狭小にされ得る。 負の値は許容されない。 使用値は `1px^v 以上に切り上げられる。 ◎ describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Negative values are not allowed. Used values will be clamped to a minimum of 1px.
例えば、次の~stylesheetを考える： ◎ For example, consider this style sheet:
div {
width: 100px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
`100px^v ~~幅にされた要素の内側には、 `45px^v ~~幅の柱 2 本分の部屋がある。 `可用な空間$を埋めるため、柱幅の`実際の値$は， `50px^v まで増大されることになる。 【 “部屋（ room ）” — ~layoutにおいて排他的に占める空間 】 ◎ There is room for two 45px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.
次の~stylesheetの場合は： ◎ Also, consider this style sheet:
div {
width: 40px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
`可用な空間$は，指定された柱幅より小さいので、柱幅の`実際の値$は，減少されることになる。 ◎ The available space is smaller than the specified column width and the actual column width will therefore be decreased.
縦書き~textの下での`柱幅$は，柱の内側の`行l~box$の長さを意味し、その指定に `column-width$p をそのまま利用できる。 ◎ To ensure that column-width can be used with vertical text, column width means the length of the line boxes inside the columns.
注記： `column-width$p をいくぶん大様にしている理由は、多様な~screen~sizeに適宜 収まるような設計を得るためである。 柱幅を正確に設定するためには、複柱~要素に 柱~間隙, および横幅（縦書き~textでは縦幅）も指定されなければならない。 ◎ Note: The reason for making column-width somewhat flexible is to achieve scalable designs that can fit many screen sizes. To set an exact column width, the column gap and the width of the multicol element (assuming horizontal text) must also be specified.
3.2. `column-count^p ~prop
◎名 `column-count@p ◎値 `~auto1$v | `integer$t ◎初 `auto^v ◎適 `塊~容器$ — ただし，`~table包装~box$は除く ◎ block containers except table wrapper boxes ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア `integer^t として ◎表終この~propは、複柱~容器の柱~数を記述する。 ◎ This property describes the number of columns of a multicol container.
- `~auto1@v
- 柱~数は、他の~prop（例えば， `~auto0$v 以外の値が指定された `column-width$p ）から決定されることを意味する。 ◎ means that the number of columns will be determined by other properties (e.g., column-width, if it has a non-auto value).
- `integer$t
- 要素の内容が~flowされることになる，最適とされる柱~数を記述する。 値は正で~MUST。 `column-width$p, `column-count$p のいずれも `auto^v でない場合、この整数~値は，最大の柱~数を記述する†。 ◎ describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.
- 【† この “最大” は、 `column-count$p の`使用値$の上限を意味する（`柱幅$は、その結果に基づいて計算される） — ~row内に~lay-outされる実際の柱~数（`実際の値$）ではなく。 連続的~文脈の下では、複柱~容器に指定された縦幅の上限や`柱~分断$などに因り，指定した柱~数を~overflowする内容は、（他が指定されない限り）同じ~rowに柱を追加しながら継続されることになる（断片d文脈の下では，自動的に新たな~rowに折り返されるが） — 詳細は ~overflow節 に。 ~overflowする内容を新たな~rowに折り返させるためには、別個の複柱~容器に振り分けるか, （縦幅の上限を指定せずに）後述の`~spanning要素$を利用することになる。 】
◎ Example:
body { column-count: 3 }
3.3. `columns^p ~prop
◎名 `columns@p ◎値 `column-width$tp || `column-count$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終`column-width$p, `column-count$p を設定するための略式~propである。 省略された成分~値は、その`初期値$に設定される。 ◎ This is a shorthand property for setting column-width and column-count. Omitted values are set to their initial values.
`columns$p ~propを利用する妥当な宣言の例： ◎ Here are some valid declarations using the columns property:
columns: 12em; /* column-width: 12em; column-count: auto */ columns: auto 12em; /* column-width: 12em; column-count: auto */ columns: 2; /* column-width: auto; column-count: 2 */ columns: 2 auto; /* column-width: auto; column-count: 2 */ columns: auto; /* column-width: auto; column-count: auto */ columns: auto auto; /* column-width: auto; column-count: auto */
3.4. 柱~数と柱幅の使用値の計算法
`column-count$p, `column-width$p の`使用値$は、それらの`算出値$, `column-gap$p の算出値, 複柱~要素の使用~横幅から、以下に従って決定される。 ◎ The pseudo-algorithm below determines the used values for column-count (N) and column-width (W). There is one other variable in the pseudo-algorithm: U is the used width of the multi-column element.
注記： 複柱~容器の使用~横幅は、要素の内容に依存することもある†。 その場合、それは `column-count$p, `column-width$p ~propの`算出値$にも依存する。 この仕様は，その計算法については定義しない。 別の~module（おそらく Basic Box Model `CSS3BOX$r または Intrinsic & Extrinsic Sizing Module `CSS3-SIZING$r ）が，これを定義するものと期待されている。 ◎ Note: The used width U of the multi-column container can depend on the element’s contents, in which case it also depends on the computed values of the column-count and column-width properties. This specification does not define how U is calculated. Another module (probably the Basic Box Model [CSS3BOX] or the Intrinsic & Extrinsic Sizing Module [CSS3-SIZING]) is expected to define this.
【† 例えば、`直交~flow$の下では、同じ~rowの中へ 内容に必要なだけ，柱が追加され得る。 これらは`~overflow柱$ではないので，要素の使用~横幅（`行内~size$）に寄与する。 】
-
まず `column-count$p の`使用値$ %C を計算する：
- %count ~LET `column-count$p の算出値
- %width ~LET `column-width$p の算出値
- %gap ~LET `column-gap$p の算出値
- %U ~LET 複柱~容器の使用~横幅
- ~IF［ %width ~EQ `~auto0$v ］~AND［ %count ~EQ `~auto1$v ］ ⇒ 複柱~容器ではないので、使用値は計算されない 【この場合でも，`直交~flow$の下では、複柱~容器として扱われ得る。】
- ~IF［ %gap ~EQ `normal$v ］ ⇒ %gap ~SET ~UAにより定義される値
- %C ~LET %count
-
~IF［ %width ~NEQ `~auto0$v ］：
- %C ~SET 次を超えない最大の整数を 1 以上に切り上げた結果 ⇒ ( %U ~PLUS %gap ) ~DIV ( %width ~PLUS %gap )
- ~IF［ %count ~NEQ `~auto1$v ］~AND［ %C ~GT %count ］ ⇒ %C ~SET %count
- ~RET %C
- `column-width$p の`使用値$は、次に与える値を 0 以上に切り上げた結果になる ⇒ ( ( %U ~PLUS %gap ) ~DIV %C ) ~MINUS %gap ◎ And: (11) W := max(0, ((U + column-gap)/N - column-gap))
自動的に繰り返される`筋$の本数を見出す目的においては、~UAは， 0 による除算を避けるため，自身が指定する正の値を筋~sizeの下限にし~MUST。 この下限は `1px^v 以下にすることが示唆される。 ◎ For the purpose of finding the number of auto-repeated tracks, the UA must floor the track size to a UA-specified value to avoid division by zero. It is suggested that this floor be 1px or less.
頁d媒体などの`断片d文脈$においては、~UAは，この計算を断片ごとに遂行してよい。 ◎ In fragmented contexts such as in paged media, user agents may perform this calculation on a per-fragment basis.
`column-count$p の`使用値$は，［ 明示的な`柱~分断$や, `柱高$に対する拘束 ］に関係なく計算される一方、`実際の値$にはそれらが織り込まれる。 ◎ The used value for column-count is calculated without regard for explicit column breaks or constrained column heights, while the actual value takes these into consideration.
【 すなわち， `column-count^p は、実質的に柱幅を確定させるためにあり，~row内に~lay-outされる実際の柱~数を制限するものではない。 】
次の例では、明示的な柱~分断に因り， `column-count^p の`実際の値$が その`使用値$より高くなる： ◎ In this example, the actual column-count is higher than the used column-count due to explicit column breaks:
div {
width: 20em;
columns: 10em;
column-gap: 0;
}
p {
break-after: column;
}
<div> <p>段落一 <p>段落二 <p>段落三 </div>
`column-count^p の`実際の値$は，その`使用値$より低くなることもある。 次の例を考える： ◎ The actual column-count may be lower than the used column-count. Consider this example:
div {
width: 80em;
height: 10em;
columns: 20em;
column-gap: 0;
column-fill: auto;
}
<div>foo</div>
この場合、 `column-count$p の［ `算出値$は `~auto1$v, `使用値$は `4^v, `実際の値$は `1^v ］になる。 ◎ The computed column-count is auto, the used column-count is 4, and the actual column-count is 1.
3.5. 積層~文脈
複柱~容器~内のすべての`柱~box$は 同じ積層~文脈に属する。 それらの内容が描かれる順序は、CSS 2.1 により指定される。 `柱~box$は，新たな積層~文脈を確立しない。 ◎ All column boxes in a multi-column container are in the same stacking context and the drawing order of their contents is as specified in CSS 2.1. Column boxes do not establish new stacking contexts.
4. 柱の間隙と罫線
柱の`間隙$と`罫線$は、同じ複柱~容器~内の各~柱の合間に置かれる。 柱~間隙と柱~罫線の縦幅は、`柱高$に等しくされる。 柱~間隙は【~layoutにおいて】空間を占める。 すなわち、柱~間隙は，（同じ複柱~容器の中で）内容を両側の柱に分け隔てることになる【描かれるものではない】。 ◎ Column gaps and rules are placed between columns in the same multicol container. The length of the column gaps and column rules is equal to the column height. Column gaps take up space. That is, column gaps will push apart content in adjacent columns (within the same multicol container).
複柱~容器 %容器 の柱~罫線は： ◎ ↓
- %容器 の 上下の内容~辺を端点として，柱~間隙の真中に描かれる。 ◎ A column rule is drawn in the middle of the column gap with the endpoints at opposing content edges of the multicol container.＼
- 空間を占めない。 すなわち、柱~罫線の有無や太さから 他のものの配置が改められることはない。 ◎ Column rules do not take up space. That is, the presence or thickness of a column rule will not alter the placement of anything else.＼
- 柱~間隙より幅広にされた場合、隣接する`柱~box$は罫線と重合することになり， %容器 の~boxの外側まで拡がり得る。 ◎ If a column rule is wider than its gap, the adjacent column boxes will overlap the rule, and the rule may possibly extend outside the box of the multicol container.＼
- %容器 の~borderの直上層に塗られる。 %容器 が~scroll可能な場合、 %容器 の~borderと背景は~scrollされないのは明らかだが，罫線は柱とともに~scrollする必要があることに注意。 ◎ Column rules are painted just above the border of the multicol element. For scrollable multicol elements, note that while the border and background of the multicol element obviously aren’t scrolled, the rules need to scroll along with the columns.＼
- その両側の柱とも内容を持つ場合に限り，描かれる。 ◎ Column rules are only drawn between two columns that both have content.
4.1. `column-gap^p ~prop
◎名 `column-gap@p ◎値 `length-percentage$t | `normal$v ◎初 `normal^v ◎適 `複柱~容器$ ◎継 されない ◎百 複柱~容器の内容~横幅を基準にする ◎ refer to the content width of the multi-column container ◎算 指定値 — ただし， `length$t は絶対化される ◎ as specified, with <length>s made absolute ◎順 文法に従う ◎ア 長さ, 百分率, calc 式のいずれかとして ◎ length, percentage, or calc ◎表終`length-percentage$t を受容する `column-gap$p は~risk下にあり， `length$t に復帰され得る。 ◎ column-gap accepting <length-percentage> is at risk, and may be reverted to <length>.
- `length-percentage$t
- 柱~間の間隙を指定する。 柱~間に柱~罫線がある場合、それは間隙の真中に現れることになる。 ◎ Specifies the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.
- `length$t ／ `percentage$t には負の値は許容されない。 ◎ The <length> or <percentage> cannot be negative.
- `normal@v
- 使用値は `1em^v とする下で、 `length-percentage$t と一致する。 ◎ Identical to <length-percentage>, but with a used value of 1em.
4.2. `column-rule-color^p ~prop
◎名 `column-rule-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 `color$p を算出するときと同じ ◎ same as the computed value of color is computed ◎順 文法に従う ◎ア `color^t として ◎表終- `color$t
- 柱~罫線の色を指定する。 ◎ Specifies the color of the column rule.
4.3. `column-rule-style^p ~prop
◎名 `column-rule-style@p ◎値 `line-style$t ◎初 `none^v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`column-rule-style$p ~propは、柱~間に描かれる罫線の~styleを設定する。 `line-style$t 値は ~borderの縮約~model に従って解釈される†。 ◎ The column-rule-style property sets the style of the rule between columns of an element. The <line-style> values are interpreted as in the collapsing border model.
【† 意図不明 — 現時点では、各~柱ごとに罫線の~styleを変えられるわけでもないので，競合も生じない筈（将来を見据えての記述？） 】
値 `none^v は、 `column-rule-width$p の`算出値$を `0^v に強制する。 ◎ The none value forces the computed value of column-rule-width to be 0.
4.4. `column-rule-width^p ~prop
◎名 `column-rule-width@p ◎値 `line-width$t ◎初 `medium^v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 絶対化された長さ。 柱~罫線の~styleが `none^v または `hidden^v のときは `0^v になる。 ◎ absolute length; 0 if the column rule style is none or hidden ◎順 文法に従う ◎ア `length^t として ◎表終この~propは、柱~間の罫線の横幅を設定する。 負の値は許容されない。 ◎ This property sets the width of the rule between columns. Negative values are not allowed.
4.5. `column-rule^p ~prop
◎名 `column-rule@p ◎値 `column-rule-width$tp || `column-rule-style$tp || `column-rule-color$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終この~propは `column-rule-width$p, `column-rule-style$p, `column-rule-color$p を一括して設定するための略式~propである。 省略された値は，それぞれの`初期値$に設定される。 ◎ This property is a shorthand for setting column-rule-width, column-rule-style, and column-rule-color at the same place in the style sheet. Omitted values are set to their initial values.
次の例では、柱~罫線と柱~間隙の横幅を同じにする。 従って，それらは正確に同じ空間を占有することになる。 ◎ In this example, the column rule and the column gap have the same width. Therefore, they will occupy exactly the same space.
body {
column-gap: 1em;
column-rule-width: 1em;
column-rule-style: solid;
column-rule-color: black;
}
5. 柱の分断
~UAは、複柱~容器の内容を複数の`柱$に~lay-outする際に，柱をどこで分断するかを決定し~MUST。 内容を各~柱へ分断する問題は、 CSS 2.1, 13.3.3 節に述べられている，各~頁へ分断する問題と同様になる。 `CSS21$r ◎ When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages, which is described in CSS 2.1, section 13.3.3 [CSS21].
柱~分断を許容するため，`頁~分断$の~propと同様に述べられる 3 個の~prop［ `break-before$p, `break-after$p, `break-inside$p ］が新たに導入される。 ◎ Three new properties are introduced to allow column breaks to be described in the same properties as page breaks: break-before, break-after, and break-inside.
5.1. `break-before^p, `break-after^p, `break-inside^p ~prop
`break-before$p, `break-after$p, `break-inside$p は、 `CSS3-BREAK$r にて定義される。 ◎ break-before, break-after, and break-inside are defined in [CSS3-BREAK].
6. ~spanning柱
`column-span$p ~propは、要素が何~柱かに渡って~spanできるようにする。 【 “段抜き” ／ “通し組み” 】 ◎ The column-span property makes it possible for an element to span across several columns.
6.1. `column-span^p ~prop
◎名 `column-span@p ◎値 `none$v | `all$v ◎初 `none^v ◎適 `~flow内$にある`塊~level$の要素 ◎百 受容しない ◎継 されない ◎算 指定値 ◎ア 離散的 ◎表終この~propは、要素が~row全体に~spanし得るかどうか†を記述する。 各種 値の意味は： ◎ This property describes how many columns an element spans across. Values are:
【† 原文には明示的に “how many（~spanし得る柱~数）” と記されているが、実際の定義に従って訳を変えている。 将来的には、具体的な柱~数を指定する拡張が想定されているようだ。 】
- `none@v
- 要素は、複数の柱に~spanしない。 ◎ The element does not span multiple columns.
- `all@v
- 要素は、［ 同じ塊~整形~文脈の中の，最も近い先祖の複柱~容器 ］において，自身が属する`~row$全体に~spanする。 要素に先行する 通常flow下の内容は、要素が現れる直前の`~row$に属する全~柱に，自動的に平準化される。 要素は、`独立な整形~文脈を確立する$。 ◎ The element spans across all columns of the nearest multicol ancestor in the same block formatting context. Content in the normal flow that appears before the element is automatically balanced across all columns in the immediately preceding column row before the element appears. The element establishes an independent formatting context.
- 注記： 要素が`整形~文脈$を確立するかどうかは、要素の先祖に複柱~容器があるかどうかに依存しない。 `column-span$p が `all$v のときは、常にそうなる。 これにより、複柱~容器を除去するような後の改訂や，媒体~queryにより状況に応じて複柱でなくなる場合に際しても、~layoutを堅牢に保ち易くなる。 ◎ Note: Whether the element establishes a new formatting context does not depend on whether the element is a descendent of a multicol or not. When column-span is all, it always does. This helps with robustness of designs to later revisions that remove the multicol, or when media queries turn the multicol off in some situations.
複数の柱に~spanする要素は `~spanning要素@ と呼ばれ、それが作成する~boxは， `~spanner@ と呼ばれる。 ◎ An element that spans more than one column is called a spanning element and the box it creates is called a spanner.
次の例では、 `h2^e 要素が，見本~文書の 4 個目の文（ "…ゑひもせす。" ）の後に追加されているとする。 次の~style付けが適用されたとき： ◎ In this example, an h2 element has been added to the sample document after the sixth sentence (i.e., after the words "the leg of a"). This styling applies:
h2 { column-span: all; background: silver }
`column-span$p を `all$v に設定することにより、 `h2^e 要素の前に現れるすべての内容は， `h2^e 要素の上側に示されるようになる： ◎ By setting column-span to all, all content that appears before the h2 element is shown before the h2 element.
`~spanning要素$は、同じ整形~文脈の一部を成す限り，直の子でなくともよい。 その場合、~spannerより前にある断片が空の場合でも，特別なことは何も起こらず、【包含している要素の】上端［ ~margin／~border／~padding ］は，空の断片として~spanning要素の上に現れる。 ◎ A spanning element may be lower than the first level of descendants as long as they are part of the same formatting context. If the fragment before the spanner is empty, nothing special happens; the top margin/border/padding is above the spanning element, as an empty fragment.
次の例では、 `article^e 要素が複柱~容器とする。 この親の内側には、順に `p^e, `section^e 要素がある。 この `section^e が包含している `h2^e は、 `column-span^p は `all$v に設定されており，~row全体を~spanするが、 `section^e は柱~boxたちの内側にあり続ける。 ◎ In this example the multicol container is the article element. Inside this parent is a paragraph and then a section element. The section contains an h2 heading set to all this spans all three columns while the containing section remains inside the column boxes.
`h2^e は `section^e の最初の子を成す。 その結果、この `section^e 上の［ ~margin, ~border（図の赤線）, ~padding ］は空の断片として~spanning要素 `h2^e より前に現れる。 ◎ The h2 is the first child of the section. This means that the margin, border (shown in red in the diagram) and padding on this section appear before the spanning h2 as an empty fragment.
<article>
<p>...</p>
<section>
<h2>An h2 element</h2>
<p>...</p>
</section>
</article>
section {
border: 0.5em solid red;
margin-top: 2em;
padding-top: 1em;
}
h2 {
column-span: all;
background: silver
}
要素を`~spanning要素$にすると，それが占める空間も増える。 空間に制限がある下では、`~spanning要素$が占める部屋を見出せないこともある。 その場合、 ~UAは，要素~上のこの~propに `none$v が指定されているかのように扱ってよい。 ◎ A spanning element takes up more space than the element would take up otherwise. When space is limited, it may be impossible to find room for the spanning element. In these cases, user agents may treat the element as if none had been specified on this property.
次の例では、複柱~容器の縦幅が拘束されているため、内容の後方に現れる `h2^e 要素が，~spanするための部屋が足りずに~overflowするとする。 その結果、 `h2^e 要素は `column-span^p に `none$v が指定されていたかのように現れる。 ◎ In this example, the H2 element appears later in the content, and the height of the multicol container is constrained. Therefore, the H2 element appears in the overflow and there is not room to make the element spanning. As a result, the element appears as if 'column-span: none' was specified.
次の例は、 `h2^e 要素が最後の柱に自然に現れることを除いて，先の例と同様になる。 依然として、要素を~spanさせるに足る部屋がないので。 ◎ This example is similar to the previous example, except that the H2 element appears naturally in the last column. Still, there is not enough room to make the element spanning.
`断片d文脈$においては、`~spanning要素$は、すべての断片にて尊守される。 次の例では、頁d媒体において，最初の 3 段落については それぞれの後に`柱~分断$が設定されていて， 4 個目の段落の後に `~spanning要素$として `h2^e 要素が現れるとする： ◎ In fragmented contexts spanning elements are honored in all fragments. In this example, we are in paged media, and the first three paragraphs have column breaks after them. An spanning H2 element appears after the fourth paragraph.
`~spanner$は，新たな整形~文脈を確立するが、~marginは，周囲のものに応じて変更され得る。 次の例では、 2 本の~spannerが自然に頁~上端に来ているとする。 1 本目の~spannerの上端~marginは、`非強制~分断$に連接するため，切り詰められる。 2 本の~spannerの合間の~marginは互いに相殺する。 しかしながら、 2 本目の~spannerの下端~marginは，後続する要素の上端~marginとは相殺しない： ◎ Spanners establish new formatting contexts, but their margins can be changed by their surroundings. In this example, two spanners naturally end up at the top of a page. The top margin of the first spanner is truncated due to adjoining an unforced break. The margins between the two spanners collapse with each other. However, the bottom margin of the second spanner does not collapse with the top margin of the subsequent element.
h2 {
margin: 0.5em 0;
column-span: all;
background: silver
}
p { margin-top: 1em }
7. 柱の埋方
各~柱を内容で埋めていく方法には、各~柱~間の内容を平準化するか, しないかの二つの~~選択肢がある。 柱が平準化される下では、~UAは，［ `強制~分断$, `widows$p, `orphans$p, `柱高$に影響し得る他の~prop ］を尊守しつつ，柱高のばらつきを極力抑えるべきである。 柱が平準化されない下では、それらは逐次的に埋められ，一部の柱は 部分的に埋められたり, 内容が空になり得る。 ◎ There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, user agents should try to minimize variations in column height, while honoring forced breaks, widows and orphans, and other properties that may affect column heights. If columns are not balanced, they are filled sequentially; some columns may end up partially filled, or with no content at all.
7.1. `column-fill^p ~prop
◎名 `column-fill@p ◎値 `auto$v | `balance$v | `balance-all$v ◎初 `balance$v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 指定値 ◎ア 離散的 ◎表終各種 値の意味は： ◎ The values are:
- `balance@v
- 各~柱~間の内容を，可能な限り平準化させる。 `断片d文脈$においては、最後の断片だけ平準化させる。 ◎ Balance content equally between columns, as far as possible. In fragmented contexts, only the last fragment is balanced.
- `balance-all@v
- 各~柱~間の内容を，可能な限り平準化させる。 `断片d文脈$においては、すべての断片に渡って平準化させる。 ◎ Balance content equally between columns, as far as possible. In fragmented contexts, all fragments are balanced.
- `auto@v
- 各~柱を逐次的に埋めていく。 ◎ fill columns sequentially
連続的~文脈においては、この~propは，`~overflow柱$が在るときには効果はない。 ◎ In continuous contexts, this property does not have any effect when there are overflow columns.
次の例では、 `article^e には 3 行lに収まる短い段落が 1 個だけあるとする。 以下、この節の例を通して，次の~styleが設定されているとする： ◎ In this example, an article only has one short paragraph which fits on three lines.＼
article {
width: 40em;
height: auto;
columns: 4;
column-fill: balance
}
上述の 3 行lは，柱~平準化に因り 3 本の柱に分けて表示される： ◎ The three lines are displayed in three different columns due to column balancing.
【 図のピンクの線（~padding）に示されている様に、このような場合でも，複柱~容器は指定された柱~数を占めることになる。 】【 原文の例では，内容が片側の柱にしかない間隙にも罫線が描かれていたので（ 4 節の記述 に反する）、図を修正している（以下同様）。 】
`column-fill^p だけ上書きして，柱を平準化しないようにした場合： ◎ In this example, column balancing is turned off:
article { column-fill: auto }
その結果、すべての内容は，最初の柱~内に埋められる： ◎ As a result, the first column is filled with all content:
次の例では、 `article^e には段落が 2 個あり，後のものは少し短くされている。 次の~styleを追加したとする： ◎ In this example, an article has two paragraphs: first a long one, then a shorter one. This code is applied:
p { break-after: column }
柱は最短でも 5 行l分の~textは含むようにされているとする。 各~柱は、柱高が確立されてから，逐次的に埋められる†結果、 3 柱~目までは，内容が占める高さが 最初の柱に揃う一方，最後の柱では ずっと短くなる。 ◎ The shortest column height possible contains five lines of text. After the column height has been established, columns are filled sequentially. As a result, the third column is as high as the first two columns, while the last column ends up being significantly shorter.
【† すなわち、平準化の設定が関与するのは，柱高の計算までであり、以降の~layoutには関与しないと考えられる。 故に，~layoutに 4 行l要する~textが 3 柱に平準化される場合、最初の 2 柱に 2 行lずつ描かれ，最後の柱は空になるであろう。 】
次の例では、 `article^e は 分断できない絵図から開始されているとする。 それが柱高を設定し、後続の内容は，残りの柱の中へ逐次的に埋められる : ◎ In this example, an article starts with an unbreakable figure which sets the column height. Subsequent content is filled sequentially into the remaining columns:
8. ~overflow
8.1. 複柱~容器の内側における~overflow
`柱~box$の外側に拡がる内容は、それにより柱が分断される事例を除き，視覚的に~overflowし，`柱~box$で切取られない。 ◎ Except for cases where this would cause a column break, content that extends outside column boxes visibly overflows and is not clipped to the column box.
注記： 柱~分断については、`柱~分断$ 節を見よ。 複柱~容器の内容~boxで切取られるかどうかについては， 頁割と複柱~容器の外側への~overflow 節を見よ。 ◎ Note: See §5 Column breaks for column breaks and §8.2 Pagination and overflow outside multicol containers for whether it is clipped to the multi-column container’s content box.
次の例では、画像が柱より幅広い： ◎ In this example, the image is wider than the column:
8.2. 頁割と複柱~容器の外側への~overflow
複柱~容器の辺を超えて `柱~box$の外側まで拡がるような，内容や柱~罫線は、 `overflow$p ~propに則って切取られる。 ◎ Content and column rules that extend outside column boxes at the edges of the multi-column container are clipped according to the overflow property.
複柱~容器は、次に挙げるものに因り，割り当てられた部屋より多くの柱を持ち得る： ◎ A multicol container can have more columns than it has room for due to:
- `柱高$を拘束する宣言があるとき（例えば `height$p や `max-height$p ）。 この場合、行内~方向に`柱~box$が追加される。 ◎ a declaration that constrains the column height (e.g., using height or max-height). In this case, additional column boxes are created in the inline direction
- 頁の~size。 この場合、追加の`柱~box$は，次の頁~以降に移動される。 ◎ the size of the page. In this case, additional column boxes are moved to the next page(s).
- 明示的な`柱~分断$。 この場合、追加の`柱~box$は ⇒＃ 連続的~文脈に対しては，行内~方向に追加される ／ `断片d文脈$に対しては， 次の断片~以降に移動される ◎ explicit column breaks. In this case, additional column boxes are created in the inline direction for continuous contexts, and additional column boxes are moved to the next fragment(s) for fragmented media.
連続的~文脈において複柱~容器の外側に現れる柱は、 `~overflow柱@ と呼ばれる。 ~overflow柱は、複柱~容器の縦幅に効果があり得る。 ◎ Columns that appear outside the multicol container in continuous contexts are called overflow columns. Overflow columns can effect the height of the multicol container.
次の~stylesheetでは、複柱~容器が占め得る最大の縦幅が拘束され，~overflowする内容は，可視になるように指定されている： ◎ In this example, the height of the multi-column container has been constrained to a maximum height. Also, the style sheet specifies that overflowing content should be visible:
div {
max-height: 5em;
overflow: visible;
}
その結果、連続的~文脈においては，柱~数 【すなわち `column-count$p の`実際の値$】 が増大される： ◎ As a result, the number of columns is increased.
連続的~文脈においては、~overflow柱は，複柱~容器の縦幅に効果があり得る。 この例では 4 行lの~textからなる柱が~overflow内に現れる。 複柱~容器は、この柱を収容するに足るまで高くされる。 ◎ In continuous contexts overflow columns can effect the height of the multicol container. In this example a column appears in the overflow which has four lines of text. The multicol container is made tall enough to accomodate this column.
`断片d文脈$においては、~overflowした内容は，後続の断片たち内の柱へ移される。 上の例と同じ内容が与えられた下で、頁~boxに，~textが整形される際に 5 行l分の部屋しか残されていない場合、まず， 1 頁~目には次が現れる： ◎ In fragmented contexts, the overflow content goes into columns in subsequent fragments. Given the same content as in the previous example and a page box that only has room for five lines of formatted text, this would appear on the first page:
2 頁~目には次が現れることになる（柱は平準化されているとする）： ◎ Assuming column balancing, this would appear on the second page:
次の例では、各~段落の後に，明示的な柱~分断が生成される： ◎ In this example, explicit column breaks are generated after paragraphs:
p {
break-after: column;
}
その結果、連続的~文脈の下では，柱~数が増大し，行内~方向に余分な柱が追加される： ◎ As a result, the number of columns increases and the extra columns are added in the inline direction:
頁d媒体【断片d文脈】においては、余分な柱は，次の頁~上に示される。 上の例と同じ~codeの下では、最後の段落は 2 頁~目に現れる。 まず， 1 頁~目には次が現れる： ◎ In paged media, extra columns are shown on the next page. Given the same code as the previous example, the last paragraph appears on the second page. This would appear on the first page:
2 頁~目には、次が現れることになる： ◎ This would appear on the second page:
柱~平準化に因り、最後の段落は 3 本の柱に分割される。 ◎ Due to column balancing, the last paragraph is split across three columns.
変更点
~INFORMATIVE2017 年 10 月 5 日付 作業草案 からの変更点は： ◎ Changes from the Working Draft (WD) of 5 October 2017
- 頁d媒体への参照を`断片d文脈$を指すように変更した。 Resolved: 12 Apr 2018 ◎ Changed references to paged media to refer to fragmented contexts. Resolved 12 Apr 2018.
- `column-fill$p ~propに関する一文を次のように変更した Resolved: 12 Apr 2018 ⇒＃ “連続的~媒体においては、この~propは，~overflow柱に対する効果はない。” → “連続的~文脈においては、この~propは，~overflow柱が在るときには効果はない。” ◎ Changed a line regarding the column-fill property: "In continuous media, this property does not have any effect in overflow columns." To: "In continuous media, this property does not have any effect when there are overflow columns. Resolved: 12 Apr 2018"
- ~overflow柱は複柱~容器~縦幅に効果があり得ることを示すため、例を追加した。 Resolved: 12 Apr 2018 ◎ Add a line of text plus an example to show that overflow columns can effect the multicol container height. Resolved: 12 Apr 2018
- HTML によるモックアップで与えていた例は、順序が明瞭でなかったので， SVG 版に置換した。 【原文の。この訳では依然として HTML + CSS 。】 Issue 1087 ◎ Replaced the HTML mock-up examples with SVG versions, as the examples were unclear. Issue 1087.
- `column-gap$p 用の `normal^v 値の使用~長さは、~UAが指定するものとされていたが，それに示唆されていた `1em^v になるものとするよう変更した。 Resolved: 2018 年 4 月 4 日 ◎ Changed the value of normal for column-gap to be 1em, rather than a UA-specified length with a suggestion of 1em. Resolved: 4 Apr 2018
- `column-width$p 用には、負の値は許容されないこと, および 0 は指定できるが 使用値は `1px^v 以上に切り上げられることを明確化した。 Resolved: 2018 年 3 月 14 日 ◎ Clarified that negative values are not allowed for column-width, and that while 0 may be specified, used values will be clamped to a minimum of 1px. Resolved: 14 Mar 2018
- ~spanning要素があるときには、内容は要素が現れる直前の`~row$に属する全~柱に，自動的に平準化されることを明確化した。 Resolved: 2017 年 11 月 9 日 ◎ Clarified that where there is a spanning element content is automatically balanced across all columns in the immediately preceding column row before the element appears. Resolved: 9 Nov 2017
- `~spanning要素$は，直の子でなくともよく、その場合には~spanning要素を包含している要素~上の［ ~margin, ~border, ~padding ］は，~spannerより上に描かれることについて明確化するとともに例も追加した。 Resolved: 8 Nov 2017 ◎ Added clarification plus an additional example that spanning elements may be lower the the first level of descendents, and that in the case of margins, borders and padding on the element containing the spanning, this would be drawn above the spanner. Resolved: 8 Nov 2017
-
次の文は、参照先の記述に変更した（
Resolved: 2017 年 11 月 7 日
）
⇒
`柱~罫線$は、行内~内容の層~内に, かつ 複柱の内側にあるどの行内~内容よりも下に塗られる
◎ Changed the sentence "Column rules are painted in the inline content layer, but below all inline content inside the multicol element." to "Column rules are painted just above the border of the multicol element. For scrollable multicol elements, note that while the border and background of the multicol element obviously aren’t scrolled, the rules need to scroll along with the columns." Resolved: 7 Nov 2017 -
次の文は、明確化するため［
参照先とそれに伴う新たな例
］に置換された（
Resolved: 2017 年 11 月 7 日
）
⇒
柱~boxは，塊~容器~boxである。 すなわち、柱~boxは， CSS 2.1, 10.1 節 の第 2 項による［ 塊~level ／ ~table~cell ／ 行内-塊 ］~boxの様にふるまう。 しかしながら，柱~boxは、 `position^p が［ `fixed^v ／ `absolute^v ］にされた要素に対しては，塊~容器~boxを確立しない。
◎ Under section The Multi-column Model, removed two sentences "That is, column boxes behave like block-level, table cell, and inline-block boxes as per CSS 2.1, section 10.1, item 2 CSS21. However, column boxes do not establish block container boxes for elements with position: fixed or position: absolute.". THese were replaced with a clarification about the principal box and a new example showing how abspos elements refer to the multicol container. Resolved: 7 Nov 2017 -
次の文（および後続する例）を除去した（ Editorial ） ⇒
柱が分断されるべき（または べきでない）所を指示するため、新たな~keyword値も導入される。
その~keywordを用いる~propは、今は他の仕様が導入するようになったので。
◎ Removed the sentence "To indicate where column breaks should (or should not) appear, new keyword values are introduced." and following example (Example 7 in the WD published 5 Oct 2017) as the multicol specification no longer introduces these properties. Editorial - 複柱の適用-対象を指す語を， “複柱~要素” から “複柱~容器” に変更した（ Resolved: 2017 年 11 月 22 日 ）。 ◎ Changed how we reference the element we have applied multicol to from multi-column or multicol "element" to multi-column or multicol "container". Resolved: 22 November 2017
-
次のように記した例を除去した（
Resolved: 2017 年 9 月 7 日
）
⇒
背の高い画像が，そのための部屋を見出すために，次の頁~上の柱へ移動された場合、元の所の柱は空のままにもなり得る。 その場合、柱~罫線の有無を決める目的においては，元の柱は依然として内容を持つものと見なされる。
◎ Removed the example which stated "If a tall image is moved to a column on the next page to find room for it, its natural column may be left empty. If so, the column is still considered to have content for the purpose of deciding if the column rule should be drawn." Resolved: 7 September 2017
2011 年 4 月 12 日付 勧告候補 からの変更点は： ◎ Changes from the Candidate Recommendation (CR) of 12 April 2011.
- 2016 年 7 月の解決により、 CSS Grid 仕様と整合させるため，［ ~UAは、`筋$~sizeを，自身が指定する値を下限にするよう変更する ］ことが要求されるものとした。 Resolved: 7 Jan 2016 ◎ Added July 2016 resolution to change the the track size floor to a required UA-specified value, consistent with the CSS Grid spec. Resolved: 7 Jan 2016
- ［ ~overflow柱には `column-fill$p の効果はない ］とする言明における［ ~overflowする柱は，連続的~媒体に限られる ］とする制約を除去した。 Resolved: September 2013 ◎ Remove the restriction about overflow columns only being in continuous media in the statement that column-fill has no effect on overflow columns. Resolved: September 2013.
- `balance-all$v ~keyword, および これがどう働くべきかを示す例を追加した。 Resolved: September 2013 ◎ Added keyword balance-all and examples to demonstrate how this should work. Resolved: September 2013.
- 使用値の計算法 のいくつかの箇所は、改訂された。 Latest change Feb 2013 ◎ The pseudo-algorithm has been revised on a number of occasions. Latest change Feb 2013.
- `columns$p, `column-width$p, `column-count$p ~propは、塊~容器に適用されることを明確化した。 Ref: Feb 2013 ◎ Clarified that properties columns, column-width, column-count "apply to block containers". Ref: Feb 2013.
- 各種 分断~用~propは、この仕様から CSS Fragmentation Module へ移動された。 ◎ Breaking properties have beeen moved from this specification to the CSS Fragmentation Module.
- `column-fill$p は，頁~分断の前に尊守されることが明確化されるよう、 `column-fill$p の言い回しを変更した。 Ref: Jan 2012 ◎ Change to column-fill wording to clarify that column-fill is honored before page breaks. Ref: Jan 2012.
- ~margin相殺を伴う~spanning要素に何が起こるか明確化するため、例と~textを改正した。 Ref: Oct 2013 ◎ Amended example and text to clarify what happens with margin collapsing and spanning elements. Ref: Oct 2013.
- `column-rule-width$p は、柱の~sizeや配置を改めないことを明確化した。 Ref: Sep 2013 ◎ Clarification that column-rule-width does not alter the size or placement of columns. Ref: Sep 2013.
- 各~柱~spanning要素は、［ それらの合間を相殺する，別々の`~BFC$~margin ］を確立するものとした。 Ref: Dec 2011 ◎ Added that each column spanning element establishes a separate BFC margins between them collapse. Ref: Dec 2011.
- `柱~罫線$は、行内~内容の層~内に, かつ 複柱の内側にあるどの行内~内容よりも下に塗られるとした。 Ref: Feb 2013 ◎ Column rules are painted in the inline content layer, but below all inline content inside the multicol. Ref: Feb 2013.
- `column-span$p は、複柱~内にない要素に対しても，整形~文脈を確立させることを明確化した。 ◎ Clarify that column-span causes the element to establish a formatting context even if it is not in a multicol.
- 柱~spannerは、常に塊整形~文脈を確立するとは限らないようにした。 ◎ Column spanners do not always establish a block formatting context.
- `column-gap$p は、 `length$t に代えて `length-percentage$t を受容するようにした。 ◎ Allow column-gap to accept <length-percentage> instead of just <length>
- `column-width$p ／ `column-count$p は、`~table包装~box$を除く`塊~容器$に適用されるようにした。 ◎ column-width and column-count applies to block containers except table wrapper boxes.
- 柱を~overflowする内容は、切取られないようにした。 ◎ Content that overflows columns is not clipped.