Defining Your App’s Style with Active Rich Text

Alex Kinsella — Tue, 12 Feb 2013 16:23:09 +0000

Guest post from Erin Rahnenfuehrer. – Ed.

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 hyperlink	The href and style attributes are supported. Links must be fully qualified with “http://” or “https://”
	Instruction to render text in bold style
	Line break	Inserts a forced line break character: a carriage return (U+000C).
	Instruction to render text in italic style
	Generic way to add structure to content	The style attribute is supported; used for CSS styles (see below)
	A paragraph: paragraph breaks are forced before and after it.	The style attribute is supported; used for CSS styles
	A section: paragraph breaks are forced before and after it.	The style attribute is supported; used for CSS styles
	Emphasize text	Implemented using italics
	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.

Here's some bold red text!

The following CSS properties are supported:

Property	Values	Description
background-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	(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 \|	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 \| \| ]	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		Adjusts the space between letters; also known as tracking, track kerning or character spacing

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

Action is eloquence
Action is eloquence
Action is eloquence
Action is eloquence

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
,

, and

. To use these tags with TextArea and Label, make sure that you set the multiline property to true.

Example

Label {
            text: "Virtue is bold
& goodness never fearful"
            multiline: true
        }

BlackBerry Developer Blog » Font