This site is supported by donations to The OEIS Foundation.
Template:Draw text/doc
From OeisWiki
draw text}} graphic template is used to draw text.
The {{Usage
{{draw text | text = ''text'' | style = ''style'' | center = ''x_0, y_0'' | left = ''left'' | bottom = ''bottom'' | width = ''width'' | height = ''height'' | units = ''units'' | angle = ''angle'' | angle unit = ''angle unit'' }}
where (the origin being at the bottom left of the canvas):
- text is the text to display.
- style is the style to apply to the text.
- center are the (comma separated) coordinates x_0, y_0 of the center of the text box. (0, 0 as default value. The center of the text box is thus at the bottom left of the containing element by default.)
- left is the left of the text box.
- bottom is the bottom of the text box.
- width is the width of the text box. (100 as default, i.e. 100px with default units.)
- height is the height of the text box. (100 as default, i.e. 100px with default units.)
- units are the units used with center, width and height. (px as default.)
- angle is
- angle units defaults to degree.
Examples
Note: In Firefox 22.0, the stroke style seems to allow either none or solid.
Issue: Also, the {{rotate}} template does not currently work, now we only get that small orange blob...
Code | Result | |||
---|---|---|---|---|
{{canvas|width = 500|height = 500|float = right| {{circle|center = 70, 70|radius = 20|units = %|stroke = 2px solid green}} {{circle |200, 250|radius = 100|units = px|stroke = 3px solid orange |content = I'm orange! }} {{draw text | text = Circles galore! | style = | left = 0 | bottom = 0 | units = px }} {{rotate|<!-- -->{{draw text | text = Circles galore! | style = color: green; | left = 0 | bottom = 0 | units = px }}<!-- -->| angle = 45 | angle unit = deg }} {{rotate|<!-- -->{{draw text | text = Circles galore! | style = color: red; | left = 250 | bottom = 250 | units = px }}<!-- -->| angle = 0 | angle unit = deg }} }} |
|
Code
<noinclude>{{Documentation}}</noinclude><includeonly><!-- Usage: {{draw text | text = ''text'' | style = ''style'' | center = ''x_0, y_0'' | width = ''width'' | height = ''height'' | units = ''units'' | angle = ''angle'' | angle unit = ''angle unit'' }} where the origin is at the bottom left of the canvas. --><!-- Note: Webkit only allows the transform of block elements, not inline elements. Using display: inline-block; in the style of an inline element, like <span>...</span>, makes it a block element, although inline. -->{{rotate|<span style{{=}}"display: inline-block; position: absolute; left: {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |0}} ) - ( ( {{{width|100}}} ) / 2 ) }}{{{units|px}}}; bottom: {{#expr: ( {{#explode:{{{center|{{{1|0, 0}}}}}}|, |1}} ) - ( ( {{{height|100}}} ) / 2 ) }}{{{units|px}}}; width: {{#expr: {{{width|100}}} }}{{{units|px}}}; height: {{#expr: {{{height|100}}} }}{{{units|px}}}; background: none; border: none; vertical-align: middle; text-align: center; overflow: auto; {{{style|}}}">{{{text|}}}</span>| {{{angle|0}}} | angle unit = {{{angle unit|degree}}} }}<!-- --></includeonly>
See also
Drawing templates
- {{Canvas}}
- {{Square}}
- {{Round square}} ({{rounded corners square}})
- {{Rect}} ({{rectangle}})
- {{Round rect}} ({{rounded corners rectangle}})
- {{Polyline}}
- {{Polygon}} ({{closed polyline}})
- {{Regular polygon}}
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}})