CSS Vertical Text

By  on  

Almost every HTML element we create is thought of in the frame of horizontal.  We pay much more attention to widths than we do heights, especially when it comes to text within them. Sometimes we do, however, want to display element text in a vertical fashion.  In the old days of crippled Internet Explorers, this was mostly a losing battle.  These days, however, vertical text is a breeze.  Here's how to do it!

The CSS

Vertical text is accomplished easily these days with CSS transforms:

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}

Depending on which direction you'd like the text to display vertically, the rotation will be different, but it's that rotate value which will make the text vertical.  Here's a helpful tip:

.vertical-text {
	float: left;
}

Floating the element will essentially emulate an auto width!

CSS transforms make loads possible, and are much more powerful than simply turning text vertical, but with the code provided above, the job is done.  Isn't progress grand?

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Input Incrementer and Decrementer with MooTools

    Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

Discussion

  1. MaxArt

    To create vertical text for IE8 and older, you can rely on the CSS property writing-mode: tb-rl; eventually adding the legacy filter: flipv fliph;

  2. Lewis Walsh

    This is great. Though I tend to think of vertical text as the orientation of the letters being upright, just beneath each other.

  3. You sir, have always something cool here!

    Greetz

  4. For RTL langs, rotate -90deg

  5. Gurmukh

    display: inline-block; also works instead of float: left;

  6. Jozef Remen

    What about vertical text with letters not rotated, just every one below another? Like:
    R
    O
    T
    A
    T
    E

    I think this really can only be achieved with JS to wrap each letter to and then:

    .vertical-text span {transform: rotate(-90deg)}
    

    I highly doubt it’s possible just with CSS

  7. isti37

    It’s possible, just create a container with the fixed width of one letter size according to the size of the font and the text will wrap line by line (letter by letter) if you set word-wrap to break-word.

  8. Jozef Remen

    Isti37: great solution, very elegant. Thanks!

  9. Add this css also to help complete the experience:

    .vertical-text {
        ...
        cursor: vertical-text;
    }
    
  10. @Jozef Remen props! The only issue is spaces between words this way. They are huge and line-height only works as letter spacing. I guess you’d have to add for each return line. Any other ideas?

  11. With CSS, how would I rotate the “Signup” text?

    #yjsg_sidepanel_open:after {
            content: "\Signup";
    }
  12. huda

    how do I show the heading in 2 lines when rotating text?

  13. Mister

    Try to squeeze your vertical text for example into 4% width DIV and it won’t work. I wanted to make a vertical thin text line with width=4%; and height=100%; (height=vertical so I thought I’d be fine) but it takes the real width of your !horizontal! text and simply rotates it. Thus, all your neighboring divs are completely messed up. You have to measure (somehow?) and assign the width of your horizontal text first and only then you will get the mess this solution creates, otherwise it won’t work at all. Awkward. This method will only work OK if the width property of the place where you want to set your vertical text to this way doesn’t matter.

  14. .texto-vertical-3 {
      width:20px;
      word-wrap: break-word;
      text-align:center;
    }
    
  15. Facundo Corradini

    For those wanting non-rotated, one letter below the other vertical text, try this little hack:
    Use “word-wrap:break-word” to allow separation of letters between lines, and declare the width to the same value as your font-size (e.g: 1em)
    That will get you 90% of the way there, but some letters like “i” will still be shown 2 in the same line. Adding padding to just a tad less than your width while using border box box-sizing will force it to show 1 and only 1 letter per line.

    p.vertical {
        word-wrap: break-word;
        width:1em;
        padding:0.9em;
        box-sizing:border-box;
        text-transform:uppercase;
    }
    

    You’ll probably want to use “vertical align: top” and “display:inline-block” to correctly position the text and surrounding elements.

    CodePen example: http://codepen.io/facundocorradini/pen/LxJVNQ

  16. Artemisia

    I was able to get the ‘one letter under another’ without the smaller letters getting on one line AND have it recognize the spacing between words with this css code:

    width:1em;
    word-break:break-word;
    float:left;
    letter-spacing:1em;
    white-space:pre-wrap
    

    JFiddle: https://jsfiddle.net/costumingdiary/q1zsqewd/

  17. FS_FireStorm

    text-orientation + writing-mode also good combination for non-break letter text 90deg with no big space problem

     text-orientation: mixed;
     writing-mode: vertical-rl;
    
  18. This code was a lifesaver for me for button testing. Although the client didn’t end up using it, it was still extremely helpful for the vertical text test. Thank you!

  19. Also mention that “word-break” shouldn’t be set to “break-word”

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!