Tuesday, August 2, 2005

Centering - Finally Finally

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

I finally implemented support for the HTML <center> tag last night.
I had resisted doing that since none of the components are using it,
and besides, <center> is a deprecated tag.
However, some users have been asking for it - and I discovered that
the new Alert component -does- rely on <center>'s evil twin:

attribute on <table> tags. So I decided to implement
it. But don't take this as encouragement to ask for support for the <blink> tag!

If you've read this blog for a while you might remember that I made
a quick attempt at implementing center before. The

"correct" way to
center in CSS
is to set the horizontal margin properties to
auto. However, simply aliasing <center> to
auto margins has other side effects, so I backed that change out.

The solution I settled on is what Mozilla seems to be using: a new
internal-only value for the text-align property. In
Mozilla's case it's "-moz-center", and you can see it if you use their
DOM inspector to look at elements inside a <center> tag.
Now, the <center> tag, as well as the align="center"
attribute, will set text-align to -rave-layout,
and the box dimension code looks for this property and handles centering
as you'd expect.

It seems to work - here's my Google test page finally properly
centered (click for full size):

You can see how it used to look in
this old blog entry.
Quite a bit already centers simply through use of text-align: center, but notice how
the menu above the textfield is wrong.

No comments:

Post a Comment