Instantly share code, notes, and snippets.

Embed
What would you like to do?
CrossBrowser Vertical CSS Text
/**
* Works everywere ( IE7+, FF, Chrome, Safari, Opera )
* Example: http://jsbin.com/afAQAWA/2/
*/
.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 dosn'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;
}
<!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>
@kmb385

This comment has been minimized.

kmb385 commented Jan 14, 2014

The comment about non-ie browsers just made my day.

@shikio

This comment has been minimized.

shikio commented Feb 19, 2014

thanks, this CSS is great :D

@psgganesh

This comment has been minimized.

psgganesh commented Jul 9, 2014

Thank you :) this saved my day 💯

@benjaminokeefe

This comment has been minimized.

benjaminokeefe commented Nov 5, 2014

Thank you, the -ms-writing-mode: tb-rl; line works like a charm for IE8.

@flo-rider

This comment has been minimized.

flo-rider commented Apr 24, 2015

I tried changing "90deg" to "270deg" to have the text rotate the other way, but that only works in Chrome (where the text is unfortunately also moved outside the outer container) and not in IE11. How can I configure this to have the text the other way around?

@romannebesny

This comment has been minimized.

romannebesny commented Sep 16, 2015

Thanks! Will use it!

@JAC2703

This comment has been minimized.

JAC2703 commented Oct 2, 2015

+1

@dhwang

This comment has been minimized.

dhwang commented Oct 12, 2015

writing mode are in Chrome and Firefox now

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

@RobMKR

This comment has been minimized.

RobMKR commented Oct 17, 2016

Thanks a lot man)))

@ghost

This comment has been minimized.

ghost commented Dec 28, 2016

Thanks! Work in ie7, ie8 : )

@andru1989

This comment has been minimized.

andru1989 commented Dec 13, 2017

Thanks man

@john-doherty

This comment has been minimized.

john-doherty commented Sep 18, 2018

TY!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment