Re: [css4-text] A non-inherited property to control behavior of whitespace-only child boxes

If I understand this correctly, it would be nice to control whether whitespace child text-nodes should be taken into account.

Currently, it's somewhat tricky to use `display: inline-block` to create gapless layout of sibling elements since whitespace text-nodes between inline-block elements create gaps proportional to font size (equal to width of space character).

For example, this will not work:

    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>

    UL {list-style: none; margin: 0; width: 200px; }
    UL > LI {display: inline-block; width: 100px; }

so we are forced to use a workaround like zeroing font-size for parent element and restoring it for inline-block children:

    UL {font-size: 0; }
    UL > LI {font-size: 13px; }

This creates unneeded and harmful complexity, as well as duplication of font-size values instead of just inheriting them.

So if we could have a property to control exact whitespace treatment, it would be nice:

    UL {whitespace-collapse: collapse; }

Here `whitespace-collapse: collapse` means that child text-nodes of UL-list that contains just whitespace are collapsed (as if there were no whitespace text nodes between LI elements at all) so that they are not causing undesired gaps between child elements of UL anymore.

I'm not sure that this should be non-inherited since we could just override it for children of children when needed. Having such ability is better than not having it. There is no obvious reasons to not have such flexibility.

For example, for children of LI element, we could override the property value to make whitespace _inside_ LI relevant again:

    UL > LI {whitespace-collapse: none; }

So if we have:

    <li><span>32</span> <span>inches</span></li>

whitespace between SPAN elements are not collapsed (while whitespace between LI elements themselves do -- according to UL's `whitespace-collapse: collapse`).

Thanks.


29.03.2012, 01:34, "Boris Zbarsky" <bzbarsky@MIT.EDU>:
> We keep running into situations where markup contains "non-semantic"
> whitespace. šThis includes whitespace between flex item, whitespace
> between internal table parts, in some cases whitespace between
> inline-block kids of a block. šI expect the list to grow.
>
> Would it make sense to have a property (non-inherited) to allow
> suppressing such whitespace-only child boxes when the author wants them
> suppressed?
>
> -Boris

Received on Thursday, 29 March 2012 00:24:22 UTC