1. 序論
◎非規範的この~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.
【 日本語では一般に “段組” と呼ばれているが、 段組の “~~段（横方向へ伸びる柱）” は 縦組みが念頭に置かれている語であり， `複柱~行l$と紛らわしいので、 この訳では もっと直に， “複柱” と記す。 この意味を表す原文の語 “`multi-column^en” は、 原文では “`multicol^en” とも略記されるが，対訳では区別しない。 】
~CSSにおける他の~layout手法では、 親~要素に適用されたとき，その子たちの表示~prop【！`display^p ~propではない】は変化する。 例えば， 3 本の`格子~col$からなる`格子~layout$が作成された場合、 `格子~容器$の子は`格子~駒$になり， `格子~升$ごとに 1 個の要素が~col`筋$の中に配置される — 必要に応じて追加的な`格子~row$を作成して。 ◎ Other layout methods in CSS, when applied to a parent element, change the display properties of the direct children. For example if a three column grid layout is created, the direct children of the grid container become grid items and are placed into the column tracks, one element per cell with additional rows created as needed.
しかしながら，`複柱~容器$の子~要素は、 `通常~flow$内にあり続け， その~flowは何本かの柱の中へ配列される。 これらの`柱$の`行内~size$は~flex可能なので、 可用な空間に対し，表示される［ ~size／柱の本数 ］が変化することにより応答する。 ◎ The child elements of a multi-column container however continue in normal flow, that flow is arranged into a number of columns. These columns have a flexible inline size, and therefore respond to available space by changing the size or number of columns displayed.
【 この~layoutは、 各~柱を~text行lになぞらえた下での “より粒度の荒い” 行内~layoutと捉えることもできる。 ~lay-outされる内容は、 ~textの自動改行と同様に，~page分断（改~page）／後述の`~spanning要素$により “自動改~柱 （`平準化＠#filling-columns$）”され、 各~柱の~~幅は，~textの行高と同様に一定にされる。 】
~CSSで`複柱~layout$を記述するのは容易である。 単純な例を示す： ◎ Multi-column layouts are easy to describe in CSS. Here is a simple example:
body { column-width: 12em }
この例では、 `body^e 要素は，各 柱の~~幅が少なくとも `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 }
【† 通例の略式~propとふるまいが異なるわけではなく，実際には両者とも設定する — 値を指定しなかった方の~propは初期~値 `auto^v にされる。 】
この~moduleは、 各~柱~間の`~gap$と`罫線$について記述する，別の~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 本の柱の~gapを `1em^v に設定する。 `柱~gap$は，~padding区画に類似する。 ~gapの真中には、 `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 要素は，すべての柱に渡って~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は，柱が 1 本だけの`複柱~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.
次の描画~見本に、 ~padding（図のピンク）を伴う`複柱~容器$における， `柱~gap$（図の黄色＋緑色）, `柱~罫線$（図の緑色） を示す。 これらの色は，~~説明~目的で呈示するものであり、 実際の実装では，これらの区画のうち罫線~以外には背景が~~現れることになる。 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.
複柱~layoutの様々な各部を示している図式 ◎ a diagram showing the various parts of multi-column layout ◎ key to the conventions used to display invisible parts of diagram
【！invisible-elements.svg】複柱~layoutの様々な各部を示している図式 ◎ a diagram showing the various parts of multi-column layout
1.1. 値~定義
【 この節の内容は ~CSS日本語訳 共通~pageに移譲。 】
2. 複柱の~model
［ `column-width$p または `column-count$p ］~propが `~auto0$v でない値にされた要素は、 `複柱~容器@ （ `multi-column^en 容器, 略して `multicol^en 容器）を確立し，`複柱~layout$の容器として動作する。 ◎ An element whose column-width or column-count property is not auto establishes a multi-column container (or multicol container for short), and therefore acts as a container for multi-column layout.
従来の~CSS~box~modelにおいては、 要素の内容は，当の【！corresponding】要素の`内容~box$の中へ~flowされていた。 `複柱~layout$は、 `匿名$な`断片化~容器$たちで形成される`断片化~文脈$ — `柱~box@ （略して “柱” ） — を導入する。 これらの各`柱~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 fragmentation context formed of anonymous fragmentation containers called column boxes (or columns for short). These column boxes establish an independent block formatting context into which the multi-column container’s content flows, and form the containing block for its non-positioned children.
次の例では、 画像の幅を 次の規則により設定する。 ◎ In this example, the width of the image is set with these rules:
img { display: block; width: 100% }
`柱~box$は新たな`塊~整形~文脈$を作成するので、 `width$p は`柱~box$に相対的に計算される。 したがって画像は、 柱~boxを~overflowしないことになる。 ◎ Given that the column box creates a new block formatting context, the width is calculated relative to the column box. Therefore the image will not overflow the column box:
ある画像が，柱~boxの内側に包含されている。 ◎ an image contained inside a column box
`柱~box$は新たな`塊~整形~文脈$を作成するので、 `複柱~容器$の最初の子~要素に設定された上端~marginは，複柱~容器の~marginとは相殺されないことになる。 ◎ Given that the column box creates a new block formatting context, a top margin set on the first child element of a multicol container will not collapse with the margins of the multicol container.
最初の段落の `margin-top^p `1em^v は、 ~textより前に現れる。 ◎ The first paragraph has a 'margin-top' of ''1em'', which appears before the text.
`複柱~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;
}
~HTMLにおいては、 この画像は `現在の行l＠~CSS2J#floats$ の右へ浮動する。 ◎ In the HTML, the image appears after the sentence ending, "the leg of a chicken".
浮動され，柱~boxの内側に包含されている画像 ◎ an image floated and contained inside a column box
`塊~軸$において`柱~box$内を~overflowする内容は、 `断片$化され，次に来る`柱~box$内に継続される。 ◎ Content overflowing a column box in the block axis fragments and continues in the next column box.
注記： `柱~box$は、 `匿名$であり，`絶対的に位置され$た~box用の`包含塊$にはならない。 そのような~box用の包含塊を確立する `position$p ~propは、 `首要~box$である`複柱~容器$に適用される。 ◎ Note: Column boxes, which are anonymous boxes, do not become the containing block for absolutely positioned boxes. The position property, which establishes a containing block for such boxes, applies to the multicol container, it being the principal box.
次の例の`複柱~容器$は、 `position$p が `relative^v にされているため，その子である画像の包含塊になる。 画像の `position$p は `absolute^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;
}
絶対的に位置された画像は、 柱~boxではなく，複柱~容器を基準に位置される。 ◎ The absolutely positioned image is positioned by reference to the [=multi-column container=] not the [=column box=].
`複柱~容器$の子孫のうち`~flow外$にあるものは、［ 柱の平準化／複柱~容器の`塊~size$ ］には影響しない。 ◎ Out-of-flow descendants of a multi-column container do affect column balancing, and the block-size of the multi-column container.
各 `柱~box$は，`複柱~容器$の`行内~基底~方向$に順序付けられ， 1 個以上の `複柱~行l@ の中に配列される。 ［ `柱~幅@ ／ `柱~高さ@ ］†とは、 `柱~box$の［ `行内~size$／`塊~size$ ］である。 同じ`複柱~行l$内に並ぶ すべての`柱~box$の 柱~幅, 柱~高さは，同じに揃う††。 ◎ The column boxes are ordered in the inline base direction of the multicol container and arranged into multicol lines. 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 line have the same column width, and all column boxes in a line have the same column height.
【† この仕様の［ 幅（ `width^en ）／高さ（ `height^en ） ］は、 `横組み$を念頭に記されている — 下の注記を見よ。 】【†† ほとんどの場合、 柱~幅は，各 `複柱~行l$で一定になるが、 可用な幅が`複柱~行l$ごとに変わる場合は，そうならない — 例えば，各~断片の幅が一定でない`断片化~文脈$（ `CSS Region^cite ）の下では、 それが普通になろう。 】
注記： 縦組みを利用している~text~~組版においては、 一連の塊は横~方向へ連なる。 `縦組み$【の下での複柱~layout】においては、 各~柱は，横に【すなわち，縦~方向に堆積されるように】~lay-outされる — 柱を成す一連の塊が~flowする方向は，右から左, 左から右どちらもあり得る。 したがって `column-width$p ~propは、 物理-横幅ではなく，柱の`行内~size$を指す。 ◎ Note: In text set using a vertical writing mode, the block direction runs horizontally. In a vertical writing mode columns are laid out horizontally, and the direction of the flow of blocks may be right to left, or left to right. The column-width property therefore refers to the inline size of the column, and not the physical horizontal width.
図左は、 横書き~textを示す — 行内~方向は左から右。 図中央は、 縦書き~textを示す — 各~塊は右から左へ~flowしている。 図右は、 縦書き~textを示す — 各~塊は左から右へ~flowしている。 ◎ The first image shows horizontal text with a LTR inline direction. The second shows vertical text with blocks flowing right to left. The third shows vertical text with blocks flowing left to right.
`複柱~容器$内の同じ`複柱~行l$内で隣接な`柱~box$は、 `柱~gap@ （ `column gap^en ） で分離され，各 `柱~gap$は `柱~罫線@ （ `column rule^en ）を包含し得る†。 同じ複柱~容器~内の すべての柱~gapは，等しい。 同じ複柱~容器~内の すべての柱~罫線もまた，現れるならば等しく現れる — ただし、 柱~罫線が現れるのは，その両側の柱とも内容を持つときに限られる。 ◎ Within each multicol line 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 multi-column container are equal. All column rules in the same multi-column container are also equal, if they appear; column rules only appear between columns that both have content.
【† すなわち、 ~gapは，~layoutに占める空間を指示し、 罫線は，その空間に描画されるものになる。 詳細は `§ 柱の~gapと罫線＠#column-gaps-and-rules$ に。 】
最も単純な場合、 1 個の`複柱~容器$には，何個かの柱からなる 1 個の`複柱~行l$のみが含まれ、 各~柱の高さは，複柱~容器の`内容~box$の使用~高さに等しくなる。 しかしながら，［ `断片化$／`~spanner$ ］は、 複柱~容器の内容を複数個の`複柱~行l$に分割し得る ◎ In the simplest case a multicol container will contain only one line of columns, and the height of each column will be equivalent to the used height of the multi-column container’s content box. However, fragmentation or spanners can split the content of the multi-column container into multiple multicol lines.
`複柱~容器$が~page割りされる場合、 各 柱の高さは ~pageに拘束され，内容は 次の~page上の新たな`複柱~行l$に継続する — `柱~box$が複数~pageに分割されることは、 決してない。 ◎ If the multi-column container is paginated, the height of each column is constrained by the page and the content continues in a new line of column boxes on the next page; a column box never splits across pages.
同じ効果は、 `~spanning要素$が`複柱~容器$を【上下の`複柱~行l$に】分け隔てるときにも生じる： `~spanning要素$に先行する内容は、 `複柱~行l$内の各~柱に収まるように平準化され，~boxの~~高さは~~最小限に短縮される。 `~spanning要素$に後続する内容は、 後続な新たな`複柱~行l$内の`柱~box$の中へ~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, subsequent line of column boxes.
~spanning要素を示している図式 — 要素より上にある柱たちは短縮され、 ~textは，要素の下にある新たな柱~内へ継続している ◎ a diagram showing a spanning element causing the shortened columns above the element with text continuing in new columns below
したがって`複柱~容器$は、 新たな`独立な整形~文脈$を確立する定例の`塊~容器$になり、 その内容は一連の`複柱~行l$と`~spanner$からなる。 各 `複柱~行l$は、 `塊~levelの~box$として動作し，その`柱~box$用の `複柱~整形~文脈@ を確立する。 各`~spanner$は、 `独立な整形~文脈$を確立する`塊~levelの~box$として動作し、 その表示~型は，通例通り自身の `display$p 値に依存する。 ◎ A multi-column container therefore is a regular block container that establishes a new independent formatting context whose contents consist of a series of multicol lines and multicol spanners. Each multi-column line acts as a block-level box that establishes a multi-column formatting context for its column boxes; and each spanner acts as a block-level box that establishes an independent formatting context with its type depending on its display value as usual.
入子な`複柱~容器$も許容されるが、 実装に特有な制限sがあり得る。 ◎ 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された場合、 柱から次の柱へ閲覧するときに~pageの端から端までスクロールを要し得る。】 詳細は `§ ~accessibilityの考慮点＠#a11y$ を見よ。 ◎ Note: Multicol containers with column heights larger than the viewport may pose accessibility issues. See Accessibility Considerations for more details.
3. 柱の本数と幅
複柱~内容を~lay-outするにあたっては，`柱$の本数と幅を見出すことが基礎的になる。 ［ `column-count$p ／ `column-width$p ］~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 • column-width
加えて、 この両者を設定する略式~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. 柱の行内~size： `column-width^p ~prop
◎名 `column-width@p ◎値 `~auto0$v | `length [0,∞]$t ◎初 `auto^v ◎適 `塊~容器$ — ただし，`~table包装~box$は除く ◎ block containers except table wrapper boxes ◎継 されない ◎百 受容しない ◎算 ~keyword `auto^v ／絶対~長さ ◎ the keyword auto or an absolute length ◎順 文法に従う ◎ア 算出d値の型による ◎表終この~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 [0,∞]$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^en ）” — ~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 をいくぶん~flex可能にしている理由は、 多様な~screen~sizeに適宜 収まるような設計を得るためである。 `柱~幅$を正確に設定するためには、 `複柱~容器$に［ `柱~gap$, および幅（縦書き~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 container (assuming horizontal text) must also be specified.
3.2. 柱の本数: `column-count^p ~prop
◎名 `column-count@p ◎値 `~auto1$v | `integer [1,∞]$t ◎初 `auto^v ◎適 `塊~容器$ — ただし，`~table包装~box$は除く ◎ block containers except table wrapper boxes ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 算出d値の型による ◎表終この~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 [1,∞]$t
- 要素の内容が~flowされることになる，最適とされる柱~数を記述する。 値は正でなければナラナイ。 `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 の`使用~値$の上限を意味する （`柱~幅$は、 `その結果に基づいて計算される＠#pseudo-algorithm$） — `複柱~行l$内に~lay-outされる`実際の柱~数^em（`実際の値$）ではなく。 連続的~文脈の下では、 複柱~容器に指定された高さの上限や`柱~分断$などに因り，指定した柱~数を~overflowする内容は、 （他が指定されない限り）同じ`複柱~行l$に柱を追加しながら継続されることになる （断片化~文脈の下では，自動的に新たな`複柱~行l$に折り~~返されるが） — 詳細は `§ ~overflow＠#pagination-and-overflow-outside-multicol$ に。 ~overflowする内容を新たな`複柱~行l$に折り~~返すためには、 別個な複柱~容器に振り分けるか, （高さの上限を指定せずに）後述の`~spanning要素$を利用することになる。 】
◎ Example:
body { column-count: 3 }
3.3. `column-width^p, `column-count^p 用の略式： `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 の`使用~値$は、 それらの`算出d値$, `column-gap$p の算出d値, `複柱~容器$の使用~幅から、 以下に従って決定される。 ◎ 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 container.
注記： 複柱~容器の使用~幅は、 要素の内容に依存することもある†。 その場合、 それは `column-count$p, `column-width$p ~propの`算出d値$にも依存する。 この仕様は，その計算法については定義しない。 別の~module （おそらく， `CSS3BOX$r か `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 Box Sizing Module [CSS3-SIZING]) is expected to define this.
【† 例えば，`直交~flow$の下では、 同じ`複柱~行l$の中へ`内容に必要なだけ，柱が追加され得る＠~CSSWM#auto-multicol$。 これらは`~overflow柱$ではないので，要素の使用~幅（`行内~size$）に寄与する。 】
-
まず `column-count$p の`使用~値$ %C を計算する：
- %count ~LET `column-count$p の算出d値
- %width ~LET `column-width$p の算出d値
- %gap ~LET `column-gap$p の算出d値
- %U ~LET 複柱~容器の使用~幅
- ~IF［ %width ~EQ `~auto0$v ］~AND［ %count ~EQ `~auto1$v ］ ⇒ 複柱~容器ではないので、 使用~値は計算されない 【この場合でも，`直交~flow$の下では、`複柱~容器として扱われ得る＠~CSSWM#auto-multicol$。】
- ~IF［ %gap ~EQ `normal$v ］ ⇒ %gap ~SET `1em^v
- %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の下限にするモノトスル。 この下限は `1px^v 以下にすることが示唆される。 ◎ For the purpose of finding the number of auto-repeated columns, the UA must floor the column size to a UA-specified value to avoid division by zero. It is suggested that this floor be 1px or less.
`~paged媒体$などの`断片~化~文脈$においては、 ~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 は、 実質的には`柱~幅$を確定させるためにあり， `複柱~行l$内に~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>
容器の内側には 2 本の柱が，外側には 1 本の柱が描かれている。 ◎ Two columns drawn inside the container, one outside
`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 の［ `算出d値$は `~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. 柱の~gapと罫線
`柱~gap$と`柱~罫線$は、 同じ`複柱~容器$内の各`柱$の合間に置かれる。 これらの高さ【！長さ】は、 `柱~高さ$に等しくされる。 柱~gapは【~layoutにおいて】空間を占める。 すなわち、 柱~gapは，（同じ`複柱~容器$の中で）内容を両側の柱に分け隔てることになる【描かれるものではない】。 ◎ 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).
`複柱~容器$ %容器 の`罫線$は： ◎ ↓
- %容器 の 上下の内容~辺を端点として，`柱~gap$の真中に描かれる。 ◎ 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.＼
- `柱~gap$より幅広にされた場合、 隣接な`柱~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 container. For scrollable multicol containers, note that while the border and background of the multicol container 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 ~propは、 `CSS3-ALIGN$r にて定義される。 ◎ The column-gap property is defined in [CSS3-ALIGN].
`複柱~整形~文脈$においては、 `column-gap$p ~prop用の `normal$v の使用~値は `1em^v になる。 これは、 初期~値が利用されても，各~柱は可読になることを確保する。 `柱$の合間にある`罫線$は、 在るならば`~gap$の途中に現れることになる。 ◎ In a multi-column formatting context the used value of normal for the column-gap property is 1em. This ensures columns are readable when the initial values are used. If there is a column rule between columns, it will appear in the middle of the gap.
4.2. 柱~罫線の色： `column-rule-color^p ~prop
◎名 `column-rule-color@p ◎値 `color$t ◎初 `currentcolor$v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 `算出d色$ ◎順 文法に従う ◎ア 算出d値の型による ◎表終- `color$t
- `柱~罫線$の色を指定する。 ◎ Specifies the color of the column rule.
4.3.柱~罫線の~style： `column-rule-style^p ~prop
◎名 `column-rule-style@p ◎値 `line-style$t ◎初 `none^v ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終`column-rule-style$p ~propは、 `柱$間に描かれる`罫線$の~styleを設定する。 `line-style$t 値は `~borderの縮約~model＠~CSS2TABLE#collapsing-borders$ に従って解釈される†。 ◎ 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 の`算出d値$を `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 ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 絶対~長さを`機器~画素の整数倍に留めた＠~CSSVAL#snap-a-length-as-a-border-width$結果 — ただし、 `柱~罫線$の~styleが［ `none^v ／ `hidden^v ］のときは `0^v ◎ absolute length, snapped as a border width; 0 if the column rule style is none or hidden ◎順 文法に従う ◎ア 算出d値の型による ◎表終この~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.
次の例では、 `柱~罫線$と`柱~gap$の幅を同じにする。 したがって，それらは正確に同じ空間を占有することになる。 ◎ 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: 1.3rem;
column-rule-width: 1.3rem;
column-rule-style: solid;
column-rule-color: green;
}
罫線は、 どの~gapも完全に覆っている。 ◎ The rule completely covers any gap.
5. 柱の分断
~UAは、 `複柱~容器$の内容を複数の`柱$に~lay-outする際に，柱をどこで分断するかを決定するモノトスル。 内容を各~柱へ分断する問題は、 `CSS21$r の § 13.3.3 に述べられている，各~pageへ分断する問題に類似する。 ◎ 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].
柱~分断を許容するため，`~page分断$の~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. 何~柱かに~spanする要素： `column-span^p ~prop
◎名 `column-span@p ◎値 `none$v | `all$v ◎初 `none^v ◎適 `~flow内$にある`塊~level$の要素【！in-flow block-level elements】 ◎百 受容しない ◎継 されない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 要素が`複柱~行l$全体に~spanし得るかどうか†を記述する。 各種 値の意味は： ◎ This property describes how many columns an element spans across. Values are:
【† 原文には明示的に “`how many^en（~spanし得る柱~数）” と記されているが、 実際の定義に則って訳を変えている。 将来的には、 具体的な柱~数を指定する拡張が想定されているようだ。 】
- `none@v
- 要素は、 複数の`柱$に~spanしない。 ◎ The element does not span multiple columns.
- `all@v
- 要素は、 `柱~分断$を強制する — 要素は`~flow外$にされ、［ 同じ`塊~整形~文脈$の中の，最も近い先祖の`複柱~容器$ ］内の すべての`柱$に渡るように~spanする。 要素より前に現れる, かつ`通常~flow$内にある内容は、 要素の直前の`複柱~行l$において すべての柱に渡って，自動的に平準化される。 後続な内容は、 要素の直後の新たな`複柱~行l$の中へ~flowする。 要素は、 `独立な整形~文脈$を確立する。 ◎ The element forces a column break＼ and is taken out of flow to span 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 multi-column line before the element appears,＼ and any subsequent content flows into a new multi-column line after the element.＼ 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 descendant 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要素@ （略して，~spanning要素） と呼ばれ、 それが作成する~boxは， `複柱~spanner@ （略して，~spanner） と呼ばれる。 ◎ An element that spans more than one column is called a multi-column spanning element and the box it creates is called a multi-column spanner.
`~spanner$の`包含塊$は、 `複柱~容器$が与える。 その帰結として、 `~spanner$自身が その内側に`絶対的に位置され$る~box用の`包含塊$を確立しない事例では，それらの`包含塊~連鎖$は — 当の［ ~spanner, `複柱~容器$ ］の合間にある先祖を飛ばして — 直に`複柱~容器$へ行く。 ◎ The containing block of the spanner is the multicol container itself. Consequently, in cases where the spanner itself does not establish a containing block for absolutely positioned boxes inside the spanner, their containing block chain skips directly to the multicol container (skipping any ancestors between the spanner and the multicol container).
`~spanner$は`~flow外$にされるが、 これは，当の~spanning要素の `塗ng順序＠~CSS22/zindex.html#elaborate-stacking-contexts$ `CSS21$r には影響しない。 ◎ Although the spanner is taken out-of-flow, this does not affect the painting order [CSS21] of the spanning element.
次の例では、 `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 above the h2 element.
要素は、 3 本すべての柱に~spanする。 ◎ An element spans all three columns
`~spanner$は`複柱~行l$を分割するので、 `柱~罫線$も中断することに注意 （それらが描かれるのは、 同じ`複柱~行l$内の`柱$どうしの合間に限られる）。 ◎ Note that because the spanner splits the multi-column line, it also interrupts any column rules (which are only drawn between columns in a multi-column line).
`~spanning要素$は、 同じ`整形~文脈$の一部を成す, かつ［ 当の~spanning要素と`複柱~容器$の合間に`固定d位置決め包含塊$を確立するもの ］は無い限り，直な子でなくともよい。 ◎ A spanning element may be lower than the first level of descendants as long as they are part of the same formatting context, and there is nothing between the spanning element and multicol container that establishes a containing block for fixed position descendants.
この例では、
`column-span$p: `all^v
を伴う要素は、
`transform$p: `rotate(90deg)^v
を伴う要素の内側にある。
当の変形は、
固定d位置決め包含塊を確立するので，`~spanner$は作成されない。
◎
In this example, the element with column-span: all is inside an element with transform: rotate(90deg). The transform establishes a containing block for fixed position descendents, therefore a spanner will not be created.
<article>
<section>
<div class="spanner">Attempted spanner</div>
</section>
</article>
article {
columns: 2;
}
section {
transform: rotate(90deg);
}
.spanner {
column-span: all;
background: silver;
}
~spannerより前にある断片が空な場合でも，特別なことは何も起こらず、 【包含している要素の】上端［ ~margin／~border／~padding ］は，空な`断片$として~spanning要素の上に現れる。 ◎ 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 に設定されており，すべての`柱$に~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;
}
要素は、 3 本すべての柱に~spanする。 `section^e を囲う赤色~borderは、 ~spannerで分断される。 ◎ An element spans all three columns, the red border around the section breaks before the spanner.
要素を`~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 要素は、 ~overflow柱~内にある ◎ The h2 element is in an overflow column
次の例は、 `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.
`h2^e 要素は、 最後の柱~内にある ◎ The h2 element is in the final column
`断片~化~文脈$においては、 `~spanning要素$は，すべての断片において尊守される。 次の例では、 `~paged媒体$において，最初の 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. A spanning H2 element appears after the fourth paragraph.
3 本の柱があり、 それぞれ，何~行lかの~textを伴う ◎ Three columns with two lines of text each
3 本の柱にまたがって~spanしている要素があり、 その上下に~textがある。 ◎ A spanning element across the three columns, text above and below.
`~spanner$は，`塊~levelの~box$なので、 隣接な 2 本の`~spanner$の~marginどうしは，相殺されることになる。 `絶対的に位置され$た~itemのみで分離された 2 本の`~spanner$の~marginどうしも，相殺されることになる — 絶対的に位置された~itemは、 `柱~box$を作成しないので。 `柱~box$は，新たな`塊~整形~文脈$を確立するので、 柱~boxの内側にある要素の~marginと~spannerの~marginとは相殺されない。 ◎ Spanners are block-level boxes therefore the margins of two adjacent spanners will collapse with each other. The margins of two spanners separated only by an absolutely positioned item will collapse with each other, as absolutely positioned items do not create column boxes. As column boxes establish a new block formatting context, margins on elements inside a column box will not collapse with the margin of a spanner.
`~spanner$は，新たな`整形~文脈$を確立するが、 ~marginは，周囲のものに応じて変更され得る。 次の例では、 2 本の~spannerが自然に~page上端に来ているとする。 1 本目の~spannerの上端~marginは、 `非強制d分断$に連接するため，切落される。 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 }
~page分断の後にある， 2 個の~spanning要素 ◎ Two spanning elements after a page break
7. 柱の埋方
各`柱$を内容で埋めていく方法には、 各~柱~間で内容を平準化するか, しないかの二つの~~選択肢がある。 柱が平準化される下では、 ~UAは，［ `強制d分断$, `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 ◎適 `複柱~容器$ ◎継 されない ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 直後に`~spanner$が無い`複柱~行l$に対し， その内容が各~柱~間で平準化されるかどうかを指定する。 【`~spanner$が在る場合は常に平準化される。】 ◎ This property specifies whether content in a multi-column line that does not immediately precede a spanner is balanced across columns or not.＼
各種 値の意味は： ◎ The values are:
- `balance@v
- 内容を，各`柱$間でアリな限り平準化する。 `断片~化~文脈$においては、 最後の断片だけ平準化する。 ◎ Balance content equally between columns, as far as possible. In fragmented contexts, only the last fragment is balanced.
- `balance-all@v
- 内容を，各`柱$間でアリな限り平準化する。 `断片~化~文脈$においては、 すべての断片に渡って平準化する。 ◎ 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.
4 本の柱のうち，最初の 3 本には内容がある。 ◎ Four columns, the first three have content.
【 図のピンクの線（~padding）に示されている様に、 このような場合でも，複柱~容器は指定された柱~数を占めることになる。 】
`article^e に高さを与えた上で，柱を平準化しないよう `column-fill^p も~~上書きした場合： ◎ In this example, column balancing is turned off, and the article has a height:
article {
height: 4lh; /* 4 行l分 */
column-fill: auto;
}
その結果、 すべての内容は，最初の柱~内に埋められる： ◎ As a result, the first column is filled with all content:
4 本の柱のうち，最初の 1 本だけ内容がある。 ◎ Four columns, the first one has 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.
4 本の柱~すべてに内容がある。 ◎ Four columns, all have content.
【† すなわち、 平準化の設定が関わるのは，柱~高さの計算までであり、 以降の~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:
4 本の柱のうち、 1 本目の柱は画像が占めている。 2 本目と 3 本目には~textがある。 ◎ Column one contains an image, two and three have content.
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$で切取られるかどうかについては、 `§ ~page割りと複柱~容器の外側への~overflow＠#pagination-and-overflow-outside-multicol$ を見よ。 ◎ 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:
最初の柱~内の画像は、 柱を~overflowしている。 ◎ An imagine in the first column has visible overflow
8.2. ~page割りと複柱~容器の外側への~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
- ~pageの~size。 この場合、 追加的な`柱~box$は，次の~page以降に移動される。 ◎ the size of the page. In this case, additional column boxes are moved to the next page(s).
- 明示的な`柱~分断$。 この場合、 追加的な`柱~box$は ⇒＃ 連続的~文脈に対しては，行内~方向に追加される ／ `断片~化~文脈$に対しては，次の断片~以降に移動される ◎ 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 affect 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.
4 本の柱のうち 1 本は、 複柱~容器の外側にある ◎ Four columns, one outside the multicol container
連続的~文脈においては、 ~overflow柱は，`複柱~容器$の高さに影響し得る。 この例では 4 行lの~textからなる柱が~overflow内に現れる。 `複柱~容器$は、 この柱を収容するに足るまで高くされる。 ◎ In continuous contexts overflow columns can affect 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 accommodate this column.
4 本の柱があり、 ~overflow柱は，最初の 3 本より背が高い。 ◎ Four columns, overflow column is taller than the first three
`断片~化~文脈$においては、 ~overflowした内容は，後続な断片たち内の柱へ移される。 2 つ前の例と同じ内容が与えられた下で、 ~page~boxに，~textが整形される際に 5 行l分の部屋しか残されていない場合、 まず， 1 ~page目には次が現れる： ◎ In fragmented contexts, the overflow content goes into columns in subsequent fragments. Given the same content as in example 31 and a page box that only has room for five lines of formatted text, this would appear on the first page:
3 本の柱 ◎ Three columns
2 ~page目には次が現れることになる（柱は平準化されているとする）： ◎ Assuming column balancing, this would appear on the second page:
3 本の柱 ◎ Three columns
次の例では、 各~段落の後に，明示的な柱~分断が生成される： ◎ 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:
4 本の柱のうち 1 本は、 複柱~容器の外側にある ◎ Four columns, one outside the multicol container
~paged媒体【断片~化~文脈】においては、 余分な柱は，次の~page上に示される。 上の例と同じ~codeの下では、 最後の段落は 2 ~page目に現れる。 まず， 1 ~page目には次が現れる： ◎ 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:
3 本の柱 ◎ Three columns
2 ~page目には、 次が現れることになる： ◎ This would appear on the second page:
3 本の柱 ◎ Three columns
柱~平準化に因り、 最後の段落は 3 本の柱に分割される。 ◎ Due to column balancing, the last paragraph is split across three columns.
変更点
◎非規範的- 2021年 10月 12日 勧告候補 からの変更点 ◎ Changes from the Candidate Recommendation (CR) of 12 October 2021
-
次の~textを追加した
（`2022年 3 月 9日に解決した＠~CSSissue/6805#issuecomment-1063159219$）
⇒
かつ［ 当の~spanning要素と`複柱~容器$の合間に`固定d位置決め包含塊$を確立するもの ］は無い
◎ Added the text "and there is nothing between the spanning element and multicol container that establishes a containing block for fixed position descendants." Resolved 9 Mar 2022 - `2021年 2月 12日 作業草案＠~TR/2021/WD-css-multicol-1-20210212/$ からの変更点 ◎ Changes from the Working Draft (WD) of 12 February 2021
-
次の~textを追加した
（`2021年 5 月 12日に解決した＠~CSSissue/6279#issuecomment-839912199$）
⇒
`複柱~容器$の子孫のうち`~flow外$にあるものは、［ 柱の平準化／複柱~容器の`塊~size$ ］には影響しない。
◎ Added the text "Out-of-flow descendants of a multi-column container do affect column balancing, and the block-size of the multi-column container." Resolved 12 May 2021 -
次の~textを追加した
（ `2021年 5 月 12日に解決した＠~CSSissue/6265#issuecomment-839909999$）
⇒
`絶対的に位置され$た~itemのみで分離された 2 本の`~spanner$の~marginどうしも，相殺されることになる — 絶対的に位置された~itemは、 `柱~box$を作成しないので。
◎ Added the text, "The margins of two spanners separated only by an absolutely positioned item will collapse with each other, as absolutely positioned items do not create column boxes." Resolved 12 May 2021 - `§ ~accessibilityの考慮点＠#a11y$ を追加した。 （ `~APAからの考査-後の要請＠~CSSissue/6283$ ） 【~APAは、おそらく W3C `Accessible Platform Architecture^en の略語。】 ◎ Adds an accessibility considerations section. Request from APA after review.
- 縦組みにおいて柱が~lay-outされる方式を明瞭に示すための注記と例を追加した。 （`国際-化~WGによる考査-後の要請＠~CSSissue/6301$） ◎ Adds a note and example to make clear the manner in which columns are laid out in vertical writing modes. Request from i18n WG after review.
- `2019年 10 月 15日 作業草案＠~TR/2019/WD-css-multicol-1-20191015/$ からの変更点 ◎ Changes from the Working Draft (WD) of 15 October 2019
-
次の~textを追加した
⇒
`~spanner$は、 その内側に`絶対的に位置され$る~box用の`包含塊$になる — `~spanning要素$がそれを確立する。 それ以外は、 `包含塊~連鎖$は`複柱~容器$へ行く。
（ `2020年 10 月 23日に解決した＠~CSSissue/5612#issuecomment-715369246$ ） ◎ Added the text "The spanner becomes the containing block for absolutely positioned boxes inside the spanner where the spanning element establishes a containing block, otherwise the containing block chain goes to the multicol container.". Resolved 23 Oct 2020 -
次の~textを追加した
⇒
この~propは、 直後に`~spanner$が無い`複柱~行l$に対し，その内容が各~柱~間で平準化されるかどうかを指定する。
（ `2020年 4 月 29日に解決した＠~CSSissue/4689#issuecomment-621281467$ ） ◎ Adding the text "This property specifies whether content in a multi-column line that does not immediately precede a spanner is balanced across columns or not." Resolved 29 April 2020 - `2018年 5月 28日 作業草案＠~TR/2018/WD-css-multicol-1-20180528/$ からの変更点 ◎ Changes from the Working Draft (WD) of 28 May 2018
-
規範的でない次の~textを除去した
⇒
しかしながら、 下に述べるように，`柱~幅$と柱~数の両者とも設定することがイミを成すのは稀である。
（`編集上のもの： 2019年 9月 16日, 課題 #4291＠~CSSissue/4291$） ◎ Removed the non-normative text "However, as described below, setting both the width and number of columns rarely makes sense." Editorial 16 Sep 2019, issue 4291. -
次の段落を追加した
⇒
`~spanner$は，`塊~levelの~box$なので、 隣接な 2 本の`~spanner$の~marginどうしは，相殺されることになる。 `柱~box$は，新たな`塊~整形~文脈$を確立するので、 柱~boxの内側にある要素の~marginと~spannerの~marginとは相殺されない。
（`2018 年 10月 22日に解決した＠~CSSissue/2203#issuecomment-431783027$／ `課題 #2582＠~CSSissue/2582$ の解決も見よ） ◎ Added the paragraph, "Spanners are block-level boxes therefore the margins of two adjacent spanners will collapse with each other. As column boxes establish a new block formatting context, margins on elements inside a column box will not collapse with the margin of a spanner." Resolved 22 Oct 2018, see also the resolution for issue 2582. -
次の段落を追加して仕様を明確化した
⇒
~spanning要素は、 強制d分断は残したまま，`~flow外$にされる。 これは、 ~spanning要素の塗ng順序には影響しない。
（`2019 年 2月 28日 に解決した＠~CSSissue/1072#issuecomment-468087733$） ◎ Clarified the spec to explain that a spanning element is taken out-of-flow, leaving a forced break. Added the paragraph, "A spanning element is taken out-of-flow, leaving a forced break. This does not affect the painting order of the spanning element." Resolved 28 Feb 2019. - `column-gap$p ~propの定義を `CSS3-ALIGN$r へ移動し、 複柱に特有な `column-gap^p の詳細を与える段落を追加した（`§ 柱~間の側溝＠#cg$）。 （`2019 年 6 月 4日＠~CSSissue/3641$ に解決した） ◎ Moved the definition of the column-gap property to [CSS3-ALIGN] and added a paragraph detailing the specifics of column-gap in multicol: "In a multi-column formatting context the used value of normal for the column-gap property is 1em. This ensures columns are readable when the initial values are used. If there is a column rule between columns, it will appear in the middle of the gap." Resolved 4 June 2019.
- `Morten Stenshorne^en 氏からの `入力＠~CSSissue/2203$ に基づいて `§ 複柱の~model＠#the-multi-column-model$ を書き直した。 ◎ Reworded the section The multi-column model, based on input from Morten Stenshorne in issue 2203.
- `column-gap$p 用の `length-percentage$t 値を、 ~risk下から外した。 （`2019 年 6 月 4日＠~CSSissue/3988$に解決した） ◎ Removed the at-risk marker from the length-percentage value for column-gap. Resolved 4 June 2019.
- § 序論を更新した。 ~table~layoutより`複柱~layout$を利用する便益についての言及は除去し、 代わりに複柱に~~固有な特性を挙げるようにした。 （`編集上の変更＠~CSSissue/3654$） ◎ Updated the introduction to remove mention of the benefits of multicol over using tables for layout and instead refer to the unique characteristics of multicol. Editorial change referenced in issue 3654.
- 2016年 1月 7日 解決の後に `§ 使用~値の計算法＠#pseudo-algorithm$ に追加された~~文を， `筋^em（ `track^en ）ではなく`柱^emを~~参照するように変更した — `筋$は、 この仕様には定義されていないので。 （`2019年 3月 13日に解決した＠~CSSissue/3649#issuecomment-472505520$） ◎ Changed the sentence added in the pseudo-algorithm section after the 7 Jan 2016 resolution, to refer to columns and not tracks as tracks are not defined in this specification. Resolved 13 March 2019.
- 仕様に利用される各~画像を~SVGに変更して明確化した。 【この訳では、依然として ~HTML + ~CSS。】 ◎ Changes and clarifications to the SVG images used in the specification.
- 注釈文による［ 負な値／ 1 未満の値 ］に対する制約を反映するよう，構文を`角括弧付き範囲~記法$を利用するよう変更した。 ◎ Changed syntax to use bracketed range notation to reflect the prose restrictions on negative/non-zero values.
- `2017年 10月 5日 作業草案＠~TR/2017/WD-css-multicol-1-20171005/$ からの変更点 ◎ Changes from the Working Draft (WD) of 5 October 2017
- ~paged媒体への参照を`断片~化~文脈$を指すように変更した。 （`2018年 4月 12日に解決した＠~CSSissue/2549$） ◎ Changed references to paged media to refer to fragmented contexts. Resolved 12 Apr 2018.
-
`column-fill$p ~propに関する一文を次のように変更した
（`2018年 4月 12日に解決した＠~CSSissue/2549$）
⇒＃
連続的~媒体においては、この~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柱$は`複柱~容器$の高さに影響し得ることを示すため、 例を追加した。 （`2018年 4月 12日に解決した＠~CSSissue/1745$） ◎ Add a line of text plus an example to show that overflow columns can affect the multicol container height. Resolved: 12 Apr 2018
- ~HTMLによるモックアップで与えていた例は、 【~source~textの順序が】明瞭でなかったので，~SVG版に置換した。 （`Issue 1087＠~CSSissue/1087$） 【この訳では、依然として~HTML + ~CSS（ ~source~textを “いろは歌” に置換して順序を明瞭にしたので）。】 ◎ Replaced the HTML mock-up examples with SVG versions, as the examples were unclear. Issue 1087.
- `column-gap$p 用の `normal^v 値の使用~長さは、 ~UAが指定するものとされていたが，それに示唆されていた `1em^v になるものとするよう変更した。 （`2018年 4月 4日に解決した＠~CSSissue/2145#issuecomment-378781507$） ◎ 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 以上に切り上げられることを明確化した。 （`2018年 3月 14日に解決した＠~CSSissue/1741#issuecomment-373091628$） ◎ 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要素があるときには、 内容は要素が現れる直前の`複柱~行l$に属する全~柱に，自動的に平準化されることを明確化した。 （`2017年 11月 9日に解決した＠~CSSissue/1739#issuecomment-342659978$） ◎ 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より上に描かれることについて明確化するとともに例も追加した。 （`2017年 11月 8日に解決した＠~CSSissue/1072#issuecomment-342668025$） ◎ Added clarification plus an additional example that spanning elements may be lower the first level of descendants, 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
-
次の~~文は、
`参照先の記述＠#_changes-1739$に変更した
（`2017年 11月 7日に解決した＠~CSSissue/1739#issuecomment-342659978$）
⇒
`柱~罫線$は、 行内~内容の層~内に, かつ 複柱の内側にあるどの行内~内容よりも下に塗られる
◎ 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 -
次の~~文は、
明確化するため［
`参照先＠#_changes-1738$とそれに伴う新たな例
］に置換された
（`2017年 11月 7日に解決した＠~CSSissue/1738#issuecomment-342661881$）
⇒
柱~boxは，塊~容器~boxである。 すなわち、 柱~boxは， `CSS 2.1, § 10.1＠~CSS2J#containing-block-details$ の第 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 -
次の~~文（および後続する例）を除去した （`編集上の＠~CSSissue/1966$） ⇒
柱が分断されるべき（または べきでない）所を指示するため、 新たな~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 - 複柱の適用-対象を指す語を， “複柱~要素” から “複柱~容器” に変更した。 （`2017年 11月 22日に解決した＠~CSSissue/1965$） ◎ 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
-
次のように記した例を除去した
（`2017年 9月 7日に解決した＠~CSSissue/1740$）
⇒
背の高い画像が，それ用の部屋を見出すために次の~page上の柱へ移動された場合、 ~~元の所の柱は空なままにもなり得る — その場合でも、 `柱~罫線$の有無を裁定する目的においては，~~元の所の柱は内容を持つものと見なされる。
◎ 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日 勧告候補＠~TR/2011/CR-css3-multicol-20110412/$ からの変更点 ◎ Changes from the Candidate Recommendation (CR) of 12 April 2011.
- CSS Grid 仕様と整合させるため，［ ~UAは、 `筋$~sizeを，自身が指定する値を下限にするよう変更する ］ことが要求されるものとした。 （`2016年 1月 7日に解決した＠~www-style/2016Jan/0031.html$） ◎ Added July 2016 resolution to change 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する柱は，連続的~媒体に限られる ］とする制約を除去した。 （`2013年 9月に解決した＠~www-style/2013Sep/0471.html$） ◎ 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, および これがどう働くべきかをデモる例を追加した。 （`2013年 9月に解決した＠~www-style/2013Sep/0471.html$） ◎ Added keyword balance-all and examples to demonstrate how this should work. Resolved: September 2013.
- `§ 使用~値の計算法＠#pseudo-algorithm$ のいくつかの箇所は、 改訂された。 （`Latest change 2013年 2月＠~www-style/2013Feb/0471.html$） ◎ 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: 2013年 2月＠~www-style/2013Feb/0536.html$） ◎ Clarified that properties columns, column-width, column-count "apply to block containers". Ref: Feb 2013.
- 各種 分断ng~propは、 この仕様から `CSS Fragmentation Module＠~CSSBREAK$ へ移動された。 ◎ Breaking properties have been moved from this specification to the CSS Fragmentation Module.
- `column-fill$p は，~page分断の前に尊守されることが明確化されるよう、 `column-fill$p の言い回しを変更した。 （`Ref: 2012年 1月＠~www-style/2012Jan/0393.html$） ◎ Change to column-fill wording to clarify that column-fill is honored before page breaks. Ref: Jan 2012.
- ~margin相殺を伴う~spanning要素に何が起こるか明確化するため、 例と~textを改正した。 （`Ref: 2013年 10月＠~www-style/2013Oct/0247.html$） ◎ Amended example and text to clarify what happens with margin collapsing and spanning elements. Ref: Oct 2013.
- `column-rule-width$p は、 柱の~sizeや配置を改めないことを明確化した。 （`Ref: 2013年 9月＠~www-style/2013Sep/0550.html$） ◎ Clarification that column-rule-width does not alter the size or placement of columns. Ref: Sep 2013.
- 各~柱~spanning要素は、［ それらの合間を相殺する，別々な`~BFC$~margin ］を確立するものとした。 （`Ref: 2011年 12月＠~www-style/2011Dec/0262.html$） ◎ Added that each column spanning element establishes a separate BFC margins between them collapse. Ref: Dec 2011.
- `柱~罫線$は、 行内~内容の層~内に, かつ 複柱の内側にあるどの行内~内容よりも下に塗られるとした。 （`Ref: 2013年 2月＠~www-style/2013Feb/0363.html$） ◎ 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$は、 常に`塊^em整形~文脈を確立するとは限らないようにした。 ◎ 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.
~privacyの考慮点
この仕様が導入する新たな~privacy漏洩は、 無い。 ◎ Multicol introduces no new privacy leaks.
~securityの考慮点
この仕様が導入する新たな~securityの考慮点は、 無い。 ◎ Multicol introduces no new security considerations.
~accessibilityの考慮点
容器の高さや行lの長さを設定することは、［ 視覚的／認知的 ］障害を伴う人々に難題を突きつけ得る。 ~WCAGによる次を見て，利用者の必要性を理解すること ⇒＃ `§ ~reflowを理解する＠https://www.w3.org/WAI/WCAG21/Understanding/reflow.html$ 【`日本語訳＠~WCAG21J/Understanding/reflow.html$】, `§ 達成基準 — 視覚的な呈示＠https://www.w3.org/WAI/WCAG21/quickref/#visual-presentation$ 【`日本語訳＠~WCAG21J/#visual-presentation$】 ◎ Setting container height and line length can pose challenges for people with visual or cognitive disabilities. See WCAG Success Criterion 1.4.10 Reflow and WCAG 1.4.8 Visual Presentation to understand user needs.
謝辞
この文書は、 次に挙げる貢献者による， いくつかの旧-提案, それらに寄せられた~commentに基づいている： ◎ This document is based on several older proposals and comments on older proposals. Contributors include:
Alex Mogilevsky, Andy Clarke, Anton Prowse, Bert Bos, Björn Höhrmann, Cédric Savarese, Chris Lilley, Chris Wilson, Daniel Glazman and Dave Raggett, David Hyatt, David Singer, David Woolley, Elika Etemad, Giovanni Campagna, Ian Hickson. Joost de Valk, Kevin Lawver, L. David Baron, Markus Mielke, Melinda Grant, Michael Day, Morten Stenshorne, Øyvind Stenhaug, Peter Linss, Peter-Paul Koch, Robert O’Callahan, Robert Stevahn, Sergey Genkin, Shelby Moore, Steve Zilles, Sylvain Galineau, Tantek Çelik, Till Halbach