Template:Rotate

Template documentation

Usage

This template is for producing rotated text.

Note: The page layout is not adjusted to accommodate the rotated text. For this reason the rotated text may overlap with other elements above and below.

Examples

{| border
|-
| Hello world
| Hello world
| Hello world
|-
| {{rotate| 90|Hello world}}
| {{rotate|-75|Hello world}}
| {{rotate|180|Hello world}}
|-
| Hello world
| Hello world
| Hello world
|-
|}

Hello world	Hello world	Hello world
Hello world	Hello world	Hello world
Hello world	Hello world	Hello world

To prevent rotated text from overlapping other text, you can manually add space for the text to rotate in:

{| border
|height=80px width=80px|{{rotate| 90|Hello world}}
|height=80px width=80px|{{rotate|-90|Hello world}}
|height=80px width=80px|{{rotate|180|Hello world}}
|}

Hello world

Technical notes

This template uses the CSS "-webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg);" to achieve rotation. Older browsers may not see this effect, but it is reported to work on IE 6+, Opera 10.5+, Firefox and Webkit-based browsers like Safari.