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

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>

  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 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>

  1. left - Left justifies text.

  2. center - Center justifies text.

  3. right - Right justifies text.

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>

  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 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>
		
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.