WoW:UIOBJECT SimpleHTML - Revision history

Move page script: Move page script moved page UIOBJECT SimpleHTML to WoW:UIOBJECT SimpleHTML without leaving a redirect

2023-08-15T04:49:07Z

Move page script moved page UIOBJECT SimpleHTML to UIOBJECT SimpleHTML without leaving a redirect

← Older revision

Revision as of 04:49, 15 August 2023

Bear: /* Setting element styles */

2020-12-17T05:45:17Z

Setting element styles

Show changes

Bear at 06:53, 14 February 2015

2015-02-14T06:53:31Z

← Older revision		Revision as of 06:53, 14 February 2015
Line 2:		Line 2:
	'''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.		'''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==		''Note: SimpleHTML ''appears'' to have all the methods of [[#FontInstance\|FontInstance]], and they can indeed be used in the same way to set the default font, but they all have an optional first parameter for which element's font to set ("h1", "h2", "p", etc). The Font instance methods are not reflected in the SimpleHTML frame until you SetText on the frame. It also appears that you can only supply the block elements and not the inline elements (ie Hyperlinks cannot be colored a different color). Other than that, see FontInstance for documentation of these methods.''

			== Supported HTML ==
	The following HTML tags are supported:		The following HTML tags are supported:
	; h1, h2, h3, p		; h1, h2, h3, p
	: <code> <(h1\|h2\|h3\|p) [align="(left\|center\|right)"]>...</(h1\|h2\|h3\|p)></code>		: <code><(h1\|h2\|h3\|p) [align="(left\|center\|right)"]>...</(h1\|h2\|h3\|p)></code>
	: Text containers; following optional attributes are supported:		: 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		; img
	:<code><img src="IMAGE_SOURCE" [align="(left\|center\|right)"] [width="NUM"] [height="NUM"] /></code>		:<code><img src="IMAGE_SOURCE" [align="(left\|center\|right)"] [width="NUM"] [height="NUM"] /></code>
	: Image, only outside of text containers; following attributes are supported:		: Image, only outside of text containers; following attributes are supported:
Line 15:		Line 17:
	:*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		; a
	: <code><a href="LINK">TEXT</a></code>		: <code><a href="LINK">TEXT</a></code>
	: anchor (link only), only displayed inside text containers; following attributes are required:		: 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		;br
	: <code> <br /></code>		: <code><br /></code>
	: line break, no attributes.		: line break, no attributes.

	===Well-formed HTML===		=== Well-formed HTML ===
	SimpleHTML will only display text as HTML if it is well-formed; the following conditions and quirks apply:		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.		* Tag names are case insensitive, img and iMg achieve the same result.
Line 30:		Line 32:
	* 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.		* 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.		* Unrecognized tags are ignored entirely, even if they contain known tags inside; unrecognized attributes are ignored.
	* Document content must be enclosed in <code><html><body> </body></html></code> tags.		* Document content must be enclosed in <code><html><body> </body></html></code> tags.

	==Standard escape sequences==		== 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.		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==		== Setting element styles ==
	It is possible to set different fonts for the text-container elements (h1, h2, h3, and p), using [[API_FontInstance_SetFont\|SetFont]]:		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);		SimpleHTML:SetFont('h1', GameFontHighlightLarge);

Line 44:		Line 46:
	</SimpleHTML>		</SimpleHTML>

	==Creation Using Pure LUA==		== Creation Using Pure LUA ==
	Creating a SimpleHTML object using pure LUA is very simple.		Creating a SimpleHTML object using pure LUA is very simple.
	MySimpleHTMLObject = CreateFrame('SimpleHTML');		MySimpleHTMLObject = CreateFrame('SimpleHTML');
Line 53:		Line 55:
	The literal number 11 specifies the size of the font.		The literal number 11 specifies the size of the font.

	==Example==		== 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.		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]]		[[Image:SimpleHTMLExample.png\|thumb\|right\|The finished product]]

WoWWiki>Kmcguire: Added Section 'Creation Using Pure LUA'

2008-11-27T04:39:57Z

Added Section 'Creation Using Pure LUA'

← Older revision		Revision as of 04:39, 27 November 2008
Line 43:		Line 43:
	<FontStringHeader1 inherits="GameFontHighlightLarge"/>		<FontStringHeader1 inherits="GameFontHighlightLarge"/>
	</SimpleHTML>		</SimpleHTML>

			==Creation Using Pure LUA==
			Creating a SimpleHTML object using pure LUA is very simple.
			MySimpleHTMLObject = CreateFrame('SimpleHTML');
			After, the creation of the object you can assign the HTML code to be displayed. But, there is one more required step!
			MySimpleHTMLObject:SetText('<html><body><h1>Heading1</h1><p>A paragraph</p></body></html>');
			For the SimpleHTML object to actual render the HTML code you gave it (or plain text) a font must be set.
			MySimpleHTMLObject:SetFont('Fonts\\FRIZQT__.TTF', 11);
			The literal number 11 specifies the size of the font.

	==Example==		==Example==

WoWWiki>Starlightblunder: /* Well-formed HTML */ split code

2008-03-03T18:39:06Z

Well-formed HTML: split code

