Grow your CSS skills. Land your dream job.

Sideways Headers

Published by Chris Coyier

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.


So, like this.

Easy, right?

Should be pretty easy right? Just absolutely position the header in the upper left (so it doesn't take up any vertical space) and then rotate it from it's upper left corner 90 degrees with CSS transforms. Yeah... that's cool, but here's the problem: a lot more browsers support absolute positioning than support transforms. That's problematic, because in the case of those browsers, the headers will now be sitting on and obfuscating content.


Bad!

How I Would Do It: Feature Detection

I think the best way to handle this is to do feature detection with Modernizr. Make a quick custom build that tests for transforms, load it up at the top of the page, and then only apply the absolute positioning and transforms (and other tweaks) when you are in a browser that can deal with it.

And so...

The complete CSS:

aside {
    position: relative;  
}

aside h3 {
    background: #369;
    color: #fff;
    padding: 5px 10px;
    margin: 0 0 10px 0;
}

/* Class name via Modernizr */
.csstransforms aside {
    border-left: 34px solid #369;
    
    /* Make a little room */
    padding-left: 10px;
}
.csstransforms aside h3 {

    /* Abs positioning makes it not take up vert space */ 
    position: absolute;
    top: 0;
    left: 0;
    
    /* Border is the new background */
    background: none;
    
    /* Rotate from top left corner (not default) */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    -o-transform-origin:      0 0;
    
    -webkit-transform: rotate(90deg); 
    -moz-transform:    rotate(90deg); 
    -ms-transform:     rotate(90deg); 
    -o-transform:      rotate(90deg); 
}

View Demo   Download Files

The weakness left in this technique is that if the header is longer than the space available, it doesn't push down the aside's height to compensate. There really just isn't a way to do that with just CSS (you can't set the height of something to match the width of something, basically). For the record, you could use JavaScript to do it.

Can we do it without Modernizr?

Christian et al. didn't want to use Modernizr (for reasons I can't possibly comprehend ;). Lennart Schoors, in the comments of his post, came up with this technique, where the paragraph elements themselves were also transformed (moved). By default, there is a bunch of empty space at the top of the aside, and the transform moves them back up to fill that space. Without transforms, the gap is still there, making room for the absolutely positioned header. Pretty smart!

The one shortcoming I can see is that it targets paragraph elements specifically. In a real environment you might not be able to count on that, so you are either writing a selector to cover all possible elements to move, or using an non-semantic wrapper. Also, this is subject to the same weakness as I described about header length above.

Improvements welcome!

