Vertical text using pure CSS is inconsistent across browsers

Question

I started my code based on this example: https://gist.github.com/aiboy/7406727

I don't want the 90 degree variant but the 270 degree, so reading direction running from bottom to top.

In IE11 the text runs from top to bottom. In Chrome it runs from bottom to top, however, it's then displayed outside the wrapping container.

How can I get this to work in FireFox, Chrome and IE8-IE11?

<style type="text/css">
.text-container {
    float: left;
}

.rotated-text {
    display: inline-block;
    background-color:red;
    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(270deg);
       -moz-transform: translate(1.1em,0) rotate(270deg);
         -o-transform: translate(1.1em,0) rotate(270deg);
            transform: translate(1.1em,0) rotate(270deg);
    -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%;
}
</style>



<div class="text-container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
</div>

Read this [link](https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx) — Guarana, Apr 24 '15 at 22:02
That is IE specific...I'm looking for cross-browser compatibility here :) — Adam, Apr 24 '15 at 22:03

score 1 · Accepted Answer · answered Apr 25 '15 at 00:20

My solution isn't purely CSS since it requires a little HTML restructuring, but what I would do is rotate 90º around the top left origin, then rotate an inner container 180º around the center. This covers Chrome, Firefox, Safari, and looks like you know what to do with IE already.

http://jsfiddle.net/nwduefdz/

HTML:

<div id="outer">
    <div id="inner">Vertical text, bottom to top!</div>
</div>

CSS:

#outer {
    background-color: red;
    color: white;
    line-height: 1em;
    padding: .5em;
    -webkit-transform: translateX(2em) rotate(90deg);
    -moz-transform: translateX(2em) rotate(90deg);
    -ms-transform: translateX(2em) rotate(90deg);
    transform: translateX(2em) rotate(90deg);
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    float: left;
}
#inner {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Vertical text using pure CSS is inconsistent across browsers

1 Answers1