Aligning Characters and Spacing in Windows 8.1

When designing applications for Windows Phone we spend a lot of time aligning the left edge of virtually everything to either each other or to the imaginary grid drawn over the page. Unfortunately the SDK doesn’t make life easy for us as the TextBlock element doesn’t automatically trim white space on the left of the contents. The net effect is illustrated in the left of the following image where the “a” and “b” aren’t left aligned, despite being offset by exactly the same amount from the left edge of the page.

image

Windows 8.1 includes the OpticalMarginAlignment property which you can set to TrimSideBearings in order to remove excess whitespace. The net effect is shown in the right side of the image where the “a” and “b” are now left aligned.

Leave a comment