Re: [css-text-4] text-wrap:balance

> On 20 Jan 2015, at 18:51, Alan Stearns <stearns@adobe.com> wrote:
> 
> Elika and I worked on text level 4 a bit ago, changing it into a diff spec 
> (it only contains new things for now) and adding a ‘balance’ value to the 
> text-wrap property [1]. This value is meant for smaller bits of text - 
> headlines and captions, mainly - that would look better with less line 
> length variation.
> 
> A Headline That Looked Like
> This
> 
> Would change to:
> 
> A Headline That
> Looked Like This

Sounds nice, I'd use that.

> The initial definition reads:
> 
> -----
> balance
>    Same as normal for inline-level elements. 
>    For block-level elements line breaks are chosen 
>    to minimize the deviation from the average line length 
>    over the entire element 
>    (including lines that end in a forced break). 
>    The exact algorithm is UA-defined.
> 
>    UAs may treat this value as normal 
>    if there are more than ten lines to balance.
> -----
> 
> 
> Comments welcome.

If you have a float:left (float:right in rtl text) or an initial-letter making some but not all of the line boxes shorter, it seems to me that the line length isn't what you'd want to equalize, but rather then position of the right (left in rtl) end of the line.

>    (including lines that end in a forced break). 

Maybe, but let's look into this a bit more.

Could we apply this only wrapping is actually occurring at all?

Consider this:
div {text-wrap: balance;}
<div>
  <h1>A fairly short line</h1>
  <h1>A line just a bit longer</h1>
</div>

With the spec as it is, you'd probably get
A fairly
short line
A line just
a bit longer


I'm interested in the following behavior:

* If the div's width is large enough to keep both lines intact, without wrapping.

A fairly short line
A line just a bit longer

* If the div's width forces only the longer line to wrap, do this:

A fairly short line
A line just
a bit longer

* If the div's width forces both lines to wrap, do this:

A fairly
short line
A line just
a bit longer

If you want this behavior on this markup, you can get it with the spec as it is by using "h1 {text-wrap: balance;}" instead of "div {text-wrap: balance;}"

However, if the markup had been:
<div>
  A fairly short line<br>
  A line just a bit longer
</div>

Then we can no longer switch between behaviors by selecting differently. And for such markup, I don't actually know what's better.

All in all, the spec is probably good as it is, as it gives the choice when there's enough markup. But I though it might be worth discussing this case explicitly.

 - Florian

Received on Tuesday, 20 January 2015 20:15:17 UTC