Along with normal text support, Storyboard also supports the use of rich text. The rich text render extension allows the user to use a set of HTML/XML tags to define the text formatting.
Table 15.1. Supported Rich Text Tags
| DESCRIPTION | TAG | OPTIONS |
|---|---|---|
| Paragraph | <p> </p> | None |
| Span | <span> </span> | None |
| Text Color | <p style="color:red;">This is a paragraph.</p> or <p style="color:#FF0000;">This is a paragraph.</p> | None |
| Text Alignment | <p style="text-align:center;">Centered paragraph.</p> | None |
| Font file specify (local file only, truetype fonts only) | <style> @font-face { font-family: roboto-bold; src: url('file:fonts/roboto_bold.ttf') } </style> |
|
| Font Family | <p style="font-family:roboto-bold;">This is a paragraph.</p> | None |
| Font Size (point size syntax only) | <p style="font-size:24px;">This is a paragraph.</p> | None |
| Ordered Lists | <ol> </ol> | None |
| Unordered Lists | <ul> </ol> | None |
| List Items | <li> </li> | None |
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>