Template:Transform-rotate
Author : Ch. Reyansh Singh
The Transform-rotate Template.
Overview
The Transform-rotate Template is an extensively useful template, that can Rotate any Text, Picture/Photo Media at any angle you want. It can also Rotate <div> tags" and others as well as Tables (Wikitables) in any angle wanted, but with a few limitations.
Point to be noted
- Use only numerical value, in the syntax (e.g. 20/40/90/120 etc.) and don't use the Degrees sign (°) and also don't use )Deg or )Degree etc.
- Also don't try to apply radian measures for angles, won't support; Just type numerical value: It would automatically be converted into Degree meausurements.
- Always use this template under a <div> tag, it also supports under <span> tags but has a lot of limitations there, <div> tags are much preferable.
Origin
As while completing the book Jat Prachin Shasak (Hindi, 1982) by Sir. B. S. Dahiya, I found there's a need to rotate the Table-text (or tabular-text) which I was unable to, due to which I researched a whole day and thus created this useful Template. See Jat Prachin Shasak/Parishisht-2. However Wikimedia claims it is limited to rotate Tabular data, but I did it.
| Type this format in order to apply this Template to rotate text. |
|---|
<div style="{{Tfr|(Angle in numerical value)}};">(Text)</div>
|
Examples of Text rotation.
| Experiment No. | Syntax | Results |
|---|---|---|
| ||
| 1. | <div style="{{Tfr|10}};">0</div> <div style="{{Tfr|20}};">1</div> <div style="{{Tfr|30}};">2</div> <div style="{{Tfr|40}};">3</div> <div style="{{Tfr|50}};">4</div> <div style="{{Tfr|60}};">5</div> <div style="{{Tfr|70}};">6</div> <div style="{{Tfr|80}};">7</div> <div style="{{Tfr|90}};">8</div> <div style="{{Tfr|100}};">9</div> <div style="{{Tfr|110}};">10</div> <div style="{{Tfr|120}};">§</div>
|
0 1 2 3 4 5 6 7 8 9 10 §
|
| 2. | <div style="{{Transform-rotate|90}}">5</div> <div style="{{Transform-rotate|180}}">5</div> <div style="{{Transform-rotate|270}}">5</div> <div style="{{Transform-rotate|360}}">5</div>
|
5 5 5 5
|
| ||
| 3. | <div style="font-size: 1.4em; {{Transform-rotate|0}}">∫</div> <div style="font-size: 1.4em; {{Transform-rotate|20}}">∫</div> <div style="font-size: 1.4em; {{Transform-rotate|40}}">∫</div> <div style="font-size: 1.4em; {{Transform-rotate|60}}">∫</div>
|
∫ ∫ ∫ ∫
|
| ||
| 4. | <div style="{{Transform-rotate|90}}">This text<br />is vertically<br />aligned.</div><br /> <br /><div style="{{Transform-rotate|180}}">This text is upside down.</div>
|
This text is vertically aligned. This text is upside down.
|
| ||
| ||
| 5. (Anti-clockwise) |
<div style="{{Transform-rotate|-90}}">This text<br />is vertically<br />aligned.</div>
|
This text
is vertically aligned. |
| 6. | <div style="{{Transform-rotate|270}}">This text<br />is vertically<br />aligned.</div>
|
This text
is vertically aligned. |
| ||
| 7. | <div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>[[Jats]] of [[Huna]] clan defeated [[Sassanians]] several times. A fact well-known. [[Henga]] [[Jats]] of today are there representatives.
|
Jats of Huna clan defeated Sassanians several times. A fact well-known. Henga Jats of today are there representatives. |
Image rotation (Media Rotation)
| General Syntax. | <div style="position:relative; top:0px; left:0px; {{Transform-rotate|{{{angle in numerical}}}|display=block}}">[[file:{{{File Name}}}|{{{size}}}px]]</div> | |
|---|---|---|
| Experiment No. | Syntax | Results |
| 1. | <div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[File:Raja Kulichand Hanga.jpeg|35px]]</div> |  |
| 2. | <div style="position:relative; top:0px; left:0px; {{Transform-rotate|75|display=block}}">[[File:Deokaran Jat.jpeg|35px]]</div> |  |
| 3. | <div style="position:relative; top:0px; left:0px; {{Transform-rotate|180|display=block}}">[[File:Phromo kesaro coin with victory legend.jpg|35px]]</div> |  |
Limitations and Tabular rotation.
The tabular rotation is a tricky mess, but it's possible, by the correct (number of) combination(s) of <br /> (Line breaker), it can be rotate.
| Type this format in order to apply this Template to rotate Tabular Data. | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| <center><div style="height: auto; width:80%; overflow: auto; padding: 3px; reflist4" > <div style="{{Tfr|-90}}; padding: auto; padding: auto; height:auto; "> {| class="wikitable" style="margin:1em auto 1em auto; text-align:Center;" |+ <center>Title/Heading</center> |- | {| class="wikitable" style="margin:1em auto 1em auto; text-align:Center;" ! colspan=2 | Heading |- | Content 1 (a) | Content 1 (b) (#if & so on.) |- | Content 2 (a) | Content 2 (b) |- | colspan=2 | & so-on. |- |} </div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> |- |}</div></center> |- | * For more, on how to perfectly rotate tabular data, See [https://www.jatland.com/w/index.php?title=Jat_Prachin_Shasak/Parishisht-2&action=edit Source of Jat Prachin Shasak/Parishisht-2.] It can also guide you. |} | |||||||||
| |||||||||
| |||||||||
| |||||||||
Explanations and Guide.
- As when we use this Template it generally only rotates the text regardless of the dimensions of the page. To make the text fall in in middle, I preferred using <br /> (Line breakers); adding it before and after the text (Table, as shown in Syntax) in correct sequence helps to sustain the text within the page dimensions.
- This brings us another problem as the <br /> (Line breakers) while rotated vertically make the table's width (or rotated height) large enough to exceed the width of the page, for this other <div> tag' such as <div style="height: auto; width:80%; overflow: auto; padding: 3px; reflist4" > has been added there in the Syntax, which provides solution to such issue by making a moving toggle thus bending the extra-length of the Table.
- And thus we can successfully rotate Tabular data.
- If there are any suggestions regarding an edit, please put them on my talk page.