Inline HTML and CSS
Besides using TextStyleDefinition objects for customizing text appearance, you can also resort to inline HTML and CSS. The supported HTML tags are: <a>, <b>, <br/>, <i>, <span>, <p>, <div>, <em>, and <strong>. Listing 1 shows you how to apply inline HTML text styling to a label.
Listing 1. Custom Text Style
import bb.cascades 1.2 Page { Label { text: "<html><b>Cascades</b> is <i>awesome!</i></html>" } }
You can also embed a <style> tag inside <span> or <div> tags in order to apply CSS styling to your text, as shown in Listing 2.
Listing 2. CSS Styling
import bb.cascades 1.2 Page { Label { text: "<html><span style='text-decoration:underline'>Cascades</span> is"+ "<span style='font-size:xx-large;font-style:italic;color:green'>awesome!</span></html>" } }
Note that not all CSS
attributes are supported in style definitions, but you can rely on the
following ones (for additional details on how to use the attributes,
refer to one of the numerous online CSS tutorials; a good starting point is www.w3schools.com/css/):
- background-color: Sets the text background color.
- color: Sets the text color (for example: red, green, gray, etc…).
- direction: Sets the text direction (for example: ltr which is left to right or rtl which is right to left)
- font-family: Specifies the text font family (for example: font-family:”Courier New”, Courier, monospace;). The font-family property should hold several font names as a fallback system. You should always start with the font you want and end with a generic family.
- font-size: Specifies the font size (for example: medium, large, x-large, xx-large).
- font-style: Specifies the font style (normal, italic, oblique).
- font-weight: Specifies the font weight (normal, bold, lighter, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900). A normal font weight is 400 and bold is 700.
- line-height: Specifies the height of a line of text.
- text-align: Specifies the text’s horizontal alignment (left, right, center, justify).
- text-decoration: Specifies whether the text should be underlined or strike-through (none, underline, line-through).
- letter-spacing: Adjusts the space between letters in the text (see www.w3schools.com/cssref/pr_text_letter-spacing.asp).
3. Label
You can use a label control to display a
single or multiple lines of read-only text by setting its text property.
No comments:
Post a Comment