Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0in;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
Goal:
Rotating text using
css only.
How:
Surprisingly IE supports this feature rather well. You could use property filters in IE, but since this is only supported on IE browsers, I would not recommend it.
CSS3, still in proposal state, has a "writing-mode" property for doing this. It has been part of IE's browser engine since IE5.5. Now that it is part of the CSS3 draft specification, would be the best way
to implement this going forward.
Webkit based browsers; Firefox 3.5+, Opera 11 and IE9 implement this feature differently by utilizing the transform property.
Without using third-party JavaScript or
CSS properties, we can use the CSS3 "writing-mode" property, supported from IE5.5 up
to IE8, the latter adding addition formatting options through -ms extensions.
<style type="text/css">
.rightToLeft{ writing-mode: tb-rl; }
</style>
<p class="rightToLeft">This is my text</p>
This will rotate the text 90 degrees, starting from the right
to the left.
Here are all the options:
· lr-tb – Default value, left
to right, top
to bottom
· rl-tb – Right
to left, top
to bottom
· tb-rl – Vertically; top
to bottom, right
to left
· bt-rl – Vertically; bottom
to top, right
to left
· tb-lr – Available in IE8+: -ms-writing-mode; top
to bottom, left
to right
· bt-lr – Bottom
to top, left
to right
· lr-bt – Left
to right, bottom
to top
What about Firefox, Safari, etc.? The following techniques need
to be used on Webkit browsers like Firefox, Opera 11, Google Chrome and IE9. These browsers require their proprietary vendor extensions: -moz-, -webkit-, -o- and -ms-.
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
