W3C home > Mailing lists > Public > www-style@w3.org > August 2007

Re: breaking between inline boxes

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 1 Aug 2007 15:12:52 -0700
Message-ID: <000b01c7d489$1acba430$f502000a@internal.toppro.net>
To: "James Justin Harrell" <herorev@yahoo.com>, <www-style@w3.org>


----- Original Message ----- 
From: "James Justin Harrell" <herorev@yahoo.com>
To: <www-style@w3.org>
Sent: Wednesday, August 01, 2007 12:18 PM
Subject: breaking between inline boxes


>
> The current specs are unclear about whether breaks can occur between 
> inline boxes and provide no
> way for developers to specify whether such breaks can occur. This often 
> isn't an issue because
> there's usually whitespace between or within inline elements, but this 
> means using whitespace for
> presentation.
>
> If breaks cannot occur between inline boxes, then when there's no 
> whitespace between inline
> elements and the inline elements cannot be broken (e.g. no whitespace, 
> replaced content,
> white-space:pre) the inline boxes will line up horizontally in a single 
> line.
>
> Example:
> <div><img/><img/><img/><img/>...<img/></div>
> Only the images that could fit in a single line box would be contained in 
> the div, and the rest
> would overflow.
>
> I encountered this when I displayed the items of a list inline (i.e. 
> li{display:inline}) and the
> list overflowed horizontally to the right since there wasn't any 
> whitespace between the li
> elements and the li elements couldn't break. (tested in Firefox 2.0 and 
> Konqueror 3.5.6) One
> solution is to add spaces between the li elements, but developers should 
> not be required to add
> non-semantic markup purely for presentation.
>
> If it's decided that breaks should not occur between inline boxes, then 
> I'd like to see something
> like "inline-wrap" for the display property where inline-wrap would be 
> identical to inline except
> that breaks could occur between inline boxes where necessary to prevent 
> overflow.
>

It is already there:

ul > li { display:inline-block; }

should do the magic in UAs that support display:inline-block (Opera, 
Safari).

Andrew Fedoniouk.
http://terrainformatica.com
Received on Wednesday, 1 August 2007 22:13:02 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:51 GMT