Along with standard text support, Storyboard also supports the use of rich text. The rich text render extension allows the user to use a subset of HTML/XML tags to define the text formatting.
Table 1. Supported Rich Text Tags
| NAME | DESCRIPTION | TAG | OPTIONS |
|---|---|---|---|
| Paragraph | The <p> tag specifies a paragraph. | <p> </p> | style - Set of attributes that define how to style the text. |
| Span | The <span> tag is used for styling text. | <span> </span> | style - Set of attributes that define how to style the text. |
| Bold | The <b> tag specifies bold text. | <b> </b> | None |
| Italic | The <i> tag specifies italic text. | <i> </i> | None |
| Underline | The <u> tag specifies underlined text. | <u> </u> | None |
| Break | The <br> tag specifies a line break. | <br> or </br> | None |
| Non-Breaking Text | The <nobr> tag specifies text that can't break. | <nobr> </nobr> | None |
| Font File | This is used to specify a font face for a font family (local file only, truetype fonts only). | <style> @font-face { font-family: roboto-bold; src: url('file:fonts/roboto_bold.ttf') } </style> |
|
| Ordered Lists | The <ol> tag is used to define an ordered list. | <ol> </ol> | style - Set of attributes that define how to style the list. |
| Unordered Lists | The <ul> tag is used to define an unordered list. | <ul> </ul> | style - Set of attributes that define how to style the list. |
| List Items | The <li> tag is used to specify a list item. | <li> </li> | None |
Table 2. Supported Style Attributes
| NAME | DESCRIPTION | ATTRIBUTE NAME | PARAMETERS |
|---|---|---|---|
| Text Color | The color attribute specifies the color of the text. | <p style="color:red;">This is a paragraph.</p> or <p style="color:#FF0000;">This is a paragraph.</p> | Color can be a color name (ie. "red", "blue") or a hex value (ie. "#FF0000") |
| Background Color | The background-color attribute specifies the color of the background behind the text | <p style="background-color:red;">This is a paragraph.</p> or <p style="background-color:#FF0000;">This is a paragraph.</p> | Color can be a color name (ie. "red", "blue") or a hex value (ie. "#FF0000") |
| Text Alignment | The text-align attribute specifies the alignment of the text block. | <p style="text-align:left">Left Aligned </p> |
|
| Vertical Alignment | The vertical-align attribute specifies the vertical alignment of the text with it's line. | <p style="vertical-align:top;">Top Aligned</p> |
|
| Font Family | The font-family attribute specifies the font family to use. | <p style="font-family:roboto-bold;">This is a paragraph.</p> | Name of the font family to use. |
| Font Size | The font-size attribute specifies the size of the font. | <p style="font-size:24px;">This is a paragraph.</p> | Text font size, point size syntax only. |
| Left Padding | The left-padding attribute specifies the left padding of the list. | <ol style="left-padding:0"> | Number of tabs to use for list padding. |
Example Rich Text
<style>
@font-face {
font-family: roboto-bold;
src: url('file:fonts/Roboto-Bold.ttf')
}
@font-face {
font-family: light;
src: url('file:fonts/Roboto-Light.ttf')
}
</style>
<p style="text-align:left">Left Aligned </p>
<p style="text-align:right"> Right Aligned </p>
<p style="text-align:center"> Aligned Center </p>
<p> <b> <u> I am Bold </u> </b> <br>I should be on my own line <br>
<i> I am italic </i> This long text should not be broken up. This
long text should not be broken up.This long text should not be
broken up.</p>
<p>
<ol>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ol>
<ul>
<li> item A </li>
<li> item B </li>
<li> item C </li>
</ul>
</p>
<p style="font-family:roboto-bold"> Roboto Bold </p>
<p style="font-family:light"> Roboto Light </p>
<p style="font-size: 50px"> 50px </p>
<p style="text-align:right">right aligned <span style="color:blue">
combined with blue</span></p>
<p style="text-align:center">mixed styles: <span style="font-family
:roboto-bold;color:blue">blue and bold</span> or <span style="color
:green"><i>Green italic</i></span></p>