CSSquirrel A look at web development and web design by Kyle Weems

:

Comic Update: Aligning Text In The Outback

Posted by Kyle Weems on July 26, 2010

Today’s comic features John Allsopp, the trouble with aligning text vertically, and the Outback. No, not the restaurant. The vast arid part of Australia. Mind you, I have in fact been to the restaurant, and I was disappointed for a number of reasons.

At least one of which is the entire lack of kangaroo steaks.

My apologies to the vegetarians among you.

There’s two non-restaurant related points to the comic. The first is that almost everything I know about Australia I learned from Crocodile Dundee. Which means that large knives, boomerangs, and poisonous animals are everywhere. The second (and more relevant) point is that I am more than a little annoyed at the task of vertically aligning text with CSS. And clearly, John agrees with me. But, naturally, when he discusses the point it sounds so much cooler because of that dreamy Australian accent.

Let’s get to it. CSS has been around in some shape or form since, what, 1994? And most of the early web was all about text. Red text. Blue text. Flashing text. Marquee text. Text that was occasionally on fire with a sword going through it. Epic, taste-shatteringly bad text. In the entire intervening generation since, why has nobody in a position to do something about it said, “Hey, if we want to vertically center more than one line of text… how do we do that?”

Really, why? How wild and crazy is the concept that you may want to vertically align a paragraph of something in the mouth of a giant robot, or otherwise arrange it delicately between two slices of bread?

I’m aware that I can center text vertically inside an element that’s been given display: table-cell. And when the need arises, I’ve even used it. But it leaves my mouth tasting almost as bad as it did the day I chewed on a tiny blue plastic donkey I found in the playground when I was five. It’s the kind of rancid, oily taste that ruins your meals for the next several days. No, really. Kids, don’t chew on blue donkeys.

What if I want an inline-block? What if I don’t want all the behaviors of a table-cell? What if I hate tables with such a passion that I’d rather eat my meals while standing rather than bring back memories of table-based layouts with either using a CSS style that imitates them or eating on a wooden surface that shares a name with them? Huh? What then?

Well, in such a circumstance, I believe I’d be screwed.

I’m not entirely sure how necessary it is to have a Marquee module in CSS3. Don’t get me wrong, panning text is… er, hot… but along with all the whiz bang animations that CSS3 brought us, can I please get something that makes me capable of vertically aligning some bloody text in a bloody parent element with a single bloody style? Especially without invoking tables?

Thanks. Loves and kisses.

P.S. John Allsopp is a nutter. I say this, because he’s running a five week online course, HTML5 Live With John Allsopp, over at SitePoint. My evidence for his insanity is that this course contains 8 structured lessons, 2 Live Q&A sessions, practical exercises and a yak! All for under $10. Ok, it doesn’t have a yak. But it has the rest, and looks to be an in depth look at harnessing HTML5 hotness today and tomorrow (markup, native audio and video, canvas, ARIA and more!)

It’s a crazy good bargain. Go take advantage of it.

Tags: , , , , , , , ,

4 Responses to “Comic Update: Aligning Text In The Outback”

  1. Thank you. It amazes me every single time I’m working on a layout that needs vertically aligned content (center, bottom or otherwise) how difficult it is to accomplish that.

    As an aside, even without Kangaroo steaks, the restaurant does still have the Chocolate Thunder from Down Under, which is one of the greatest chain-restaurant desserts to ever exist. :)

    Also, did you learn nothing about Australia from Yahoo Serious’ portrayal of Albert Einstein? Crocodile Dundee was great, but Young Einstein had it’s moments, too.

  2. Thanks Mr Squirrel – ’struth, that ought to keep the Aussie stereotypes rolling for another coupla bloody centuries mate ;-) Hey maybe I should tweet in Aussie – worked for Mel Gibson. Um, hang on.

    john

  3. Good on yer cobber!

    While I’m totally with the “don’t use tables for layout because that’s not what they’re for – CSS was specifically built to lay out pages” argument, it’s more than a little annoying that there are STILL perfectly sensible layout tasks that are easier to achieve with tables than with CSS.

    Multi-line centring is one. Vertical alignment is another. Sizing a container to fill the viewport if its content doesn’t do so. Making adjacent containers the same size – why are we faffing around with “faux columns” instead of being able to specify the real thing?

  4. Every time I read a post like this, and the subsequent comments, I get renewed confidence that we need not only better tools to create web documents, but a whole new language. The content should be pure content -not appearence or behavior-, so XML would be perfect for that, and a interface programming language that allows to define the full appearance and behavior of the web document, with complete independence of the logical structure of the semantic content. CSS has many shortcomings, vertical centering is one of them. This new language I’m developing aims to overcome all of them.

    I see the day when we ditch Photoshop (or Fireworks or whatever) and build the site completely with that language. Then we don’t have to do all the work twice!

    What would you like to see in such language?

    Cheers,
    Miro

    P.D.: Yeah, it does EqualHeightColumns (TM) too!!! ;)

Leave Your Thoughts

Please prove your sentience by telling me if the following picture is a squirrel or a robot.

Your Comment (warning: Inserting too many hyperlinks in your comments may trigger a filter, causing your comment to require approval before posting.)

RSS Feeds

My Photos. I Haz Them.

 

About Me

The Squirrel is Kyle Weems, an interactive designer for Mindfly Web Studio in rainy Bellingham, WA. More

© 2008 by Kyle Weems. All Rights Reserved. Login