From aa4138974baedaa9ae662a056f40f0054eb5d373 Mon Sep 17 00:00:00 2001 From: howcome Date: Sat, 21 Sep 2013 01:32:25 +0200 Subject: [PATCH] adding column-fill examples, revising text on clipping --- css-multicol/Overview.src.html | 220 ++++++++++++++++++++++++++++++--- 1 file changed, 204 insertions(+), 16 deletions(-) diff --git a/css-multicol/Overview.src.html b/css-multicol/Overview.src.html index f0914ec61a9..1bedec38545 100644 --- a/css-multicol/Overview.src.html +++ b/css-multicol/Overview.src.html @@ -372,6 +372,7 @@

The multi-column model

+ + @@ -846,7 +849,7 @@

Pseudo-algorithm

per-page basis.

The used value for 'column-count' is calculated without -regard for explicit column breaks or constrained column lengths, +regard for explicit column breaks or constrained column heights, while the actual value takes these into consideration.

@@ -901,7 +904,7 @@

Column gaps and rules

Column gaps and rules are placed between columns in the same multicol element. The length of the column gaps and column rules -is equal to the length of the columns. Column gaps take up space. That +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 element). @@ -1699,12 +1702,11 @@

Filling columns

There are two strategies for filling columns: columns can either be balanced, or not. If columns are balanced, user agents should try to -minimize the variation in content between columns, while also trying to -minimize the overflow content. If columns are not balanced, they are -filled sequentially; some columns may end up partially filled, or with -no content at all. In any case, user agents must honor forced page -breaks and should try to honor 'widows', 'orphans' and other -properties that may affect column lengths. +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. +

'column-fill'

@@ -1742,9 +1744,11 @@

'column-fill'

balance -
Balance content equally between columns, if possible. +
Balance content equally between columns, as far as possible. In paged media, only the last page is balanced. +
balance-all +
Balance content equally between columns, as far as possible. In paged media, all pages are balanced.
auto -
Fills columns sequentially. +
fill columns sequentially

In continuous media, this property does not have any effect in -overflow columns (see below). +overflow columns. + +

+ +

In this example, an article only has one short paragraph which fits +on three lines. The three lines are displayed in three different +columns due to column balancing. + +

+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+
+ +
+ +
+ +

+Ab cde fgh i jkl. Mno
+

+ +
+

pqr stu vw xyz. A bc +

+ +
+

def g hij klm. +

+ +
+
+ +
+
+
+
+ +
+ +
+ +

In this example, column balancing is turned off: + +

+article { width: 60em; height: auto; columns: 4; column-fill: auto }
+
+ +

As a result, the first column is filled with all content: + +

+ +
+ +

+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm. +

+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ + + + + + +
+ +

In this example, an article has two paragraphs: first a long one, then a shorter one. This code is applied: + +

+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+p { break-after: column }
+
+ +

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

+ +
+ +

+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+

+ +
+

+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz.
+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm. +

+ +
+

+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+

+ +
+

+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz. +

+ +
+
+
+
+ +
+ + +
+ +
+article { width: 60em; height: auto; columns: 4; column-fill: balance }
+
+ +

In this example, an article starts with an unbreakable figure which sets the column height. Subsequent content is filled sequentially into the remaining columns: + + +

+ +
+ +

+

+ +
+

+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. Pqrstu vw
+x yz. Abc def ghi jkl.
+M nop qrst uv wx yz.
+

+ +
+

+Ab cde fgh i jkl. Mno
+pqr stu vw xyz. A bc
+def g hij klm nopqrs
+tuv wxy z. Abc de fg
+hi jklmno. +

+ +
+
+
+
+
+
+
+ +
+ + +

Overflow

Overflow inside multicol elements

-

Floated or in-flow content that extends into column gaps (e.g., -long words or images) is clipped in the middle of the column gap. + + +

Floated or in-flow content that extends into column gaps or neighboring columns — e.g., +long words or images — is not clipped and may therefore cause overflow. +

-

In this example, the black image is wider than the column, and is -therefore clipped. +

In this example, the black image is wider than the column:

Lorem ipsum dolor
sit amet. Nam at jus. @@ -1792,7 +1980,7 @@

Overflow inside multicol elements

luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
-
+