Re: [css3-multicol] page-break-inside and columns

On Tue, Apr 7, 2009 at 1:30 PM, Philip TAYLOR (Ret'd)
<P.Taylor@rhul.ac.uk> wrote:
> Tab Atkins Jr. wrote:
>> Luckily you can semantically pack these
>> into a <figure> element, at which point you'd like to say that you
>> want to avoid breaks inside of any and all <figure>s.  This addresses
>> the issue with little to no chance of errors, no matter what markup
>> you've chosen to associate with an image.
>
> Well, no, I wouldn't want to inhibit breaks within a <figure>,
> for the reasons outlined above.

Yeah, but... you'd *want* an image's header to be at the bottom of a
column, with the image at the top of the next, or the image at the
bottom of a column, with the explanatory caption at the top of the
next?  Both of those seem ridiculously bad to me.

I wouldn't want to put in blanket rules like "h1+img { break-before:
avoid-column }" or "img + p { break-after: avoid-column; }" because,
first, they may very well not hit what I want in such simple terms, so
I'd have to broaden them, and second, they can very easily target
places where the placement of an image with a header or a paragraph or
whatever is incidental (and this gets more likely if I broaden the
scope of the rule, which the first point leads me to do).  Sometimes
an image might be associated with the *previous* paragraph, for
instance, and it's perfectly fine for it to sit at the bottom of one
column while the next paragraph goes to the top of the next column.

Another example where I'd certainly want to avoid breaks within an
element is the <header> element.  To paraphrase an example I saw
today, given the following markup:

<div .column>
  ...
  <header>
    <h1>Romeo and Juliet</h1>
    <h2>A Tale of Two Teenagers</h2>
    <p>A play by William Shakespeare</p>
  </header>
  ...
</div>

Breaking at any point within the <header> would be bad.  The whole
thing should be presented as a block.

I do agree that the more an author asserts control over breaking
opportunities, the less likely it is that the UA will be able to
render an attractive result, but you really do need this sort of
control in many circumstances.  Further, Andrew's nice idea about
tying breaking to the percentage of the column the element takes up
would do wonders to prevent accidentally horrible rendering (like a
very tall no-break element that appears *just* at the point where it
doesn't fit in the current column, leaving a horrible mostly-empty
column behind).


@Sylvain:

The <figure> element in HTML5 is precisely the element you're talking
about - it's a container element for associating markup with an image
(or anything else, really) in an unambiguous manner.  That's why I
used it in my example.  ^_^

~TJ

Received on Tuesday, 7 April 2009 18:44:55 UTC