This site is supported by donations to The OEIS Foundation.

Template:Draw text

From OeisWiki
Jump to: navigation, search
The {{draw text}} graphic template is used to draw text.

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

I'm orange!

Circles galore!

Circles galore!

Circles galore!


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






Affine transforms templates

See Help:CSS Transforms.