→Well-formed HTML: split code
(added synopsis of available tags) |
(→Well-formed HTML: split code) |
||
| Line 3: | Line 3: | ||
==Supported HTML== | ==Supported HTML== | ||
The following HTML tags are supported: | |||
; h1, h2, h3, p | |||
: <code> <(h1|h2|h3|p) [align="(left|center|right)"]>...</(h1|h2|h3|p)></code> | |||
: Text containers; following optional attributes are supported: | |||
:*align - (left, center, right) controls positioning of the text element, | :*align - (left, center, right) controls positioning of the text element, | ||
; img : Image, only outside of text containers; following attributes are supported: | ; img | ||
:<code><img src="IMAGE_SOURCE" [align="(left|center|right)"] [width="NUM"] [height="NUM"] /></code> | |||
: Image, only outside of text containers; following attributes are supported: | |||
:*align - (left, center, right) controls positioning of the image. | :*align - (left, center, right) controls positioning of the image. | ||
:*width - (number) width of image in pixels. | :*width - (number) width of image in pixels. | ||
:*height - (number) height of image in pixels. | :*height - (number) height of image in pixels. | ||
:*src - (string) image source, for example Interface\Icons\Ability_Ambush | :*src - (string) image source, for example Interface\Icons\Ability_Ambush | ||
; a : anchor (link only), only displayed inside text containers; following attributes | ; a | ||
: <code><a href="LINK">TEXT</a></code> | |||
: anchor (link only), only displayed inside text containers; following attributes are required: | |||
:*href - (string) link to pass OnHyperLink* widget handlers | :*href - (string) link to pass OnHyperLink* widget handlers | ||
;br : line break, no attributes. | ;br | ||
: <code> <br /></code> | |||
: line break, no attributes. | |||
=== | ===Well-formed HTML=== | ||
SimpleHTML will only display text as HTML if it is well-formed; the following conditions and quirks apply: | |||
* Tag names are case insensitive, img and iMg achieve the same result. | |||
* All tags must be closed; closing tags must match the case of the opening tag; some tags are self-closing (br, img). | |||
* Attribute values must be quoted; both double and single quotes are supported. | |||
* Quotes, less/greater than signs, and amperstands must be entity-escaped (<code>&quot;</code> <code>&lt;</code> <code>&gt;</code> <code>&amp;</code>). No other entity-escapes are supported. | |||
* Unrecognized tags are ignored entirely, even if they contain known tags inside; unrecognized attributes are ignored. | |||
</body></html> | * Document content must be enclosed in <code><html><body> </body></html></code> tags. | ||
==Standard escape sequences== | ==Standard escape sequences== | ||
| Line 41: | Line 36: | ||
==Setting element styles== | ==Setting element styles== | ||
It is possible to set different fonts for the text-container elements (h1, h2, h3, and p), using: | It is possible to set different fonts for the text-container elements (h1, h2, h3, and p), using [[API_FontInstance_SetFont|SetFont]]: | ||
SimpleHTML:SetFont('h1', GameFontHighlightLarge); | |||
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: | ||
| Line 49: | Line 43: | ||
<FontStringHeader1 inherits="GameFontHighlightLarge"/> | <FontStringHeader1 inherits="GameFontHighlightLarge"/> | ||
</SimpleHTML> | </SimpleHTML> | ||
==Example== | |||
The following is an example of a combination of HTML markup and [[UI Escape Sequences]], as well as custom element styles; the code below was passed to SimpleHTML:SetText() to generate the image on the right. | |||
[[Image:SimpleHTMLExample.png|thumb|right|The finished product]] | |||
<!-- Mediawiki would insist on taking this literally, so we replaced < with < to force it to display it as code --> | |||
<html><body> | |||
<h1>SimpleHTML Demo: Ambush</h1> | |||
<img src="Interface\Icons\Ability_Ambush" width="32" height="32" align="right"/> | |||
<p align="center">|cffee4400'You think this hurts? Just wait.'|r</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> | |||