Rotating text using CSS
- by Renso
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);
