Template:Origin/doc

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

[⧼Purge⧽ Template:Origin/doc]

The {{origin}} graphic template sets the origin offset of an element (text, table, image, ...) used by affine transformation templates:

{{translate}}, {{rotate}}, {{scale}}, {{skew}}, {{affine}} ({{affine matrix}}).

Usage

Using keywords: (default "center center")

{{origin|element|offset = left/center/right top/center/bottom}}

Using units: (i.e. center of bounding box of element as default)

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

or (default unit is %)

{{origin|element|offset = x, y}}

or (default offset is 50, 50)

{{origin|element}}

Valid input

By default, center of bounding box of element is used as origin.

Using keywords: (default "center center")

• offset: left/center/right top/center/bottom

Using units: (i.e. center of bounding box of element as default)

• offset: x, y (default "50, 50")
• unit: % or px or cm or mm or in or pt or pc or em or ex (default "%")

Examples

Examples with valid input

<span style="background: yellow;">Welcome</span>

yields

 Welcome

and

{{rotate|<span style="background: yellow;">Welcome</span>|45}}

yields

 45

and

{{origin|<span style="background: yellow;">Welcome</span>|offset = 50, 50|unit = %}}

yields

 

and

{{rotate|{{origin|<span style="background: yellow;">Welcome</span>|offset = 50, 50|unit = %}}|45}}

yields

 

and

<span style="background: green;">Welcome</span>

yields

 Welcome

and

{{rotate|<span style="background: green;">Welcome</span>|45}}

yields

 45

and

{{origin|<span style="background: green;">Welcome</span>|offset = left bottom}}

yields

 

and

{{rotate|{{origin|<span style="background: green;">Welcome</span>|offset = left bottom}}|45}}

yields

 

CSS Transforms

Cf. Help:CSS Transforms.

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}})