Caleb Cooper at 13:53, 11 November 2020

2020-11-11T13:53:54Z

← Older revision		Revision as of 13:53, 11 November 2020
Line 2:		Line 2:
	{{Commons Import}}		{{Commons Import}}
	<!-- Categories and interwikis go at the bottom of this page. -->		<!-- Categories and interwikis go at the bottom of this page. -->
	A shorthanded [[Cascading style sheet\|CSS]] code for horizontally mirroring elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.		A shorthanded [[Wikipedia:Cascading style sheet\|CSS]] code for horizontally mirroring elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.

	*Named Parameter <code>display=</code> allows to change the CSS display property. It defaults to <code>display: inline-block;</code>		*Named Parameter <code>display=</code> allows to change the CSS display property. It defaults to <code>display: inline-block;</code>

	When using this template to create the mirrored effect, editors should consider carefully about the [[WP:accessibility\|accessibility]].		When using this template to create the mirrored effect, editors should consider carefully about the [[Wikipedia:WP:accessibility\|accessibility]].

	''{{A note}} This template does not support IE8 or older browsers. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua\|Lua]].''		''{{A note}} This template does not support IE8 or older browsers. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua\|Lua]].''

Caleb Cooper: Created page with "{{Documentation subpage}} {{Commons Import}} A shorthanded CSS code for horizontall..."

2020-11-11T13:53:23Z

Created page with "{{Documentation subpage}} {{Commons Import}}  A shorthanded CSS code for horizontall..."

New page

{{Documentation subpage}}
{{Commons Import}}

A shorthanded [[Cascading style sheet|CSS]] code for horizontally mirroring elements inside style attribute. Use it inside the <code>style=""</code> attribute of HTML elements like other CSS properties.

*Named Parameter <code>display=</code> allows to change the CSS display property. It defaults to <code>display: inline-block;</code>

When using this template to create the mirrored effect, editors should consider carefully about the [[WP:accessibility|accessibility]].

''{{A note}} This template does not support IE8 or older browsers. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into [[Wikipedia:Lua|Lua]].''

==Examples==
The mirroring happens at the center of the whole object and its effective dimensions will retain the original values of the object as if unmirrored, so you may adjust the position and padding to avoid unwanted overlapping. Use the <code>display=</code> parameter to further control positioning.

{|class=wikitable
!Syntax!!Result
|- style="vertical-align:top;"
|width=50%|<syntaxhighlight lang="html">*Some mirrored characters: A B C D</syntaxhighlight>
<syntaxhighlight lang="html">*Works with numbers, too: 0 1 2 3 4 5 6 7 8 9</syntaxhighlight>

<syntaxhighlight lang="html">*Or with arbitrary text: This text is horizontally mirrored.   This text is not.</syntaxhighlight>
|
*Some mirrored characters: A B C D
*Works with numbers, too: 0 1 2 3 4 5 6 7 8 9
*Or with arbitrary text: This text is horizontally mirrored.   This text is not.

|- style="vertical-align:top;"
|<syntaxhighlight lang="html">This is a placeholder image:</syntaxhighlight>

<syntaxhighlight lang="html"><div style="position:relative; right:350px; {{mirrorH|display=block}}">[[file:placeholder.png|200px]]</div></syntaxhighlight>

<syntaxhighlight lang="html">It is mirrored.</syntaxhighlight>
|This is a placeholder image:

<div style="position:relative; right:350px; {{mirrorH|display=block}}">[[file:placeholder.png|200px]]</div>

It is mirrored.
|}

==See also:==
*{{tl|Transform-rotate}}
*{{tl|mirrorV}}

<includeonly>{{Sandbox other||

[[Category:Cross-browser compatibility templates]]
[[Category:Graphics templates]]
}}</includeonly>

Template:MirrorH/doc - Revision history

Caleb Cooper at 13:53, 11 November 2020

Caleb Cooper: Created page with "{{Documentation subpage}} {{Commons Import}} A shorthanded CSS code for horizontall..."