Adaptive size determination

I don't know whether Nick Shanks ever posted this on my behalf, but if not, I 
will mention it again because I feel that it will prove invaluable.

My basic concept is a way to arrange for every item of a given selector to be 
set to the same size (width, height or both). This allows for beautiful fluid 
grids that adapt to user preferences as well as a variety of other nice tricks.

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.

If the <li>s have a width fixed to the image width, the captions will wrap and 
every <li> on every line will become taller to match. Unlike a table, this 
affects every row. Right now, you could (I think!) achieve the same layout as a 
table -- height is matched across one row only, with:

  .thumbs li {
   vertical-align: top
  }

but even if you did, you couldn't have a border around each <li> or a background 
colour, since the heights would not match: they'd only align neatly.

Assuming you wanted the <li>s to widen to fit the caption, they'd all increase 
to the same width automatically.

Adapt-size takes 'height', 'width' or 'both' as arguments.


Using adapt-size would allow your grid (of links, thumbnails, etc) to be fluid 
(no defined column count), perfectly formed (all cells of equal size), yet would 
adapt to any decision on the part of the user or user-agent as to how large the 
text should be.

Received on Friday, 23 February 2007 15:50:27 UTC