Why no float:center
I am known as a web standards-zealot. I will get this out of the way first. There are right ways to do things, and wrong ways. I will always opt for the right way if given half a chance. But I like to think of myself as a pragmatist, too. You can do things mostly the right way, and still cut corners with dirty hacks and cheaper solutions. In web-design, you can have your cake and eat it too. In fact, you must. This is a business of fast-paced invention and slim margins. There often just isn’t time, budget or both to do things the zealot way. As manager of several extremely high-traffic websites I can attest to this and on any given day, including sundays, cite examples from that very day.
On the other hand there is a real need to set standards and maintain them. The W3C has done sterling work in this regard and we should all pay homage, and perhaps light them a candle or two. Without standards, the entire issue of doing things the right way would be moot. There wouldn’t be a right way and we’d still be instructing our users to please get browser so-and-so, losing traffic and money in the process. And much like traffic laws, or rules of social interaction, standards ‘work’ only because we choose to maintain and honor them. Where standards are still not being maintained, there is a real need to get people to play along and do things right. And the best way to affect change is to lead by example and start to do things differently.
So, for new sites I do honor the standards. Mostly. And I see instant rewards in ROI, SEO and related acronyms. It’s easy to be idealistic when starting from scratch. Well, easier, anyway. And it was while I was researching something for a new site I was building that I came across a question posed by a web-designer; Why is there no Float: center in the CSS specification? This was followed up by diatribes against the ‘brain-dead’ W3C, and a call to abandon web-standards altogether until the W3C would give all designers, self-proclaimed and otherwise, what they wanted. In effect; until all standards were abandoned in favor of an add-your-own specification.
The question stuck in my head. Not because it was a very good question to ask, mind you. But it stuck. Certainly I could see how some tasks would be simplified by a float: center. The pragmatist in me could see the point raised. But the guy who has to deal with code accumulated over the years, and written by a slew of predecessors, some good at their jobs, some not so, could also immediately see the problems looming on the horizon. So, I decided I would try to answer the question from my perspective; a web-design professional who takes his job seriously.
What is float?
There may never again be a tool in our toolkit as misunderstood as float. Float basically means that an object is pulled to either side of its containing block and other objects flow around it. As such it is not a pixel-perfect positioning tool, nor is it meant to give the designer full control over the position of an object, although it is often used that way to the detriment and the unending frustration of many an aspiring front-end developer. Instead it is intended to give the platform on which the content is viewed a say in where stuff goes. It is therefore a very powerful tool, and like powerful tools everywhere, it only works if you let the tool do the work.
In a fixed-width design, for example, using float may save you some coding, but it’s not where it shines. You could just as easily use other positioning methods; often with better results. (Although I have seen people use float in fixed-width designs simply because it ‘just behaves’ meaning; ‘I don’t understand the box model’)
From this follows that float is really meant only for positioning objects that are an integral part of a greater, flowing, whole; usually images and boxes within text. It’s power becomes most apparent when you are dealing with a fluid design where you are not sure what the dimensions of your text-containing area are going to be, or inversely; when you can’t be sure of the size of your text or it’s font. Basically, therefore, given the fact that especially of the latter you can never be sure; always when dealing with copy that has boxes in it. I use float, for example, to place author pictures, in a template for columns on a news site. I may never be able to predict the abysmally low number of words writers try to get away with and still get paid but my design will never break because of it.
The folly of float: center
For starters; there simply are very few valid reasons to use center of any kind on anything but very short bits of text, and even then I can’t really think of any use that is absolutely essential. Centering anything is bad use of available space and bad for usability, even if done without a floating effect. Screen realestate is expensive. Why throw away a large portion of it just so you can have your content centered on a screen that your users will only move around on their desktop anyway? Obviously, it may be easthetically pleasing to center an object. But there are perfectly serviceable ways of doing that. (such as margin: auto) Support for these methods by certain browsers when in quirks mode (*cough* IE *cough*) may be improved, but this is not the sort of trickery that would require a float. This is not where a float: center makes its absence felt. And if we are going to wait around for someone to fix errant browsers, we should look at the builders of said browsers rather than hope to add yet another CSS specification to be misunderstood by them.
Floating rather than other ways of positioning is useful mainly when positioning objects amidst large bodies of copy or when setting up multiple-column fluid layouts. So, what reason would there be to use float: center? Multiple column layouts do fine with just left and right. They may do even better once the W3C starts rolling out a way to do true columns, but I have never really had a problem there.
I asked the W3C about this and got an answer from Bert Bos, author of (amongst others) ‘Cascading Style Sheets – designing for the Web’. Bert very kindly explained:
“It is more difficult to implement than floating to the side, sufficiently difficult that thusfar we considered that the effort wasn’t worth it. It’s rather rare to have things in the center of text, and if there are, they are usually small and nearly always also centered vertically on the page, which we cannot do in CSS yet. So rather than introduce a difficult feature that didn’t even fully solve the problem, we decided to wait until we knew better how to do it.”
And as a second reason, he explained about the issue of how to deal with text once you have something floating centered in it, which I will now delve into. (Because I was planning to, not because he brought it up.) But before I do that I want to take a step back, and look at print layout. I know, web is not print. In many ways web is more forgiving and more flexible than print. As a tool to disseminate information and messages, the web is infinitely more powerful than print. On the other hand the power of flexibility and interactivity that makes the web so great is also its biggest challenge. There are, put simply, an equally infinite more ways to make your message unintelligible; and the last thing we need is to adapt the ways print has discovered as well.
In the world of print you will hardly ever find images centered in text. When you do, it’s usually done for dramatic effect, such as in advertisement when the overall picture is more important than the actual words. There is a reason for that; even in the steady, rock-solid, world of print an interruption of the flow of text is a bad thing. Wanting to do what the print folks are doing is an incredibly weak argument to start with, but in this case -for all intends and purposes and with some caveats in place- the print folks aren’t even doing it.
But suppose you wanted to do it anyway?
Coming to think about your options, there are but a few:
- Text flows around one side first, then continues on at the other side.
- Text gets cut off and goes on, on the same line, on the other side.
Both are equally bad for legibility. Our eyes, and reading habits, are not adapted for such snaking around the page. In the world of print, moreover, the page is always completely in view. There’s no variable ‘fold’ to worry about, or scrolling from side-to-side on smaller screens, to make things even more confusing.
And how would it be done, then?
The syntax for a float: center; would be derived from the existing syntax for float:left/right;. IE: Float: center;. But as mentioned above, there are a few options on how to float the text around the object, options that do not come into play with left or right, since a centered float has two open sides to flow past. Thinking logically, I can think of three options that would have to make it into the CSS specification:
- Flow one side first, the other next. (And then; which side first? We do not all live in a left-to-right world.)
- Flow around by cutting off the text and continuing on on the other side. (And then; what to do with words, break off words or break off at the nearest space? How to handle the existing text-align?)
- Let the platform decide.
Depending on the level of complexity the CSS working group would be ready to tackle, this could turn into quite a number of properties with associated values. These would then have to be implemented by browsers and the like. Just imagine the mayhem caused by a simple difference between how Mozilla and IE would render such a specification. I certainly can do without the added headaches. (And I say added because the simple box model issues alone cause me a few on a daily basis.)
Next comes the question of how to let a page degrade gracefully when a center floated element isn’t rendered for whatever reason… Or how to have screen-readers handle the text… And you just know that some twerp will want to not exactly center the element but have it have some more space on one side than on the other…
Bert Bos wrote about another development that deals with the above issues:
“So we decided to first finish the multi-column specification [...] and also work on some ideas for “grids” (to
allow things to align/center at predefined places on a page) and then see if we can’t use that to create centered floats.”
This idea of grids sounds great. Like a headache, but great. But going anywhere near centering floats? Don’t do it Bert! Just do not release upon us yet another “marquee”, for unschooled people to play with while pretending to be designers.
But all joking aside; the development Bert describes makes a lot more sense. It tackles one hellova lot more limitations of HTML/CSS in one fell stroke, and if done right, can be implemented using somewhat sane syntax rules. If there are, by then, still people around who think I am a raving lunatic out to destroy their happy world of no design rules whatsoever; they can go ahead, center your floats, I dare ya! But if I can help keep a float: center; out of the next CSS incarnation, I will dance a little jig in private.
Caveat
You may have noticed that I sortof glossed over objects centered between columns. That is because I see that as an only marginally related issue at best.
When you do see centered content, in print or elsewhere, it is often between two columns. It’s still not good usability, but instead of having to make strange, unnatural, detours around the page, the eyes have only to move a bit sideways to catch up where they were. Centering something between two columns can easily be done with the CSS trickery we have at hand. It is, in effect, doing the same as what you do by floating left or right, only with an overlap into the adjacent column. I wouldn’t recommend it, it’s another example of emulating print to the detriment of your message’s impact, but column layouts are accepted practice and I’d say; go for it. If you can’t figure out how to do it without float: center though, your future as front-end developer might be only marginally more promising than mine in quantum physics.
No Comments yet.