Re: positioned elements: center

On Jan 8, 2008, at 8:44 AM, fantasai wrote:

> Brad Kemper wrote:
>> On Jan 7, 2008, at 3:01 PM, David Woolley wrote:
>>> My guess, in the case of vertical centering, the problem is the  
>>> problem is
>>> that it breaks incremental rendering. ...
>> We already have vertical centering in absolutely positioned  
>> elements. Of top or bottom edges, by setting them to 50%. The  
>> proposal would let you set the center of an element in exactly the  
>> same way as you currently center any of the edges. Or set it to  
>> any other value that you can set edges to, using the same units.  
>> So don't "guess" what the imaginary problems are that would allow  
>> you to argue against it, just because you are compelled to argue  
>> against everything, David. There is no problem with this proposal,  
>> and the implementors could implement it in their sleep, tonight,  
>> if they so chose.
>
> Actually, David Woolley's point is valid. Vertical centering "breaks"
> incremental rendering even in absolute positioning not because the
> containing block's height is unknown but because the height of the
> content is unknown.

Please explain to me why setting the center of an object to 50%  
position horizontally is so much worse than setting the right side of  
the same element to 50%. Either way you have to determine the width  
of the object and its positioned parent in order to know where to  
start drawing the left edge.

Or why setting the center of an object to 50% position vertically is  
so much worse than setting the bottom edge of the same element to  
50%. Either way you have to determine the height of the object and  
its positioned parent in order to know where to start drawing the top  
edge.

Likewise, setting the top and vertical center together will determine  
the height of the object ((top px position - center px position) * 2)  
in a way very similar to how setting the top and bottom together will  
determine the height of the object (top px position - center px  
position). Same idea when doing similar operations horizontally.  
Multiplying by 2 is hardly going to have a deleterious effect on page  
loading.

And again, you and David keep talking about this as though vertical  
centering is all there is to it. I admit that vertical centering is a  
very, very compelling use case, but it is not all there is to it, any  
more than vertical centering is the only reason to use "top" or  
"bottom" with absolute positioning.

By the way, I have centered content vertically before (for a psuedo- 
pop-up help system) by drawing an extra div around it, positioning  
its top edge to 50% of the viewport, giving the inner div a set  
height based on its estimated needs (with overflow-y set to auto),  
and setting its top to the negative of half that height. Does that  
sound like a better situation than just setting center-y to 50%? What  
did I do to incremental rendering that makes all of that better than  
just positioning the center of the element directly?

You can't keep people from trying to center things. All you do is  
cause them countlessly excessive hours trying to bend CSS into doing  
what they need.

> I believe that's why in CSS2.1 'auto' margins
> can't vertically center absolutely-positioned non-replaced content,
> even though they can center replaced content (e.g. images).
>
> This doesn't mean we shouldn't consider vertical centering: I think
> vertical centering is an important ability to include in CSS (outside
> of table cells). But however we do it, it is going to "break"  
> incremental
> rendering in that the final position of earlier content won't be known
> until later content is loaded.

No worse than with positioning with "bottom". Unless you're trying to  
say that the pixels are drawn one row at a time from the bottom up,  
and the sentences are all rendered one letter at a time starting with  
the last letter and working backwards through the sentences until you  
finish drawing all the text to determine where to finish at the top!  
If that was really the way it was done, then float:bottom would not  
be the problem its made out to be.

> As long as most designers don't use it on
> the main content of long pages, though, it shouldn't be a huge  
> problem--
> and I don't expect that they will. Vertical centering is mostly useful
> for short bits of content in navigation and on pages that fit above  
> the
> fold.
>
> Advanced Layout breaks incremental rendering in a much more  
> troublesome
> way, because it reorders content and is expected to affect almost all
> content on long pages.
>
> ~fantasai
>

Received on Wednesday, 9 January 2008 05:19:02 UTC