Help markup - Revision history

Bssarkar at 09:04, 7 August 2025

2025-08-07T09:04:19Z

Bssarkar: Move old markup info here from HelpWML

2025-08-07T09:03:54Z

Move old markup info here from HelpWML

Celtic Minstrel: /* Tags */

2025-04-16T05:51:54Z

‎Tags

Bssarkar: /* Image Tags */ Mention IPF support

2025-04-13T05:56:10Z

‎Image Tags: Mention IPF support

Celtic Minstrel: /* Formatting Tags */ Fix copy-paste

2025-04-12T18:26:17Z

‎Formatting Tags: Fix copy-paste

Bssarkar: /* Table Tags */ Update padding info

2025-04-12T17:10:03Z

‎Table Tags: Update padding info

Bssarkar: /* Specific Tags */ info for bgcolor

2025-04-12T17:04:44Z

‎Specific Tags: info for bgcolor

Bssarkar: /* Specific Tags */ Add more info about span attributes

2025-04-12T17:04:01Z

‎Specific Tags: Add more info about span attributes

Bssarkar: /* Table Tags */

2025-04-12T16:59:42Z

‎Table Tags

Celtic Minstrel: /* Image Tags */ Clarification

2025-04-12T15:54:11Z

‎Image Tags: Clarification

← Older revision		Revision as of 09:04, 7 August 2025
Line 104:		Line 104:

	== Help Markup (Pre 1.19) ==		== Help Markup (Pre 1.19) ==
−
−	~~== Help System Topic Markup ==~~

	The markup that is allowed in the text key within a topic tag is in a WML-like markup language with angle brackets.		The markup that is allowed in the text key within a topic tag is in a WML-like markup language with angle brackets.

