Proposal: content-vertical-alignment

Starting note: Please take your time to read before dismissing.

Proposal: A new property that will allow any content in a given element to
be centered vertically:
content-vertical-align

Details:
content-vertical-align: (top | middle | bottom) [default: top]
Where "top" is the default and all contents are padded after padding-top.
Where "bottom" will make all contents touch the padding-bottom.
Where "middle" will make all contents are centered vertically between
padding-top and padding-bottom.
Where the content height to be centered will be calculated the same way as
the current layout module (floating elements will not directly contribute
to the content height that enlarges the containing element)

----------
Please for those who believe this can be done, and it *can*, please take
your time to patch missing parts or even make this a fully fledged
proposal, if you think this as it is is not enough.
----------

Explanation for those who think vertical centering should not be
implemented because it is 'impossible'; keep in mind:
1-) What the browser will do to achieve the 'impossible':
First of all, browsers will be free to whatever method they employ to
center the contents vertically. There will be 3 suggestions from me:
     a) Contents are laid out dynamically as they come.
           Pros: None
           Cons: Will create constant motion until the element closing tag
is reached. Should not be a problem for short content, but this I do not
advise.
     b) Contents are not laid out until the element closing tag is reached.
           Pros: No content would be moving
           Cons: For long content, the user will have to wait. Not
recommended.
     c) Contents are laid out normally after padding-top, and readjusted
once the element is closed
           Pros: Users don't have to wait to see content
           Cons: There is a single centering pop when closing tag is
reached. Which is no more of a pop when an image whose dimesions are not
given is loaded and the layout changes vastly, and much more violently
then the centering pop, as contents move in all directions.

2-) The best method is c, I guess. But any could do. Remember, for short
content, none of the problems mentioned will be a problem. But method c
gracefully handles even if this is used for really long content.

3-) There are so many situations where the layout 'moves' like the loading
of images with unknown dimensions is one prominent example, last time I
checked, declaring the image size was not required. The last centering
motion in method C is much easier on the eye, as the contents move only
vertically, where as the image size push the text around in all directions.

4-) Browsers constantly calculate the content height as they receive data
anyway, to properly cover them with borders and layout the rest.

5-) For browsers that wouldn't support it because what I just point out is
'impossible', it is not a problem as "CSS is not and won't be pixel
perfect". I never knew this notion could be so useful. We shouldn't expect
to get same results for our CSS for all and design with that in mind
anyway, isn't this what everybody says? After all, this is 'impossible',
so we can't blame them if they can't do it, can we? Also, there are many
unsupported CSS rules and will *always* be, let this be one of them, but
have it in the specs, who knows, some browsers may choose to take on this
'monstrous' task of having to calculate the content length after the
element is closed.


Final Words:
Even tho there is a common belief on the list that I fail to understand
that it is not possible to have vertical alignment in css, I believe it to
be plain disgrace to CSS forcing webmasters to use tables instead for the
job, or going thru hoops and doing several box in box tricks using
line-height hacks that doesn't work for multiple lines etc. Vertical
aligning to center is a nice design element tho some may reject, and a
much needed one. In an ideal world, I know, all pages should look dull(!)
but there are really nice designs CSS make possible even if we hate to
admit, let's enhance the CSS's power a little more, so people should find
little reason to use tables for their layouts instead of CSS.



-- 
Emrah BASKAYA
www.hesido.com

Received on Thursday, 9 June 2005 14:33:28 UTC