Re: [css-sizing][css-text][css-flexbox] True Shrinkwrapping

> On 11 Feb 2015, at 12:15, fantasai <fantasai.lists@inkedblade.net> wrote:
> 
> Ran into a couple cases where we have a problem.
> 
> <h1>Some Text Slightly Longer Than Containing Block</h1>
> 
> h1 {
>  text-wrap: balance;
>  max-width: <containing block width>;
>  float: left;
> }
> 
> Want this thing to wrap, then balance, then shrinkwrap and float.
> Currently not possible because shrinkwrap formula will set the
> width to the containing block size.
> 
> Similar issue with flexbox
> 
> container {
>  display: flex; flex-flow: wrap;
>  contents: <lots of identically-sized images>;
>  width: shrinkwrap;
>  margin: auto;
> }
> 
> Want this photo gallery to wrap all the images into multiple
> rows (last line left-aligned) then shrinkwrap around its
> contents and center itself. Not possible either.
> 
> I think these things should be possible. Thoughts?

Not a flexbox expert, so while it seems reasonable to me, I'm not going to speak too strongly about that case, but when it comes to text-wrap: balance, yes, this is definitely desirable.

Amongst other use cases, here is a (common in print) Japanese example, from JLREQ:
http://www.w3.org/TR/jlreq/#fig3_1_5-en

Both pieces of bold text are titles, which are probably styled with something like this:

h1 {
 text-wrap: balance;
 max-width: 5em;
 float: left;
 font-size: 1em;
 margin-bottom: 1em;
 /*...*/
}

As shown in the example, you don't want the float to be sized according to max-width, but to shrink-wrap down to the actual content.

The problem already exists even without involving text-wrap: balance, but how bad it is varies. In the Japanese case, and similar cases of short heading-like things, it the current behavior looks bad, and I support fixing it.

 - Florian

Received on Wednesday, 11 February 2015 03:50:19 UTC