Skip to content

Instantly share code, notes, and snippets.

@obenjiro

obenjiro/vertical-text.css

Last active April 4, 2020 20:23
Show Gist options
  • Save obenjiro/7406727 to your computer and use it in GitHub Desktop.
Save obenjiro/7406727 to your computer and use it in GitHub Desktop.
Download ZIP
CrossBrowser Vertical CSS Text
Raw
vertical-text.css
/**
* 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;
}
Raw
vertical-text.html
<!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
Copy link

kmb385 commented Jan 14, 2014

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

@shikio
Copy link

shikio commented Feb 19, 2014

thanks, this CSS is great :D

@psgganesh
Copy link

Thank you :) this saved my day 💯

@benjaminokeefe
Copy link

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

@neo1992
Copy link

neo1992 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?

@anyone1997
Copy link

Thanks! Will use it!

@JAC2703
Copy link

JAC2703 commented Oct 2, 2015

+1

@dhwang
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
Copy link

RobMKR commented Oct 17, 2016

Thanks a lot man)))

Copy link

ghost commented Dec 28, 2016

Thanks! Work in ie7, ie8 : )

@andru1989
Copy link

Thanks man

@john-doherty
Copy link

TY!

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