Template:Rotate/doc
 | This is a documentation subpage for Template:Rotate. It contains usage information, categories and other content that is not part of the original template page. |
Usage
[edit]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
[edit]{| 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 | Hello world | Hello world |
Technical notes
[edit]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.