Template:Rotate
Jump to navigation
Jump to search
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.
To wrap a block of text (i.e. to use a div tag instead of an in-line span tag), use |ele=div.
See also
[edit]- {{vrl}} - to display vertical paragraphs