One of the easiest ways to make your app have a unique look is to change the text styling. Among basic changes such as color and size that have always been available in Cascades, 10.2 brings the option to change the font to any .otf or .ttf font included in your code. Let’s take a look at the available text styling and how to implement them in your app.

Adjusting text style can be done one of two ways, either individually in the Label/TextArea (non-editable) or within a TextStyleDefinition. If you plan on using the same text styling on multiple Labels/TextAreas, it is best to create a TextStyleDefinition which will not only cut down on the amount of code you’ll need to write but also speed up loading by helping the UI draw faster using a base styling. Additionally, if you want to slightly change from your TextStyleDefinition you can override it by over defining that specific property in the Label/TextArea.

Starting with a basic sample, here’s some code of styling directly in a Label:

Label {     text: "Some Text!"          horizontalAlignment: HorizontalAlignment.Center     verticalAlignment: VerticalAlignment.Center     textStyle.fontSize: FontSize.Large     textStyle.fontWeight: FontWeight.Bold     textStyle.fontStyle: FontStyle.Italic     textStyle.color: Color.Magenta }

Similarly this code could be written as:

Label {     text: "Some Text !"     horizontalAlignment: HorizontalAlignment.Center     verticalAlignment: VerticalAlignment.Center     textStyle{        color: Color.Magenta        fontSize: FontSize.Large        fontWeight: FontWeight.Bold        fontStyle: FontStyle.Italic        } }

Both will yield a Label that says “Some Text!” that is large, bold, italic, and colored magenta. But as you can see that it is quite a bit of code to add to every place you want it so here’s how you can create your own base TextStyle:

Page {     Container{         attachedObjects: [             TextStyleDefinition {                 id: myStyle                 color: Color.Magenta                 fontSize: FontSize.Large                 fontWeight: FontWeight.Bold                 fontStyle: FontStyle.Italic             }         ]         Label{             text: "Some Text!"             textStyle.base: myStyle.style         }     } }

As you can see the TextStyleDefinition is the same as the TextStyle I was able to define directly in the previous Label, except now it is defined within the attachedObjects and given an id. Then I can call that id as my textStyle.base.

Here we can also add the newest and most exciting piece of text styling, custom fonts. These can also either be added directly in the Label/TextArea or in the TextStyleDefinition. The code would look like this:

Container{      attachedObjects: [          TextStyleDefinition {               id: myStyle               color: Color.Magenta               fontSize: FontSize.Large               fontWeight: FontWeight.Bold               fontStyle: FontStyle.Italic                 rules: [                     FontFaceRule {                         source: "nameOfTheFont.ttf"                         fontFamily: "myFont"                     }                 ]               fontFamily: "myFont"             }        ]      Label{         text: "Some Text!"         textStyle.base: myStyle.style       }     }

Above you can see the added rules within the TextStyleDefinition where a FontFaceRule is added. As I mentioned above the FontFaceRule is only available on 10.2 and higher. Inside that rule you must define the source, which is the name of the font file inside your asset folder of your project and a name of your newly created fontFamily. Then call that fontFamily name inside your TextStyleDefinition.

Now say you want the majority of your defined style but wanted to change a property or two you can have the following:

Label{    text: "Some Text!"    textStyle.base: myStyle.style  } Label{    text: "Some BLUE Text!"    textStyle.base: myStyle.style    textStyle.color: Color.create("#0000FF")  }

And your second label will have all the defined properties except rather than the color being magenta it will instead be #0000FF (blue). On that note, realize you can either define colors as the 18 predefined colors or use hex colors and RGB. Hex defined as I have above and RGB as textStyle.color: Color.create(X.XX, Y.YY, Z.ZZ).

Finally, if you don’t want to use native calls and want to inject some of your web skills into a Cascades app you can define your Label/TextArea as html and it’ll support quite a bit of css/html parameters. This includes support of emojis calling them as Unified or DoCoMo:

Label{     text: "<html><head><style>p{color: blue; font-style: italic;}</style>     </head><body><p>&#x1F3C8; ... cool, it's a football<br />&#xE656; ... and soccer ball</p></body></html>";      multiline: true }

Where the css changes the font to blue and italic, the football emoji is defined using the unified code, and the soccer ball in DoCoMo.

As you can see, lots of options here for styling your text in a Cascades app. So be sure to use some style, but remember don’t over style to the point where text is unreadable.

Read more