Comments

  1. I am not sure if there is truly a CSS-only method that would work in all situations. Surely there isn’t one that will make everyone happy. I think I like Lennart Schoors method the most.

    I would probably design as if transforms aren’t available and then let JavaScript rotate the text and move the associated content as needed. True, you need JavaScript to see the really pretty stuff, but it should still look ok for everyone.

  2. Jorik
    Permalink to comment#

    Rotation is also available in Internet Explorer since 5.5, with the matrix and the rotation filter. The matrix filter is better, cause it allows all 0-360, the rotation only steps of 90 degrees.

    CSS3Please.com has a great calculator for this difficult filter!

  3. Permalink to comment#

    Cool technique. I think the text should be rotated so it read easier, it’s not that accessible the way it is or maybe it’s just me.

    • Permalink to comment#

      What do you mean by rotated? Wouldn’t it take more space if you have a long word. Maybe I don’t understand your statement correctly.

    • Permalink to comment#

      I mean so that each letter is still in its correct orientation so that the letters are stacked on top each other but not turned on their side.

      Like:
      H
      E
      A
      D
      I
      N
      G

    • Ben
      Permalink to comment#

      In my opinion and what I was taught in school, stacked (what you displayed) is more difficult to read than standard line copy in most orientations. Viewers eyes associate letter formations that allow the brain to read the words without reading every character. I feel that you would loose that association with stacked type.

    • Chime
      Permalink to comment#

      Barry, I see what you mean and it makes sense since transform is not available for older browsers like Internet Exploder.

    • Permalink to comment#

      If you stack the letters like that you’d also be stuck using a fixed-width font. I had to make something like that for a client once. It looked hideous ..

    • Permalink to comment#

      Would it not make more sense to align the letters to the center instead?

  4. Permalink to comment#

    One thing I’ve noticed is that I tend to turn my head to the left (not right) to read vertical text. In this case, the text seems “backwards”. I’d rather it read bottom to top, like your masthead.

    I have no idea how common this is, or if I’m an exception (since book spines are written top to bottom typically).

    • Gar onn
      Permalink to comment#

      yes, your text should always be readable from the right (and from the bottom )
      so turns between: 270° (-90°) and 360° (= 0°) for text, is the rule I always apply.
      for turns of a few degrees this rule is not important

      But then you’ll need
      left: -30px;
      bottom:0;
      to get it positioned right again

      and you’ll need to find out a way to get it on the top instead of on the bottom, because titles should be on top. (I couldn’t find a good way to do that…)

    • Elaine
      Permalink to comment#

      This is a language thing, as in French the spine is written bottom to top, and in English it’s the opposite. It can be quite a hussle if you have a multilingual website, but if not I think most people are used to top-bottom reading.

  5. Well I decided I would try my hand at improving both solutions.

    So I present this fiddle.

    It fixes the issue of the height, the background will expand to match the height of the content. My problem with it is that more browsers support :before then transforms, so I might use Modernizr along with the css to check for transforms support.

    I guess some smarter people with more time can improve it :)

    • Oh, I forgot to mention that it fixes the limiting of the content to just P tags, but I’m not sure if it fixes it well. Using * could have some performance issues yada yada yada and I can’t quite figure out why P tags end up with correct positioning and the H2 tag doesn’t. Oh well, more things to improve I guess.

    • Oh, updated with Modernizr checking for transforms support. The Fiddle. Works waaaaaay better now.

  6. Stefan Rechsteiner
    Permalink to comment#

    We’re using this same concept on our new Startpage on http://www.macprime.ch for a Content-Slider

    • Permalink to comment#

      I’m not sure if this is a bug or not stefan but on your content slider. When i move my mouse quickly from the left to the right and stop on the left edge of the slider a blank slide appears.

      I’m using Chrome 1.4 on XP SP3

      Just a heads up

    • Yeah, I’m seeing it too, but there’s a picture of a bulldozer-y type thing that shows up, so I’m assuming it’s intentional…?

    • Yeah we noticed that too, thats why we put that bulldozer-pic there ;-) … well, the problem is that due to the css-transition on the hover-effect, the browser/engine is actually to slow to maximize the hovered ‘tab’ AND minimize all the others at the same time and fluidly … if we remove the transition it works, but of course is everything else than fluidly … :-/ … maybe someone here has a tip?

    • Permalink to comment#

      It’s actually a back-hoe :)

    • I have achieved a similar effect on that page (but first, deactivate JS in your browser and then try hovering the images):

      http://www.david-goliath.com/ad_uottawa01_en.html

      What i did to fix that kind of bug is that all the images are resized, but the last one (who is always full-sized). so when you hover the images on the left, they just push the right image out of the viewer.

      Maybe it won’t work exactly like this for you.. but it could help you find the perfect solution.

  7. Super rough demo.

    This technique uses a selector with comparable browser support to transforms, the :nth-of-type pseudo-class with a value of ‘n’ to trigger for all matches. Sure, it’s hacky, but it’s pure CSS “feature detection.”

  8. Doug T
    Permalink to comment#

    What? No use of CSS3’s:

    writing mode: tb-rl;

    that with some overflow hidden to limit the space or some fancy javascript to detect the containers height and truncate the heading and you would be more prepared for the future.

    No?

  9. Permalink to comment#

    It’s things like this that really make me realize how much design on the web is, despite all of the advances, still limited by the inherent technology behind it.

    It’s strange though, because I don’t even feel conscious of these constraints when creating preliminary designs. I rarely run into issues where CSS can’t handle my designs nearly flawlessly.

  10. Permalink to comment#

    I have made this Fiddle & tested it very fast in IE7/8 (Just changed aside to div to make it work in IE7/8) http://jsfiddle.net/Gabri/t9u26/2/ using Lea verou trick http://leaverou.me/2011/05/rule-filtering-based-on-specific-selectors-support/ & i think it works

  11. dillon
    Permalink to comment#

    Ie supports writing mode eg .rotate{ writing-mode: tb-rl} top bottom right left

  12. Hassan
    Permalink to comment#

    If using Modernizr is problematic, maybe doing feature detection in server? We could compile a list of browsers with features and then detect the browser in server and check if it supports CSS tranforms.

  13. I was solving this problem more than half a year ago and I came up with cross-browser solution, but I didn’t use “semantic” code (or even HTML5)

    Works in all major browsers (IE7+, Opera, Safari/Chrome, Firefox)

    If somebody intrested you can see it in live action here: http://potterymili.cz (the web is unfinished and it’ll never be)

  14. Hi,
    thank you

  15. Hi,

    Cool technique. I think the text should be rotated so it read easier,

    psdtohtml5services@gmail.com
    thank you

  16. Evert
    Permalink to comment#

    I don’t understand how you can write a post about defending and promoting the use of semantic classes one day and about promoting the use of modernizr the next. If there is one thing modernizr (and most other of these kind of scripts do) it is dropping in loads of unsemantic classnames?
    As I said at that post I don’t believe in semantic classes, but I do in classsnames that make sense. And not only are modernizr classnames un-semantic, but they also make no sense outside of the script use; if you remove modernizr from the site, the classes are totally unrelated to anything.
    Don’t get me wrong, modernizr is a great script and I have used it on occasion when I am in a hurry, but personally I would not promote it as standard or best-practice.

    • Douglas T
      Permalink to comment#

      But that’s NOT what Chris is saying here… hes just solving a problem. As of the writing of this article it’s really your only choice other than a javascript ONLY solution which isn’t nearly as “perfect” as Modernizr.

      To be a web designer these days you have to “obey by the laws of the internet” AND (more importantly) “do what the client wants.” Why should you spend more time writing custom scripts for one-off design jobs when there are other, more cost effective ways to get it done. It’s not like he was saying just throw the whole thing in a table or set up an image replacement script for every headline.

      Current limitations require a modern designer to preach standards but work in an un-standard environment. Strive for idealism when possible, the rest of the time you just gotta make the darn thing work!

    • Evert
      Permalink to comment#

      @Douglas: I completely agree with you on the standards vs “just make it work” argument.
      But Chris says, I quote:

      [...] didn’t want to use Modernizr (for reasons I can’t possibly comprehend ;)

      That is why I responded. I can comprehend why he doesn’t want to use it. And so should chris because of what he wrote here: http://css-tricks.com/13423-semantic-class-names/

      In this case I would advise the client (if any advice is needed) to use images to rotate the text, like we always have in the past.
      CSS3 on this feature just is not mature enough to use. To bring in modernizr just for the sake of being “on the edge” is just making use of something for the sake of it and at the same time you open yourself up to non-standards/non-best-practices.

  17. Permalink to comment#

    does not work on Opera mini

  18. Permalink to comment#

    One tip (inline with Paul Irish’s recommendation) is to write modern styles for all browsers and only use the no-* classes to provide fallbacks. Otherwise modern browsers still rely on modernizr to apply the styles.

  19. Nice technique! Rotating the text, so you can read it better, would totally finish it off.

  20. Permalink to comment#

    In IE6/IE7 the text of the headers was sitted on and obfuscating content.

  21. mikmik
    Permalink to comment#

    This is a case of making a mountain out of a molehill. I have been doing this for 6 years without javascript.
    I just rotate my header with irfan view, save it as headerL.jpg, and float it.
    Takes less time than writing this comment.

    • Just make a JPG of the whole website man, why write code at all.

      That’s snarky, but I’m trying to make a point. If a redesign comes around and you/new people want to make ANY visual aspect of those headers, they are making new JPGS, and that’s wicked impractical.

    • Badr
      Permalink to comment#

      Chris, long time havent visited the site because of some crazy 3G proxy config pbs.. I just want to say somthing, the new site look rocks man ! Thanks for bringing that beauty to reality :)

  22. Permalink to comment#

    Well, if you’re hard-coding the header text to be rotated…

    …how about adding CSS min-height to set the minimum height of the container? For example, in Christian’s fiddle I tried changing the header for the second aside (first one transformed) to Heading and stuff and stuff and STUFF and adding style="min-height: 16em;" to the containing aside. That gave a functional, visually acceptable result.

    • Permalink to comment#

      And oh, yeah, paleolithic browsers won’t support min-height. Boo ruddy hoo. There’s always David Walsh’s workaround for Internet Exploder 6 (and earlier, $DEITY forfend; or maybe you work in a code mortuary).

  23. Stuart W.
    Permalink to comment#

    I prefer to use modernizr to detect lack of support rather than support

  24. k6
    Permalink to comment#

    “The one shortcoming I can see is that it targets paragraph elements specifically. In a real environment you might not be able to count on that, so you are either writing a selector to cover all possible elements to move, or using an non-semantic wrapper.”

    Non-semantic wrapper isn’t such a bad idea IMO. Works great http://jsfiddle.net/sTcTF/5/

  25. Tim Franklin
    Permalink to comment#

    Just use the :not(.foo) pseudo selector and IE will ignore any tags you put in there so group the absolute positioning and transformations in that definition.

  26. The header text becomes very pixelated after rotating in Firefox, and making it vertical makes it harder to read, but I can see a few rare cases where it would be cool to use.

  27. Looks great, will be Stirling on my Portfolio site :)

    Thanks

  28. Marco
    Permalink to comment#

    about crossbrowsers css transforms (yes, even in IE) there is an article on user agent man’s blog.
    it’s a cool and complete post about it, showing just how to do the freaking calculus involved on doing transforms.
    here’s the link:

    http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

    also, if i’m not wrong there is a specific filter propriety to rotate objects.

  29. AmrAbdelaziz
    Permalink to comment#

    i love this trick css
    but not working in stupid browser explore ^^
    thnx so much chris ^^

  30. Permalink to comment#

    Hey, I did just this on http://clarite.co.uk (its just a health and beauty spa website, nothing special), with ie8 specific css (ta, Modernizr) and all was fine and dandy until I upgraded to ie9 now ie9 is getting its knickers in a twist (fixing that today) but ie8 mode looks fine, however on my clients ie8 it looks like it does on my ie9 … anywho, I just used .ie classes and plonked them into lists… relative positioned everything.

    Works bonzer in chrome etc. but ie debugging is what I’ll be doing today :o(

    For IE, I used

    .fpage .content li h2 {	
    zoom:0;
    	background-color:#fff;
    	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    

    The whole deal with the background colour sorts out ie8’s naff font rendering as soon as you transform it and I can’t remember what the zoom’s for off the top of my head but there’s a reason for that too.

    Anywho, debugging to do!

  31. This is really cool. I will definitely be trying this out soon. Thanks

  32. Permalink to comment#

    Definitely easier with Modernizr !

  33. Permalink to comment#

    I don’t think that vertical headers are ideal. I think that it will make readability more difficult and i have to say that headers are the most important part of articles.

    Yes, it’s really fancy but not for usability.

  34. Interesting tidbit from reader Ethan Herbertson who wrote in about how the text on book spines in Russia “rotate” the text the other way:

    The de-facto “western” publishing standard is to have book titles on the spines rotated clockwise 90 degrees (when rotating them at all). It is supposed by some that this is because it makes them “top-down”: the first letter in the title is nearer the top edge of the book.

    The Russian standard is exactly the opposite; book titles are rotated counter-clockwise when they appear on the spine. This has the notable benefit of making an alphabetized shelf of books be in the same order as the same set of books when alphabetized as a stack.

    In other words, if you stack some books on a table such that the topmost starts with ‘A’ and the bottommost starts with ‘Z’ (and such that all the titles on the spines are right-side-up), then you can lift that whole stack of books up, rotate it counterclockwise, and put it on a shelf and PRESTO! Your bookshelf is now alphabetized! If you try that with “western” books you end up with all the books on the shelf being upside-down.

  35. Permalink to comment#

    Another alternative is just to set a padding for the top as well as the left side of the content.

    padding: 20px 0px 0px 20px;
    
This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".