Template:Rotate

Template documentation[view] [edit] [history] [purge]

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

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.

See also

• {{vrl}} - to display vertical paragraphs

The above documentation is transcluded from Template:Rotate/doc. (edit | history)
Editors can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Add categories to the /doc subpage. Subpages of this template.