v50 Steam/Premium information for editors
  • v50 information can now be added to pages in the main namespace. v0.47 information can still be found in the DF2014 namespace. See here for more details on the new versioning policy.
  • Use this page to report any issues related to the migration.
This notice may be cached—the current version can be found here.

Difference between revisions of "Template:Rotate/doc"

From Dwarf Fortress Wiki
Jump to navigation Jump to search
(documentation)
 
m
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Rotate text (requires CSS3, not supported on old browsers)
+
Rotate content (requires CSS3, not supported on old browsers)
  
Note: text will be rotated around lower-left corner; left-aligned text is recommended.
+
Note: content will be rotated around upper-left corner; left-aligned text is recommended.
  
 
==Usage==
 
==Usage==
  
 +
<nowiki>{{ rotate | [content] | deg = X | style = CSS_string }}</nowiki>
 +
 +
:where:
 +
::[content] is the content to be rotated
 +
::X is an optional clockwise rotation angle in degrees (default is -90 degrees)
 +
::CSS_string is any optional CSS styling to be applied to the rotating container
 +
 +
==Examples==
 
<pre>{{rotate| text }}</pre>
 
<pre>{{rotate| text }}</pre>
 
{{rotate| text }}
 
{{rotate| text }}
  
That example demonstrates how rotated text (at large angles) can overlap text above it  
+
That example demonstrates how rotated text can overlap content around it. Care should be taken to ensure enough empty space for the rotated text.  
  
<pre><div style="position:relative; float:none">{{rotate|text}}</div>
+
<pre>
 +
 
 +
 
 +
{{rotate|text}}
 
</pre>
 
</pre>
 
This example should not overlap, due to the extra newlines:
 
This example should not overlap, due to the extra newlines:
  
  
<div style="position:relative; float:none">{{rotate|text}}</div>
+
{{rotate|text}}
  
Rotating 180 degrees doesn't cause overlapping issues, but it does move the text off the page.
+
Rotating text may also cause the text to extend out of the standard wiki page layout; this should generally be avoided.
 +
 
<pre>{{rotate | text | deg = 180 | style = font-size:25px; }}</pre>
 
<pre>{{rotate | text | deg = 180 | style = font-size:25px; }}</pre>
 
{{rotate | text | deg = 180 | style = font-size:25px; }}
 
{{rotate | text | deg = 180 | style = font-size:25px; }}
  
</noinclude>
+
 
 +
Complex content may also be rotated:
 +
<pre><div style="height:250px;">
 +
:::{{rotate | [[Image:jt_screwpump.png|thumb|A rotated [[screw pump]]]] | deg=27 }}
 +
</div></pre>
 +
<div style="height:250px;">
 +
:::{{rotate | [[Image:jt_screwpump.png|thumb|A rotated [[screw pump]]]] | deg=27 }}
 +
</div>
 +
<includeonly>[[Category:Templates]]</includeonly>
 +
<noinclude>[[Category:Template Documentation]]</noinclude>

Latest revision as of 17:32, 23 July 2013

Rotate content (requires CSS3, not supported on old browsers)

Note: content will be rotated around upper-left corner; left-aligned text is recommended.

Usage[edit]

{{ rotate | [content] | deg = X | style = CSS_string }}

where:
[content] is the content to be rotated
X is an optional clockwise rotation angle in degrees (default is -90 degrees)
CSS_string is any optional CSS styling to be applied to the rotating container

Examples[edit]

{{rotate| text }}

text

That example demonstrates how rotated text can overlap content around it. Care should be taken to ensure enough empty space for the rotated text.



{{rotate|text}}

This example should not overlap, due to the extra newlines:


text

Rotating text may also cause the text to extend out of the standard wiki page layout; this should generally be avoided.

{{rotate | text | deg = 180 | style = font-size:25px; }}

text


Complex content may also be rotated:

<div style="height:250px;">
:::{{rotate | [[Image:jt_screwpump.png|thumb|A rotated [[screw pump]]]] | deg=27 }}
</div>
A rotated screw pump