Vertical text in IE7, IE8, IE9, and IE10 with CSS only
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)
This is what I have implemented today, which I think should be correct:
.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;
}
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!
EDIT:
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.
.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;
}
I still have not found a way to do this with pure CSS where IE10 and IE8 are happy.
Answer
Here is pure CSS ( + 1 extra div for every text ) solution
Works for all IE versions IE7-10
/**
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
*/
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
/* this is for shity "non IE" browsers
that doesn't support writing-mode */
-webkit-transform: translate(1.1em,0) rotate(90deg);
-moz-transform: translate(1.1em,0) rotate(90deg);
-o-transform: translate(1.1em,0) rotate(90deg);
transform: translate(1.1em,0) rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
/* IE9+ */
-ms-transform: none;
-ms-transform-origin: none;
/* IE8+ */
-ms-writing-mode: tb-rl;
/* IE7 and below */
*writing-mode: tb-rl;
}
.rotated-text__inner:before {
content: "";
float: left;
margin-top: 100%;
}
/* mininless css that used just for this demo */
.container {
float: left;
}
HTML example
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
</div>
<div class="container">
<div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>