CSS challenge: 90 degree turned headings in CSS3 with a fallback?

OK, during an IRC session the benevolent overlord of the MDN documentation, Sheppy asked me to help him with making the MDN docs look more awesome with breakouts where the heading is turned 90 degrees.

In essence, what we want is this:

rotating headlines

The above version should be for browsers that support CSS rotation and the one below should be the fallback version. Now, with my efforts, and the ever amazing Chris Coyier we got quite far down the line (on JSFiddle):

However, not quite yet. As you can see with the fallback (the first example) still covers the text and is not the full width. Chris of course proposes using Modernizr to check for CSS support, but that is something we don’t want. And, let’s face it, shouldn’t have to use.

I think this is a fundamental flaw of CSS – it offers us a lot of design opportunities but there is no “if this is possible, do this” (other than mediaqueries). You almost always need JS to test before you can apply a CSS effect – or disappoint people who do not use your cool new browser.

In the past, this was easier. We had CSS hacks and filters that targeted certain browsers. All of them were hacks exploiting issues in the rendering engine of the browser (sometimes in bizarre ways (remember the Box Model Hack’s use of voice CSS?).

Isn’t it time that with the power CSS gives us we also get a checking statement to apply transforms only if they can be used? And even then, there is no real graceful degradation.

So, who can make this work without Modernizr?


View full post on Christian Heilmann’s blog

5 thoughts on “CSS challenge: 90 degree turned headings in CSS3 with a fallback?

  1. Philip Tellis

    In my opinion, the vertical text needs to be the other way around.  The baseline of a heading should point towards the text that its heading.  In the example that you demonstrate, the baseline points away.

  2. Anthony Ricaud

    Maybe a fallback is not even required here. Looking at caniuse [1], only IE < 9 does not support CSS3 Transforms. And for IE < 9, you have a filter that enables this kind of rotation. Jonathan Snook explained all about it [2].

    Also, it doesn't feel normal to read the text from top to bottom. When I try to read the vertical text on the left, my head rotates to the left, making it easier to read from bottom to top.

    [1] http://caniuse.com/#feat=transforms2d
    [2] http://snook.ca/archives/html_and_css/css-text-rotation

Leave a Reply