Chapter 15. Working with Rich Text

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

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>
  1. font-style - Defines how the font should be styled. The values "oblique" and "italic" are treated the same, this specifies the font as italic. Default is "normal".

  2. font-weight - Defines the boldness of the font. Only support value is "bold", otherwise it's treated as "normal"

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

			  @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')
			 <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>
			 <li> item 1 </li>
			 <li> item 2 </li> 
			 <li> item 3 </li> 
				<li> item A </li> 
				<li> item B </li> 
				<li> item C </li> 
			 <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>