Re: Adaptive size determination

Daniel Beardsmore wrote:
> Let me take you through a common example: a set of thumbnails.
> 
> How would we normally do this? A table. Not sensible. Tables demand that a 
> particular number of columns will fit onto the screen, and cannot take advantage 
> of wider monitors. They imply a relationship between the data that does not 
> exist: the colums and rows have no significance.
> 
> How should we do this? I would say, a list.
> 
> Formatting? Inline block. e.g.
> 
>   <ul class="thumbs">
>   <li>
>    <img src="...">
>    Caption
>   </li>
> 
>   .thumbs li {
>    display: inline-block;
>    margin: 0.2em; padding: 0.23em;
>    background-color: #009966;
>   }
> 
> The thumbnails can be any size up to the desired size (say, 200x200 pixels), so 
> my previous mail on pad-to would be used to space each one out to fill the 
> intended size. Otherwise, imagine a div around the image for that purpose set to 
> width and height of 200px.
> 
> Without captions this would work: they'd all be the same height and width. But 
> we want captions too. And the captions have no defined width, nor can it be 
> defined. The width is dependent on not just the length of the string, but on the 
> user's choice of font and font size. We are either going to fix the width of the 
>   <li> to the image width (in which case, the captions may wrap) or the <li> 
> will all grow to random sizes according to the caption.
> 
> What we need -- and so far, nothing has ever provided a way to deal with this 
> effectively -- is adaptive mutual sizing.
> 
> That is to say, specify a size for each li element, based adaptively on the 
> group as a whole.
> 
> For example:
> 
>   .thumbs li { adapt-size: both }
> 
> This will trigger a visual user agent to calculate the width and height needed 
> to show each <li>, and choose the largest size found.

As David Woolley already told you, this is not how the CSS works. Here's
how a CSS implementation could work (IMHO):

.thumbs li { height: auto; width: auto; sizing-group: "thumbnails"; }

That is, redefine "auto" for height or width to check if the element
belongs in an "sizing-group" and if it does, compute the height or width
to be the maximum of all elements in that group when contents of those
elements are shrink-wrapped (and define further what "shrink-wrapping"
means). If height or width is set to some other value but auto, then the
sizing-group magic wouldn't apply.

-- 
Mikko

Received on Monday, 26 February 2007 13:28:43 UTC