Weekend Coder: Text Styling

By Brian Scheirer on 5 Jan 2014 08:40 am EST

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.

Reader comments

Weekend Coder: Text Styling


As a fellow coder, mostly PowerShell these days, thank you for using example code with proper indentation. It's something I push people to do whenever I mentor them.

Plus cool code that makes existing programs more interesting is always a good thing.

Posted via CB10 on a Z10STL100-3/

As much as I try to have something for coders and non-coders alike in my posts this one is mostly for coders. Perhaps your take away could be that, if you didn't know already, developers had no way to change the font prior to 10.2. So maybe some of the apps you use will get some fancy changes once they up their app's min OS level to 10.2. Also this may give you insight on why some apps say they need 10.2+.

Posted via CB10

Thanks Brian, I always look forward to your posts.

For those asking how to start coding, search online for "Mooc" or "MIT Opencourseware". There are several actual University programming courses available to learn for free or a small donation.

To learn to code for BlackBerry, I'd start with the BlackBerry website. They have stuff for developers and if you use the provided samples etc you can see and play with the code.

Posted via CB10

I wish I could code but I cannot. Maybe something I xill try to learn in 2014!

C0038297E Quote of the Day (BBM Channel)

Sometimes I wish I was one of those teenaged hackers writing code and stuff, but alas! it is not to be

Lord of the Rings channel C00298494

Posted via CB10

Sometimes for games/titles/headings it is nice to have a little of your own style. But I do agree that Slate Pro is great for reading plain text.

Question : I wanted the text on my app highlight-able and can be shared, kindly help how to code this (highlighting part). Thanks.