Skip to content

Instantly share code, notes, and snippets.

@mikedugan

mikedugan/vertical-text.css

Forked from obenjiro/vertical-text.css
Created November 29, 2013 22:26
Download ZIP

Revisions

  1. Michael Dugan revised this gist Jan 4, 2014. No changes.
  2. @AiBoy AiBoy revised this gist Nov 11, 2013. 2 changed files with 33 additions and 16 deletions.
    26 changes: 15 additions & 11 deletions vertical-text.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,7 @@
    /**
    * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
    * Example: http://jsfiddle.net/MTyFP/66/embedded/result/
    * Example: http://jsbin.com/afAQAWA/2/
    */

    .rotated-text {
    display: inline-block;
    overflow: hidden;
    @@ -11,26 +10,31 @@
    .rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    -webkit-transform: translate(50%,0) rotate(90deg);
    -moz-transform: translate(50%,0) rotate(90deg);
    -o-transform: translate(50%,0) rotate(90deg);
    transform: translate(50%,0) rotate(90deg);
    /* 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;
    /* IE 9+ */
    /* IE9+ */
    -ms-transform: none;
    -ms-transform-origin: none;
    /* IE 8+ */
    /* IE8+ */
    -ms-writing-mode: tb-rl;
    /* IE7 and below */
    *writing-mode: tb-rl;
    *writing-mode: tb-rl;
    }
    /* This element stretches the parent to be square
    by using the mechanics of vertical margins */
    .rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
    }

    /* mininless css that used just for this demo */
    .container {
    float: left;
    }
    23 changes: 18 additions & 5 deletions vertical-text.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,18 @@
    <div class="container">
    <div class="rotated-text">
    <span class="rotated-text__inner">Normal</span>
    </div>
    </div>
    <!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>
  3. @AiBoy AiBoy renamed this gist Nov 11, 2013. 1 changed file with 0 additions and 0 deletions.
    0 v-test.html → vertical-text.html
    View file
    File renamed without changes.
  4. @AiBoy AiBoy renamed this gist Nov 11, 2013. 1 changed file with 0 additions and 0 deletions.
    0 test.html → v-test.html
    View file
    File renamed without changes.
  5. @AiBoy AiBoy revised this gist Nov 11, 2013. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="container">
    <div class="rotated-text">
    <span class="rotated-text__inner">Normal</span>
    </div>
    </div>
  6. @AiBoy AiBoy revised this gist Nov 11, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion vertical-text.css
    View file
    Original file line number Diff line number Diff line change
    @@ -19,9 +19,10 @@
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    /* IE 8+ */
    /* IE 9+ */
    -ms-transform: none;
    -ms-transform-origin: none;
    /* IE 8+ */
    -ms-writing-mode: tb-rl;
    /* IE7 and below */
    *writing-mode: tb-rl;
  7. @AiBoy AiBoy created this gist Nov 11, 2013.
    35 changes: 35 additions & 0 deletions vertical-text.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    /**
    * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
    * Example: http://jsfiddle.net/MTyFP/66/embedded/result/
    */

    .rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
    }
    .rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    -webkit-transform: translate(50%,0) rotate(90deg);
    -moz-transform: translate(50%,0) rotate(90deg);
    -o-transform: translate(50%,0) rotate(90deg);
    transform: translate(50%,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    /* IE 8+ */
    -ms-transform: none;
    -ms-transform-origin: none;
    -ms-writing-mode: tb-rl;
    /* IE7 and below */
    *writing-mode: tb-rl;
    }
    /* This element stretches the parent to be square
    by using the mechanics of vertical margins */
    .rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
    }