< previous

next >

text

<text x='float' 
      y='float' 
      width='float' 
      height='float'  
      rotation='float' 
      font='string' 
      bold='boolean' 
      size='float' 
      align='string' 
      color='string' 
      alpha='int'
      >text to draw</text>

Description

text draws a text.

To draw a text, it's necessary to define a rectangle to draw it in. This rectangle determines the text's location, alignment, and rotation.

• x: The horizontal position of the rectangle's upper left corner relative to the upper left corner of the canvas (0, 0)
  
  
• y: The vertical position of the rectangle's upper left corner relative to the upper left corner of the canvas (0, 0)
  
  
• width: The rectangle's width. The default is 300
  
  
• height: The rectangle's height. The default is 300
  
  
• rotation: The rectangle's rotation around its upper-left point (x, y). The default value is zero
  
  
• font: The font used to draw the text. See the Fonts section below. The default is Arial
  
  
• bold: A boolean value that indicates whether the font is bold or not. The default is false
  
  
• size: The text's size. The default is 12
  
  
• align: The text's horizontal alignment inside the rectangle. Valid values are left, center, and right. The default is left
  
  
• color: The text's color. This must be a string holding triple hexadecimal values representing the red, green, and blue components for a color. The default is "000000" (black)
  
  
• alpha: The text's transparency value. Valid values are 0 (fully transparent) to 100 (fully opaque). The default is 100
  
  

Multi-line Text

To draw multi-line text, break the text with \r. Example: "Show this in\rtwo lines".

Fonts

XML/SWF Gauge has the font Arial bold embedded in it. By setting the above font attribute to Arial, and the bold attribute to true, the embedded font makes the text look identical on all machines, regardless of whether the machine has this font or not. Other advantages of an embedded font is that it can be rotated, and it can be rendered transparently. The disadvantage is that it increases the size of the flash file, the reason why the tool only has one embedded font. (The gallery only uses this font.)

You may set the above font attribute to any other non-embedded font. If the local machine doesn't have the exact font, Flash uses whatever font most closely resembles it. Non-embedded fonts may look different than expected, but can be sharper and more legible than embedded fonts at small point sizes (below 10 points.)

When non-embedded fonts are used, any rotation and alpha attributes are ignored. Text using a non-embedded font is always displayed horizontally, and fully opaque.

One way to display any text without worrying about fonts is by including it as JPEG images or SWF flash files, using the image function.

Special Characters

To display special characters or languages other than English:

1. Type the special characters in the source file, and apply a font to it that can display the characters:

<text  font='special_font' > special_text </text>

Replace special_font with the name of a font that can display the special characters. This must be a font other than Arial, and the font name must be typed exactly the way it is referred to by the operating system. Replace special_text with the text containing the special characters. The special characters must appear correctly here.

2. Save the source file with UTF-8 encoding.

3. View the gauge on a machine that has the same special font already installed.

Example

	
<gauge>

   <!-- draw multi-line, red text -->	
   <text x='50' 
         y='50' 
         width='200' 
         height='200'  
         align='left' 
         rotation='0' 
         size='30' 
         color='ff0000' 
         alpha='100'
         >Line 1\rLine 2\rLine 3</text>	
 
   <!-- draw a green text -->	
   <text x='100' 
         y='75' 
         width='200' 
         height='200'  
         align='left' 
         rotation='10' 
         size='50' 
         color='00ff00' 
         alpha='75'
         >GREEN</text>

</gauge>
	

< previous

next >