Rich Text Styling and Markup

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

NAMEDESCRIPTIONTAGOPTIONS
ParagraphThe <p> tag specifies a paragraph.<p> </p>style - Set of attributes that define how to style the text.
SpanThe <span> tag is used for styling text.<span> </span>style - Set of attributes that define how to style the text.
BoldThe <b> tag specifies bold text.<b> </b> None
ItalicThe <i> tag specifies italic text.<i> </i> None
UnderlineThe <u> tag specifies underlined text.<u> </u> None
BreakThe <br> tag specifies a line break.<br> or </br>None
Non-Breaking TextThe <nobr> tag specifies text that can't break.<nobr> </nobr>None
Font FileThis 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>
  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"

Ordered ListsThe <ol> tag is used to define an ordered list.<ol> </ol> style - Set of attributes that define how to style the list.
Unordered ListsThe <ul> tag is used to define an unordered list.<ul> </ul>style - Set of attributes that define how to style the list.
List ItemsThe <li> tag is used to specify a list item.<li> </li>None


Table 2. Supported Style Attributes

NAMEDESCRIPTIONATTRIBUTE NAMEPARAMETERS
Text ColorThe 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 ColorThe 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 AlignmentThe text-align attribute specifies the alignment of the text block.<p style="text-align:left">Left Aligned </p>
  1. left - Left justifies text.

  2. center - Center justifies text.

  3. right - Right justifies text.

Vertical AlignmentThe vertical-align attribute specifies the vertical alignment of the text with it's line.<p style="vertical-align:top;">Top Aligned</p>
  1. top - Aligns text at the top of the line.

  2. baseline - Aligns text at the baseline.

  3. bottom - Aligns text at the bottom of the line.

Font FamilyThe 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 SizeThe 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 PaddingThe 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>