← Older revision		Revision as of 18:39, 3 March 2008
Line 3:		Line 3:

	==Supported HTML==		==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 <tt><html><body>~~<~~/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.		The following HTML tags are supported:
			; h1, h2, h3, p
	~~===Overview===~~		: <code> <(h1\|h2\|h3\|p) [align="(left\|center\|right)"]>...</(h1\|h2\|h3\|p)></code>
			: Text containers; following optional attributes are supported:
	<(h1\|h2\|h3\|p) [align=(left\|center\|right)] />

	<~~img src=IMAGE_SOURCE [align=~~(~~left~~\|~~center~~\|~~right~~)~~] [width=NUM] [height=NUM] /~~>

	~~<a href=LINK~~ /~~>~~

	~~<br />~~

	~~===Supported tags===~~
	~~; h1, h2, h3, p~~ : Text containers; following optional attributes
	:*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.

	===~~Example~~===		===Well-formed HTML===
	~~<!-- Mediawiki would insist on taking this literally, so we replaced < with < to force it to~~ display it ~~as code~~ -->		SimpleHTML will only display text as HTML if it is well-formed; the following conditions and quirks apply:
	~~&lt~~;~~html>&lt~~;~~body>~~		* Tag names are case insensitive, img and iMg achieve the same result.
	~~&lt~~;h1>~~SimpleHTML Demo: Ambush~~</h1>		* All tags must be closed; closing tags must match the case of the opening tag; some tags are self-closing (br, img).
	<~~img src="Interface\Icons\Ability_Ambush" width="32" height="32" align="right"~~/>		* Attribute values must be quoted; both double and single quotes are supported.
	<~~p align="center">'You think this hurts? Just wait.'&lt~~;/p><~~br/>&lt~~;br/>		* 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.
	~~&lt~~;p>~~Among every ability a rogue has at his disposal,~~<~~br/~~>~~Ambush is without a doubt the hardest hitting Rogue ability.~~</p>		* 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('element', font); --~~ SimpleHTML:SetFont('h1', GameFontHighlightLarge);		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:
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>

WoWWiki>WoWWiki-Fin: added synopsis of available tags

2007-11-05T02:35:53Z

added synopsis of available tags

@@ Line 4: / Line 4: @@
 ==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 <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.
 ===Supported tags===

WoWWiki>Starlightblunder: /* Standard escape sequences */

2007-11-05T02:30:04Z

Standard escape sequences

← Older revision		Revision as of 02:30, 5 November 2007
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><html><body></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><~~HTML~~>~~</tt>~~
	* <tt><~~BODY~~></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><H1 [align="left\|center\|right"]></tt>
	* <tt><H2 [align="left\|center\|right"]></tt>
	* <tt><H3 [align="left\|center\|right"]></tt>
	* <tt><P [align="left\|center\|right"]></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><A href="linkId"></tt>
	* <tt><IMG src="imageSource" [width="x" height="y"]/></tt>
	* <tt><BR/></tt>
	~~Inline elements can contain other inline elements and plain text.~~

	===Example===		===Example===
	<~~HTML~~><~~BODY~~>		<!-- Mediawiki would insist on taking this literally, so we replaced < with < to force it to display it as code -->
	<H1>~~Foo~~</H1>		<html><body>
	<P>		<h1>SimpleHTML Demo: Ambush</h1>
	~~Bar~~<~~BR/~~>		<img src="Interface\Icons\Ability_Ambush" width="32" height="32" align="right"/>
	~~with stripes~~.		<p align="center">'You think this hurts? Just wait.'</p><br/><br/>
	</P>		<p>Among every ability a rogue has at his disposal,<br/>Ambush is without a doubt the hardest hitting Rogue ability.</p>
	</~~BODY~~></~~HTML~~>		</body></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:
			<SimpleHTML ...>
	<FontStringHeader1 inherits="GameFontHighlightLarge"/>		<FontStringHeader1 inherits="GameFontHighlightLarge"/>
			</SimpleHTML>
	~~==Supported Plain Mode Escape Sequences==~~

	~~See [[UI Escape Sequences]]~~

	~~==Also See==~~
	* [[UI Escape Sequences]]

WoWWiki>WoWWiki-Fin: added note detailing how to set the font for different elements

2007-11-05T01:52:16Z

added note detailing how to set the font for different elements

@@ Line 32: / Line 32: @@
     &lt;/P>
   &lt;/BODY>&lt;/HTML>
 ==Supported Plain Mode Escape Sequences==

WoWWiki>JoshBorke: /* Basic elements */ added display information

2006-09-23T18:12:13Z

Basic elements: added display information

← Older revision		Revision as of 18:12, 23 September 2006
Line 9:		Line 9:
	Where the HTML element must be provided and must contain the BODY element.		Where the HTML element must be provided and must contain the BODY element.

	The BODY element can contain block elements.		The BODY element can contain block elements. Anything not contained within a block element is not displayed.

	===Block elements===		===Block elements===
Line 16:		Line 16:
	* <tt><H3 [align="left\|center\|right"]></tt>		* <tt><H3 [align="left\|center\|right"]></tt>
	* <tt><P [align="left\|center\|right"]></tt>		* <tt><P [align="left\|center\|right"]></tt>
	Block elements can contain other block elements, inline elements and plain text.		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===		===Inline elements===

WoWWiki>Watchout: /* Supported Plain Mode Escape Sequences */

2006-07-16T21:51:41Z

Supported Plain Mode Escape Sequences

@@ Line 1: / Line 1: @@
 {{widget}}
 {{Stub/API}}
-It's very limited, there's 2 modes, HTML mode and plain mode. in HTML mode you have.
+==Supported HTML Mode Markup==
-:&lt;HTML>&lt;BODY>...&lt;/BODY>&lt;/HTML>
+The BODY element can contain block elements.
-I belive the IMG tag can take width and height, also.
+===Block elements===
-In plain mode you have
+===Inline elements===
-:|cRRGGBBAA - Set color
+===Example===
-:|r  - Reset color
+  &lt;HTML>&lt;BODY>
-:|Hlinkid|hlinktext|h - for Hyperlinks
+   &lt;H1>Foo&lt;/H1>
-:Possibly |n as newline in some cases.
+   &lt;P>