WoW:UIOBJECT SimpleHTML: Difference between revisions

From AddOn Studio
Jump to navigation Jump to search
(added note detailing how to set the font for different elements)
Line 1: Line 1:
{{widget}}
{{widget}}
{{Stub/API}}
'''SimpleHTML''' widgets allow display of simple HTML markup as well as standard escape sequences. The two may be combined; if HTML is not valid (not well-formed XHTML), it will be displayed literaly.


==Supported HTML Mode Markup==
==Supported HTML==
If arguments are in square brackets, this means that they are optional.
Unknown tags are ignored completely (must still be well-formed), unknown attributes for known tags are ignored gracefully. All HTML must be inside <tt>&lt;html&gt;&lt;body&gt;</tt> tags to be displayed (and html and body tags must be terminated for HTML to be parsed). SimpleHTML accepts both double and single quotes for specifying parameter values, double quotes are used in examples below.
===Basic elements===
* <tt>&lt;HTML&gt;</tt>
* <tt>&lt;BODY&gt;</tt>
Where the HTML element must be provided and must contain the BODY element.


The BODY element can contain block elements. Anything not contained within a block element is not displayed.
===Supported tags===
; h1, h2, h3, p : Text containers; following optional attributes
:*align - (left, center, right) controls positioning of the text element,
; img : Image, only outside of text containers; following attributes are supported:
:*align - (left, center, right) controls positioning of the image.
:*width - (number) width of image in pixels.
:*height - (number) height of image in pixels.
:*src - (string) image source, for example Interface\Icons\Ability_Ambush
; a : anchor (link only), only displayed inside text containers; following attributes
:*href - (string) link to pass OnHyperLink* widget handlers
;br : line break, no attributes.


===Block elements===
* <tt>&lt;H1 [align="left|center|right"]&gt;</tt>
* <tt>&lt;H2 [align="left|center|right"]&gt;</tt>
* <tt>&lt;H3 [align="left|center|right"]&gt;</tt>
* <tt>&lt;P  [align="left|center|right"]&gt;</tt>
Block elements can contain other block elements, inline elements and plain text.  However other block elements will not be rendered (they will still be checked for valid html).
===Inline elements===
* <tt>&lt;A href="linkId"&gt;</tt>
* <tt>&lt;IMG src="imageSource" [width="x" height="y"]/&gt;</tt>
* <tt>&lt;BR/&gt;</tt>
Inline elements can contain other inline elements and plain text.


===Example===
===Example===
  &lt;HTML>&lt;BODY>
<!-- Mediawiki would insist on taking this literally, so we replaced < with &lt; to force it to display it as code  -->
  &lt;H1>Foo&lt;/H1>
  &lt;html>&lt;body>
  &lt;P>
  &lt;h1>SimpleHTML Demo: Ambush&lt;/h1>
    Bar&lt;BR/>
  &lt;img src="Interface\Icons\Ability_Ambush" width="32" height="32" align="right"/>
    with stripes.
  &lt;p align="center">'You think this hurts? Just wait.'&lt;/p>&lt;br/>&lt;br/>
  &lt;/P>
  &lt;p>Among every ability a rogue has at his disposal,&lt;br/>Ambush is without a doubt the hardest hitting Rogue ability.&lt;/p>
&lt;/BODY>&lt;/HTML>
&lt;/body>&lt;/html>
 
==Colouring Text==
To colour text, use the standard |c notation colour escape sequences.
 
==Using Different Fonts==
It is possible to set different fonts for each HTML element (h1, h2, h3, h4, and p), using:


h1:SetFont()
==Standard escape sequences==
SimpleHTML also supports the usual [[UI Escape Sequences]], which can be used to change font color, or as an alternative syntax to specify hyperlinks.


(see the [[API_FontInstance_SetFont|SetFont documenation]] for more details
==Setting element styles==
It is possible to set different fonts for the text-container elements  (h1, h2, h3, and p), using:
SimpleHTML:SetFont('element', font); -- SimpleHTML:SetFont('h1', GameFontHighlightLarge);
(see the [[API_FontInstance_SetFont|SetFont documenation]] for more details)


You can also define font properties for these elements in your XML files, eg:
You can also define font properties for these elements in your XML files, eg:
 
&lt;SimpleHTML ...>
&lt;FontStringHeader1 inherits="GameFontHighlightLarge"/&gt;
  &lt;FontStringHeader1 inherits="GameFontHighlightLarge"/>
 
&lt;/SimpleHTML>
==Supported Plain Mode Escape Sequences==
 
See [[UI Escape Sequences]]
 
==Also See==
* [[UI Escape Sequences]]

Revision as of 02:30, 5 November 2007

Widget API < SimpleHTML

SimpleHTML widgets allow display of simple HTML markup as well as standard escape sequences. The two may be combined; if HTML is not valid (not well-formed XHTML), it will be displayed literaly.

Supported HTML

Unknown tags are ignored completely (must still be well-formed), unknown attributes for known tags are ignored gracefully. All HTML must be inside <html><body> tags to be displayed (and html and body tags must be terminated for HTML to be parsed). SimpleHTML accepts both double and single quotes for specifying parameter values, double quotes are used in examples below.

Supported tags

h1, h2, h3, p
Text containers; following optional attributes
  • align - (left, center, right) controls positioning of the text element,
img
Image, only outside of text containers; following attributes are supported:
  • align - (left, center, right) controls positioning of the image.
  • width - (number) width of image in pixels.
  • height - (number) height of image in pixels.
  • src - (string) image source, for example Interface\Icons\Ability_Ambush
a
anchor (link only), only displayed inside text containers; following attributes
  • href - (string) link to pass OnHyperLink* widget handlers
br
line break, no attributes.


Example

<html><body>
 <h1>SimpleHTML Demo: Ambush</h1>
 <img src="Interface\Icons\Ability_Ambush" width="32" height="32" align="right"/>
 <p align="center">'You think this hurts? Just wait.'</p><br/><br/>
 <p>Among every ability a rogue has at his disposal,<br/>Ambush is without a doubt the hardest hitting Rogue ability.</p>
</body></html>

Standard escape sequences

SimpleHTML also supports the usual UI Escape Sequences, which can be used to change font color, or as an alternative syntax to specify hyperlinks.

Setting element styles

It is possible to set different fonts for the text-container elements (h1, h2, h3, and p), using:

SimpleHTML:SetFont('element', font); -- SimpleHTML:SetFont('h1', GameFontHighlightLarge);

(see the SetFont documenation for more details)

You can also define font properties for these elements in your XML files, eg:

<SimpleHTML ...>
 <FontStringHeader1 inherits="GameFontHighlightLarge"/>
</SimpleHTML>