Defining Your App’s Style with Active Rich Text

Native SDK Development

Guest post from Erin Rahnenfuehrer. – Ed.

ActiveRichTextPic1

Everyone has their own personal style. The way you choose to present yourself is one of the ways you communicate to others.

The same holds true for your app. The stylistic choices that you make when designing your app convey a message to the end user. Through colours, fonts, and layout, your app has a specific “look and feel” that users come to expect. This is your brand, and every product for sale today is designed with this in mind.

To fully express your app’s style, and to reinforce your brand, you may need a more granular level of control over how text is displayed. In order to help developers style their apps the Cascades Label, TextField, and TextArea controls support active rich text.

Supported elements

Cascades supports a strict subset of XHTML:

Element Description Comments
<a> A hyperlink The href and style attributes are supported. Links must be fully qualified with “http://” or “https://”
<b> Instruction to render text in bold style
<br/> Line break Inserts a forced line break character: a carriage return (U+000C).
<i> Instruction to render text in italic style
<span> Generic way to add structure to content The style attribute is supported; used for CSS styles (see below)
<p> A paragraph: paragraph breaks are forced before and after it. The style attribute is supported; used for CSS styles
<div> A section: paragraph breaks are forced before and after it. The style attribute is supported; used for CSS styles
<em> Emphasize text Implemented using italics
<strong> Use a strong style Implemented using bold face

Common attributes

The common attributes style, lang, and xml:lang are supported for all XHTML elements. The lang and xml:lang attributes are used to specify a language tag, which is identical to a standard locale string like en or zh_CN.

Character entities

The following character entities are supported:

  • #number
  • #xNumber
  • lt
  • gt
  • amp
  • quot
  • apos
  • nbsp
  • iexcl
  • pound
  • yen
  • brvbar
  • section
  • copy
  • ordf
  • laquo
  • not
  • shy
  • reg
  • deg
  • micro
  • ordm
  • raquo
  • iquest
  • bull
  • prime
  • trade
  • ndash
  • mdash
  • lsquo
  • rsquo
  • sbquo
  • ldquo
  • rdquo
  • bdquo
  • euro

Interpretation of the style attribute

HTML allows the use of CSS to style text. All styles must be specified in-line using the style attribute.

<span style="font-weight:bold;color:red;">Here's some bold red text!</span>

The following CSS properties are supported:

Property Values Description
background-color <color> (Supports 147 standard color names as well as rgb(n,n,n), rgba(n,n,n,n), hsl(n,n,n), hsla(n,n,n,n) and #NNNNNN) Sets the background color of an element
color <color> (Supports 147 standard color names as well as rgb(n,n,n), rgba(n,n,n,n), hsl(n,n,n), hsla(n,n,n,n) and #NNNNNN) Sets the color of text
direction [ ltr | rtl ] Specifies the base paragraph direction
font-size [ xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <dimension> Specifies the font size of text
font-style [ normal | italic | oblique ] Specifies the font style for text
font-weight [ normal | bold | lighter | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] Specifies the weight of a font
line-height [ normal | <multiplier> | <dimension> ] Sets the line height
text-align [ left | right | center | justify ] Specifies the horizontal alignment of text
text-decoration [underline | line-through | none ] Allows underlining or line-through (also known as strike-through) to be turned on or off
letter-spacing <dimension> Adjusts the space between letters; also known as tracking, track kerning or character spacing

Where <dimension> is a number optionally followed by a unit: % (percentage of standard value), pt (printer’s point: 1/72in), pc (printer’s pica: 1/6in), in (inch), cm (centimetre), mm (millimetre), em (printer’s em: font size), ex (printer’s ex height; 0.5em is used when ex height is not known). If no unit is present a standard unit is assumed. This is a printer’s point for font-size, or the normal line height for line-height.

<span style='letter-spacing:10pt;'>Action is eloquence</span>
<span style='letter-spacing:25%;'>Action is eloquence</span>
<span style='letter-spacing:-3px;'>Action is eloquence</span>
<span style='letter-spacing:0.4cm;'>Action is eloquence</span>

Will display text as the following:

Handling unsupported tags

Unsupported tags will be ignored.

Markup editing

When a style is applied in a TextField or TextArea, all text entered by the user will be interpreted as plain text, and will inherit the text style of the current cursor position.

Error handling

If text doesn’t follow the XML standard it will be treated as raw text and an error will be printed into a log.
Note: if you’re using HTML metacharacters <, >, &, and ” in your markup – you either need to escape them manually using character entities or use Qt::escape

Markup filtering

The TextField control is a height-restricted control and does not support tags which assume multi-line, like <br/ >, <div >, and <p >. To use these tags with TextArea and Label, make sure that you set the multiline property to true.

Example

Label {
            text: "<html><div style='background-color:yellow;letter-spacing:10px;'>Virtue is <b>bold</b></div>& <a href='http://www.rim.com' style='text-decoration:none'>goodness</a> never fearful</html>"
            multiline: true
        }

About Alex Kinsella

Promoter of apps. Connoisseur of tacos. By day, I'm a PR and Social Media Manager at BlackBerry.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus