Template:Translate/doc

This documentation subpage contains instructions, categories, or other information for Template:Translate. [<Edit> Template:Translate]

[⧼Purge⧽ Template:Translate/doc]

The {{translate}} graphic template translates an element (text, table, image, ...) by offset x, y with unit unit.

Usage

{{translate|element to translate|offset = x, y|unit = unit|origin = x, y|origin unit = origin unit}}

or (default origin unit is %)

{{translate|element to translate|offset = x, y|unit = unit|origin = x, y}}

or (default origin is 50, 50)

{{translate|element to translate|offset = x, y|unit = unit}}

or (default unit is px, center of bounding box of the element is used as reference for translation)

{{translate|element to translate|offset = x, y}}

or (default unit is px, center of bounding box of the element is used as reference for translation)

{{translate|element to translate|x, y}}

or (default offset is 0, 0, i.e. no translation)

{{translate|element to translate}}

Valid input

• offset: offset x, y (default 0, 0, i.e. no translation);
• unit: % or px or pt or pc or em or ex (default px).

• origin: x, y (default 50, 50)
• origin unit: (default %)

By default, center of bounding box of the element is used as reference for translation.

Examples

Examples with valid input

{| align="center" style="text-align: center;"
|- 
| 
<div style="position: relative; width: 100px; height: 100px; background: #f9f9f9; border: 1px solid darkgray; border-radius: 50%;"><!--

  3 6 9 12

--><span style="color: #777; background: #f9f9f9;"><!--
-->{{translate|'''III'''|90 - 4, 50 - 10|unit = px}}<!--
-->{{translate|'''VI '''|50 - 6, 8 - 10|unit = px}}<!--
-->{{translate|'''IX '''|10 - 6, 50 - 10|unit = px}}<!--
-->{{translate|'''XII'''|50 - 8, 90 - 10|unit = px}}<!--

  Hour and minute needles

-->{{translate| {{rotate| {{line|length = 35|color = #777}} | 90 - ( {{#explode:{{LOCALTIME}}|:|0}} ) * 360 / 12 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360.0 / 720 }} |50, 50|unit = px}}<!-- 
-->{{translate| {{rotate| {{line|length = 45|color = #777}} | 90 - ( {{#explode:{{LOCALTIME}}|:|1}} ) * 360 / 60 }} |50, 50|unit = px}}<!--

  Hub

-->{{translate|•|50 - 2, 50 - 9|unit = px}}<!--
--></span><!--
--></div>
'''{{LOCALTIME}}'''
|-
|}

yields

IIIVI IX XII • 16:06

CSS Transforms

Cf. Help:CSS Transforms#CSS Translation.

See also

Drawing templates

• {{Canvas}}

• {{Draw text}}
• {{Image}}

• {{Point}}
• {{Line}}

• {{Square}}
• {{Round square}} ({{rounded corners square}})
• {{Rect}} ({{rectangle}})
• {{Round rect}} ({{rounded corners rectangle}})

• {{Polyline}}
• {{Polygon}} ({{closed polyline}})
• {{Regular polygon}}

• {{Circle}}
• {{Ellipse}}

Affine transforms templates

See Help:CSS Transforms.

• {{Origin}}

• {{Translate}} and {{transform-translate}}
• {{Flip}}
• {{Scale}} and {{transform-scale}}

• {{Rotate}} and {{transform-rotate}}
• {{SkewX}}
• {{SkewY}}
• {{Skew}} and {{transform-skew}}

• {{Affine}} ({{affine matrix}})