@@ Line 1: / Line 1: @@
-== Help Markup ==
+== Help Markup (1.19+) ==
-This page documents the markup used by the [[GUIWidgetInstanceWML#Rich_Label|Rich Label]] widget. This is a markup language based on the [[InterfaceActionsWML#Formatting|Pango markup]] already being used by other GUI2 widgets to show formatted text, combined with features of the earlier GUI1 help markup. Specifically, you can add links, tables and images (inline and floating) alongside formatted text.
+This page documents the new markup used by the [[GUIWidgetInstanceWML#Rich_Label|Rich Label]] widget. This is a markup language based on the [[InterfaceActionsWML#Formatting|Pango markup]] already being used by other GUI2 widgets to show formatted text, combined with features of the earlier GUI1 help markup. Specifically, you can add links, tables and images (inline and floating) alongside formatted text.
 Both GUI1 style syntax (<code><img>src='path/to/myimage.png'</img></code>) and newer HTML style syntax (<code><img src='path/to/myimage.png'/></code>) are supported. The new syntax is recommended. The internal parser doesn't support nested tags when using the old syntax.
@@ Line 101: / Line 101: @@
      </row>
 </table>
 </syntaxhighlight>

@@ Line 8: / Line 8: @@
 The form of a tag roughly follows HTML, with one significant exception – standalone tags with no content must have a slash before the closing angle bracket. Since the markup language is usually embedded in WML, which uses double quotes, it's recommended to use single quotes in the markup for attribute values. The quotes are optional when the value contains no spaces, however.
-The old GUI1 tag style places the attributes inside the tag contents, instead of in the tag header (ie, after the &gt; instead of before it). This format is not compatible with Pango and is thus not recommended.
+The old GUI1 tag style places the attributes inside the tag contents, instead of in the tag header (ie, after the &gt; instead of before it). This format is not compatible with Pango markup and is thus not recommended.
 Tags can be nested arbitrarily deep, as long as only the HTML-style syntax is used.

@@ Line 59: / Line 59: @@
 === Image Tags ===
 * '''img:''' Inserts an image, whose path is specified by the ''src'' attribute.
-** '''src:''' WML path of the image to be shown, i.e., <code>units/drakes/armageddon.png</code>
+** '''src:''' WML path of the image to be shown, i.e., <code>units/drakes/armageddon.png</code>. [[ImagePathFunctions|IPFs]] are also supported here.
 ** '''float:''' Whether the image is to be shown as a floating image anchored to the current line with text wrapped around it or as an inline image block between paragraphs. Inline mode is default.
 ** '''align:''' Horizontal alignment of the image with respect to the page. Supported values: ''left'' (default), ''right'' or ''middle/center''. Only supported for ''floating images''.

@@ Line 51: / Line 51: @@
 ** '''face/font_family''': Supported values: ''monospace'', ''script''; sans-serif if not specified (default).
 ** '''size/font_size''': Must be an integer. (differs from Pango)
-** '''color/fgcolor/foreground''': Can be a hex string <code>#rrggbb</code> that specifies the background color of the row, or a color name recognized by [https://devdocs.wesnoth.org/namespacefont.html#a46b1dd20153d50539ddd4b9cfc4c541a '''font::string_to_color'''].
+** '''color/fgcolor/foreground''': Can be a hex string <code>#rrggbb</code> that specifies the color of the text, or a color name recognized by [https://devdocs.wesnoth.org/namespacefont.html#a46b1dd20153d50539ddd4b9cfc4c541a '''font::string_to_color'''].
-** '''bgcolor/background''': Can be a hex string <code>#rrggbb</code> that specifies the background color of the row, or a color name recognized by [https://devdocs.wesnoth.org/namespacefont.html#a46b1dd20153d50539ddd4b9cfc4c541a '''font::string_to_color'''].
+** '''bgcolor/background''': Can be a hex string <code>#rrggbb</code> that specifies the background color of the text, or a color name recognized by [https://devdocs.wesnoth.org/namespacefont.html#a46b1dd20153d50539ddd4b9cfc4c541a '''font::string_to_color'''].
 ** '''weight''': Supported values are ''thin'', ''light'', ''normal'' (default), ''semibold'', ''bold'', ''heavy''. Depends on selected font family.
 ** '''style''': Supported values are ''italic'', ''oblique'', ''normal'' (default). Depends on selected font family.

@@ Line 81: / Line 81: @@
 ** '''row: ''' (subtag) Contains the contents of a row, which are one or more columns.
 *** '''bgcolor: ''' (optional) A hex string <code>#rrggbb</code> that specifies the background color of the row, or a color name recognized by [https://devdocs.wesnoth.org/namespacefont.html#a46b1dd20153d50539ddd4b9cfc4c541a '''font::string_to_color'''], or any color names defined in '''[rich_label_definition][resolution][colors]''', like [https://github.com/wesnoth/wesnoth/blob/8aa18fcd8e945ffedad86456b8d90b33883413ca/data/gui/themes/default/widgets/rich_label_default.cfg#L31-L35 here].
-*** '''padding: ''' (optional) Two numbers separated by space <code>10 10</code>. The first is the top padding while the second is the bottom padding. These are applied to the whole row.
+*** '''padding: ''' (optional) One number or two numbers separated by space <code>10 10</code>. The first is the top padding while the second is the bottom padding. If only one number if specified, it's used for both top and bottom padding. These are applied to the whole row.
 *** '''valign: ''' (optional) Vertical alignment of the row contents. Allowed values: '''bottom''', '''center'''/'''middle'''. If value is not specified or is wrong, aligns to center instead.
 *** '''col: ''' (subtag) Contains the contents of a column, which can be any tag mentioned earlier, such as formatting tags, image tag, links and so on.
-**** '''padding: ''' (optional) Two numbers separated by space <code>10 10</code>. The first is the left padding while the second is the right padding. This is applied to the cell.
+**** '''padding: ''' (optional) One number or two numbers separated by space <code>10 10</code>. The first is the left padding while the second is the right padding. If only one number if specified, it's used for both left and right padding. This is applied to the cell.
 **** '''halign: ''' (optional) Horizontal alignment of the cell. Allowed values: '''right''', '''center'''/'''middle''', '''left'''. If value is not specified or is wrong, aligns to left instead.

@@ Line 63: / Line 63: @@
 ** '''align:''' Horizontal alignment of the image with respect to the page. Supported values: ''left'' (default), ''right'' or ''middle/center''. Only supported for ''floating images''.
-* '''clear:''' When just after a floating images, moves text below it instead of the text wrapping around the image.
+* '''clear:''' When just after a floating images, moves text below it instead of the text wrapping around the image. This tag contains no content, so it can be written as <code><clear/></code>.
 '''Note:'''