box model comments

I hope this isn't too late to comment for CSS3... (& I did search this
mailing list a little to see if these things have been discussed but am not
quite sure what search terms to use)

has any thought been given to allow specifying dimensions a la TeX's elastic
spacing (aka "glue")?

for example: "width: 50% plus 20px minus 10px;" would mean ideally 50% of
screen width, but if that's not possible then up to 20 pixels more or 10
pixels less.

TeX also has "fil" and "fill" (and "filll"?) to denote infinitely
stretchable glue that divides space proportionally. Suppose you had a table
with a width of 300 pixels. You could define the width of column 1 to be
30px plus 10px, column 2 to be 40px plus 4fil, and column 3 to be 50 px plus
5fil. The specified widths total 120px; this leaves 180px remaining, which
is divided up between the "plus" amounts. The fixed amount (30px) of column
1 loses its share to the other two columns which have "infinite" amounts
("fil"); column 2 gets a weighted share of 4 and column 3 gets a weighted
share of 5. So column 1 has a width of 30px, column 2 has a width of 40px +
4/9 * 180px = 120px, and column 3 has a width of 50px + 5/9*180px = 150px.

Maybe the syntax/semantics of TeX is kind of arcane (not that CSS isn't
either), but it's very good for specifying typesetting technical documents.

I have found it very frustrating in CSS2 to specify sizes & positions of
divs and spans where the size/position is indirectly dependent on something,
e.g. I'd like a div element to be at least as wide as the text it contains,
up to a maximum of 100px (after which the text column will wrap). I forget
whether this example is easy to do in CSS or not, or which kinds of designs
I've done that were fiendishly difficult, but I know I have almost torn my
hair out messing with position:absolute divs inside position:relative divs
or vice versa, and it nearly drives me insane. There ought to be an easier
way to specify this stuff.

===

The other major thing that comes to mind is for fluid layouts using
"float:left" and its "greediness"/"conservativeness". Let's say I have 10
images, #1-#10, placed horizontally inside a <div> where the images all have
"float:left" in their styles. All of them are 120px by 80px (landscape),
except for image #3 which is 80px by 120px (portrait). Images #1-#6 will fit
inside the <div> but it's too narrow to fit image #7, so the float:
algorithm wraps at that point. If I understand correctly, it will move image
#7 downward as little as possible until it will fit; what will happen is
that it will bump up against image #3 which sticks down to block it from
starting all the way on the left side of the <div>. 

Often what I would like to happen instead (with image galleries that have
captions on each image, for instance) is for the first wrapped element to
move down as much as it has to, in order to show up all the way on the left
side of its parent element. If the parent element is a fixed size, I can do
this manually by adding a "clear:left" at the proper place. But for fluid
layouts where the window can resize & cause widths to change, it's not
possible to stick a "clear:left" in the right place. I would like the option
of specifying that something like an empty "clear:left" element will
automatically be applied immediately after the last element that can fit in
a horizontal row. (or equivalently, that the first wrapped element will move
down as much as it has to in order to be at the left side of its parent
element.)

-- 
View this message in context: http://www.nabble.com/box-model-comments-tp16520772p16520772.html
Sent from the w3.org - www-style mailing list archive at Nabble.com.

Received on Sunday, 6 April 2008 17:49:34 UTC