[css-break] extending 'break-before'

Right now, 'break-before' and 'break-after' can avoid or force a column break, region break, or page break. I would like something before that to influence line breaking due to auto wrapping. So for instance, the actual use case where this came up for me:

<p><input type=radio value=yes /> <label>Yep</label> <input type=radio value=no /> <label>Nope</label></p>

The html doesn't have spans around each input/label group, otherwise I would set each group to be 'white-space:nowrap', so that the label always stays on the same line as its associated input. So instead, I'd like to do this:

input[type=radio] + label {
    break-before: avoid-line;
}

So that when a label follows a radio button, it will not wrap the line in a way that breaks between them, unless it absolutely has to in order to make things fit. That would actually be better than the white-space version, because it would still allow breaking between if the paragraph was narrower than the input/label combination. 

A side effect would be that 'avoid-line' would also keep it from breaking for columns, regions, and pages too, since those breaks also break lines. So we wouldn't necessarily need to retrofit the 'avoid' keyword (as in, avoid breaking for columns, regions, and pages) to also avoid line breaks.  

Has this been considered before? I saw the note that line-breaks are not covered by this spec, but I would like to be able to use those same 'break-*' properties. 

I don't think we would need a corresponding 'break-inside' value, since 'white-space:nowrap' would be close enough. 



Brad Kemper

Received on Wednesday, 11 March 2015 17:44:07 UTC