[css3-multicol] Clarification on column-fill

I'm looking for some clarification on the column-fill property, as 
specified here:

http://dev.w3.org/csswg/css3-multicol/#cf

As I understand it, if we have a multi-column element with max height 
restricted to ~7em (i.e. it can fit up to 7 lines of text, plus 
margins/padding), with an inner block element, similar to the following:

<div class="col">
    ... text content ...
</div>

with the following style:

..col {
   column-count: 2;
   max-height: 7em;
   column-fill: auto;
}

We would have something like the following as a result:

   ____________________   ____________________   ---
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | ~6em
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ |                      |  |
   --------------------   ---------------------  ---



But, if we have:

..col {
   column -count: 2;
   max-height: 7em;
   column-fill: balance;
}

Then, we'll end up with something more along the lines of this:

   ____________________   ____________________   ---
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ |  |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | ~7em
| ~~~~~~~~~~~~~~~~~~~~ |                      |  |
| ~~~~~~~~~~~~~~~~~~~~ |                      |  |
| ~~~~~~~~~~~~~~~~~~~~ |                      |  |
   --------------------   ---------------------  ---



In the former example, the first column is filled completely to its 
max-height, which happens to be ~7em. (I assumed that 7 lines of text 
would be able to fit, but this will vary depending on how the width is 
calculated.)

In the latter example, the height of the entire column set is actually 
less than 7 lines, in order to better balance the columns, so the full 
allowable height of 7em isn't actually used.

Does this seem correct? The spec seems a bit vague in this regard, and, 
in my opinion, it would be useful to clarify this with an example of 
some kind.

-- 
~Scott

Received on Friday, 28 October 2011 12:03:36 UTC