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.

Copy link

kmb385 commented Jan 14, 2014

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

@shikio

This comment has been minimized.

Copy link

shikio commented Feb 19, 2014

thanks, this CSS is great :D

@psgganesh

This comment has been minimized.

Copy link

psgganesh commented Jul 9, 2014

Thank you :) this saved my day 💯

@benjaminokeefe

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

romannebesny commented Sep 16, 2015

Thanks! Will use it!

@JAC2703

This comment has been minimized.

Copy link

JAC2703 commented Oct 2, 2015

+1

@dhwang

This comment has been minimized.

Copy link

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.

Copy link

RobMKR commented Oct 17, 2016

Thanks a lot man)))

@ghost

This comment has been minimized.

Copy link

ghost commented Dec 28, 2016

Thanks! Work in ie7, ie8 : )

@andru1989

This comment has been minimized.

Copy link

andru1989 commented Dec 13, 2017

Thanks man

@john-doherty

This comment has been minimized.

Copy link

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