Template:Rotate

From Wikisource
Jump to navigation Jump to search
Template documentation


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.