Template:Transform-rotate/doc

From PS:1 Wiki Dev
Jump to navigationJump to search

{{#if: |

File:Edit-paste.svg This is the template documentation page for Template:Transform-rotate.
This page may not be intended to be viewed directly.
Links using variables may appear broken; do not replace these with hardcoded page names or URLs.

{{#if:x||

}} |{{#ifeq: doc | doc

 | 

{{

   #ifeq: show | show
   | {{
 {{#switch:
 {{#if: 
   | 
   | {{#if: 
     | 
       {{#ifeq:|
       | talk
       |  
       }}
     | 
       {{#ifeq:template|template talk
       | talk
       | template 
       }}
     }}
   }}

| main | = ambox | talk = tmbox | user = ombox | project = ombox | file | image = imbox | mediawiki = ombox | template = ombox | help = ombox | category = cmbox | book = ombox | extension = ombox | other | #default = ombox

}} | type = notice | image = Error creating thumbnail: Unable to save thumbnail to destination | imageright = | class = | style = | textstyle = | text = This is a documentation subpage for Template:Transform-rotate (see that page for the {{#if:

 |{{{text1}}}
 |{{#ifeq:Template | User
   |template template
   |{{#if:Template
     |template
     |article}}
   }}
 }} itself).
It contains usage information, categories, interlanguage links and other content that is not part of the original {{#if: |{{{text2}}} |{{#if: |{{{text1}}} |{{#ifeq:Template | User |template template page |{{#if:Template |template page |article}} }} }}

}}. | small = | smallimage = | smallimageright = | smalltext = | subst = | date = | name = }}

   }}{{
   #if: 
   | 
   | {{#ifeq:Template|Template|}}
 }}

| }} }}Template:Tsh A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

When using this template to create the rotating effect, editors should carefully consider the accessibility.

Examples

The rotating happens at the center of the object and its effective dimensions will retain the original values of the object as if unrotated, so you may adjust the position and padding to avoid unwanted overlapping. Use the display= parameter to further control positioning.

Syntax Result
  • Some rotated characters:
<syntaxhighlight lang="html">5 5 5 5</syntaxhighlight> 5 5 5 5
  • Some rotated special characters (useful when the font-family has no italic or oblique font):
<syntaxhighlight lang="html"> </syntaxhighlight>
  • Works with numbers, too
<syntaxhighlight lang="html">0 1 2 3 4 5 6 7 8 9</syntaxhighlight> 0 1 2 3 4 5 6 7 8 9
  • Or with arbitrary text
<syntaxhighlight lang="html">This text
is vertically
aligned.

 
This text is upside down.</syntaxhighlight>
This text
is vertically
aligned.

 
This text is upside down.
  • This is a placeholder image, It is rotated 90 degrees clockwise.
<syntaxhighlight lang="html"></syntaxhighlight>
  • This is a red horizontal line drawn across the text at the angle of 30 degree anticlockwise.
<syntaxhighlight lang="html">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</syntaxhighlight>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Serious limitation:

Syntax Result
<syntaxhighlight lang="html">The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.</syntaxhighlight> The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.

TemplateData

Template:TemplateData header

<templatedata> { "params": { "1": { "label": "Rotation angle", "description": "Positive degrees rotate right, negative values rotate left", "type": "number", "default": "0" }, "display": { "label": "CSS display", "type": "string", "default": "inline-block" } } }</templatedata>

See also:

|{{{2}}} }}{{#if:| |{{{3}}} }}{{#if:| |{{{4}}} }}{{#if:| |{{{5}}} }}{{#if:| |... }}}}

|{{{2}}} }}{{#if:| |{{{3}}} }}{{#if:| |{{{4}}} }}{{#if:| |{{{5}}} }}{{#if:| |... }}}}