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.

Show comment
Hide comment
@kmb385

kmb385 Jan 14, 2014

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

kmb385 commented Jan 14, 2014

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

@shikio

This comment has been minimized.

Show comment
Hide comment
@shikio

shikio Feb 19, 2014

thanks, this CSS is great :D

shikio commented Feb 19, 2014

thanks, this CSS is great :D

@psgganesh

This comment has been minimized.

Show comment
Hide comment
@psgganesh

psgganesh Jul 9, 2014

Thank you :) this saved my day 💯

psgganesh commented Jul 9, 2014

Thank you :) this saved my day 💯

@benjaminokeefe

This comment has been minimized.

Show comment
Hide comment
@benjaminokeefe

benjaminokeefe Nov 5, 2014

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

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.

Show comment
Hide comment
@flo-rider

flo-rider 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?

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.

Show comment
Hide comment
@romannebesny

romannebesny Sep 16, 2015

Thanks! Will use it!

romannebesny commented Sep 16, 2015

Thanks! Will use it!

@JAC2703

This comment has been minimized.

Show comment
Hide comment
@JAC2703

JAC2703 commented Oct 2, 2015

+1

@dhwang

This comment has been minimized.

Show comment
Hide comment
@dhwang

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.

Show comment
Hide comment
@RobMKR

RobMKR Oct 17, 2016

Thanks a lot man)))

RobMKR commented Oct 17, 2016

Thanks a lot man)))

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 28, 2016

Thanks! Work in ie7, ie8 : )

ghost commented Dec 28, 2016

Thanks! Work in ie7, ie8 : )

@andru1989

This comment has been minimized.

Show comment
Hide comment
@andru1989

andru1989 Dec 13, 2017

Thanks man

andru1989 commented Dec 13, 2017

Thanks man

@john-doherty

This comment has been minimized.

Show comment
Hide comment
@john-doherty

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