How can I draw vertical text with CSS cross-browser?

by

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Old answer:

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I’m not certain how to use it. Opera has no transformation capabilities yet.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

More Related Contents:

  1. Why does my design elements look different in all browsers? UPDATE [closed]
  2. Menu does not align correctly in Safari
  3. What is a clearfix?
  4. How do I style a dropdown with only CSS?
  5. CSS technique for a horizontal line with words in the middle
  6. css ‘pointer-events’ property alternative for IE
  7. Browsers’ default CSS for HTML elements
  8. How to align checkboxes and their labels consistently cross-browsers
  9. Style input type file? [duplicate]
  10. Remove white space above and below large text in an inline-block element
  11. Cross-browser custom styling for file upload button [duplicate]
  12. How to make HTML Text unselectable [duplicate]
  13. Flexbox and Internet Explorer 11 (display:flex in ?)
  14. Flexbox alternative for IE9
  15. Setting a width and height on an A tag
  16. Image scaling causes poor quality in firefox/internet explorer but not chrome
  17. Fallback for CSS attributes without unit
  18. Extra space under textarea, differs along browsers
  19. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  20. How to make input autofocus in internet explorer?
  21. Cross browser method to fit a child div to its parent’s width
  22. Which browsers support data URIs and since which version?
  23. Word-wrap in an HTML table
  24. Changing the color of an hr element
  25. Add a horizontal scrollbar to an HTML table
  26. Should global css styles be set on the html element or the body element?
  27. How do I add a tool tip to a span element?
  28. Why doesn’t “margin: auto” center an element vertically?
  29. z-index not working with position absolute
  30. Why does a border increase the element’s width?

Leave a Comment