Windows Phone 8.1 for Developers–Type and Text handling

This blog post is part of a series about how Windows Phone 8.1 affects developers. This blog post talks about how type and text handling has been improved and is written by Håkan Reis (@haqwin) at Jayway and was originally posted here.

On windows phone, one of the most striking design feature is the handling of type. The bold use of headlines, how text and type is used to not only to communication information but also hierarchy and rhythm. However, detailed control over type and text has been a bit limited up until now. With Windows Phone 8.1 we have gotten a lot more tools at our hand. The detailed text control consist of a multitude of additional properties for the basic TextBlock control. It's important to know what the defaults are and what it affects as it may affect how things appear when an application is migrated from Windows Phone 8 to 8.1. I'll go through each of them and explain what they do, how it's used and things to consider.

Updated and added properties

The first thing that has been updated is the actual font selection. Now you can use just, for example Segoe UI as font and you don’t have to select the variant directly. This actually activates FontWeight, giving access to all different variants (light, medium, bold, etc), it will not hide unavailable weights so continue to use with caution, but it’s getting there. FontStyle works as before giving access to Normal and Italic but now it also includes oblique (often referred to faux italic) where you just tilt the character instead of using the designed italic font. CharacterSpacing - character spacing is maybe best known as kerning and it has long been missing in Windows Phone. It affects the space between characters and works on all text in a TexBlock. If you want precise control of specific parts it can also be used in a run tag. IsColorFontEnabled is a property that’s quite cool. When emoji started to get popular Apple and soon Google introduced special PNG fonts. However, Microsoft introduced layered vector glyphs as an addition to OpenType/TrueType with fallback to monocolor. Anyway, this switch turns on the feature. MaxLines is a new property that defines, well, maximum number of lines to display in a box. Before this has to be accomplished with keeping the correct size of the textbox related to the font size. Setting it to 0 (the default) will work as it used to. OpticalMarginAlignment is wonderful. Finally you can left align without doing all those extra adjustments- default on so make sure you either change the layout or remove adjustments when you port an app to 8.1 TexlineBounds together with OpticalMarginAlignment this gives you full alignment control. Optically vertical alignment couldn’t be easier. This also related to the stacking strategy. I’ll try to illustrate with a simple image what the bounds are:

TextReadingOrder is an addition to the current right-to-left UI capabilities. Although Windows Phone already has good RTL capabilities it can be better. This property handles the reading order within just a TextBlock. If you expect RTL text you can set this property to DetectFromContent . TextTrimming before we just had None (it cut at the first whitespace) or WordEllipsis (adding … after the full word). But now two new trimmings has been added CharacterEllipsis (trim after the last visible character + …) and Clip (just clip at the last visible character). TextWrapping has been there before with either no wrapping or wrapping text, normally text is wrapped at each word. If the word doesn’t fit it will wrap somewhere in the middle, as it did before. However, now we got one more option WrapWholeWords that will prevent words from wrapping in the middle. Instead you will get an ellipsis and the next line will start with the next word. Also, the default here has changed from NoWrap to WrapWholeWords so make sure you get your desired result when migrating to Windows Phone 8.1

Unchanged properties

Font stretch and font weight actually works now as it should but it’s depending of the font capabilities in the selected font. It would be preferred if only available stretch and weights variants were visible but you can’t have it all :). LineStackingStrategy is unchanged with MaxHeight, BlockLineHeight and BaselineToBaseline as the strategies.

Conlusions

Most of the detailed fonts and type control has been updated for the better. It’s going to be so much easier to get that extra margin and alignment control without all the work that was needed before.