StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POVertical text in IE7, IE8, IE9, and IE10 with CSS only
text
Body
copied!<p>Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees)</p> <p>This is what I have implemented today, which I think should be correct:</p> <pre><code>.counterclockwise-text { /* Chrome/Safari */ -webkit-transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; /* Firefox */ -moz-transform: rotate(-90deg); -moz-transform-origin: 50% 50%; /* IE9 */ -ms-transform: rotate(-90deg); -ms-transform-origin: 50% 50%; /* This should work for IE10 and other modern browsers that do not need vendor prefixes */ transform: rotate(-90deg); transform-origin: 50% 50%; /* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */ zoom: 1\9; writing-mode: tb-rl\9; filter: flipv fliph; } </code></pre> <p>However, IE10 is not ignoring the "\9" CSS hack -- it will pick up those values and rotate the text another 90 degrees. A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10. I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10. I'm just looking for a way to modify the CSS above to have vertical text in all browsers. Thank you!</p> <p>EDIT:</p> <p>For what it is worth, I also tried the code below that uses a filter to rotate the text. This may work for most cases, but in my instance a lot of the text is cut off by the restricted (non-rotated?) constrains of the wrapping element.</p> <pre><code>.counterclockwise-text { /* Chrome/Safari */ -webkit-transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; /* Firefox */ -moz-transform: rotate(-90deg); -moz-transform-origin: 50% 50%; /* IE9 */ -ms-transform: rotate(-90deg); -ms-transform-origin: 50% 50%; /* IE10 and other modern browsers that do not need vendor prefixes */ transform: rotate(-90deg); transform-origin: 50% 50%; /* IE8 */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE7 or less */ *zoom: 1; *writing-mode: tb-rl; *filter: flipv fliph; } </code></pre> <p>I still have not found a way to do this with pure CSS where IE10 and IE8 are happy.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload