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