MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Fonts and Text Overflow
As discussed earlier, typography is an important design element for Store apps, and for the most part
the standard font styles using Segoe UI are already defined in the default WinJS stylesheets. In the
Windows SDK there is a very helpful CSS typography sample that compares the HTML header elements
and the win-type-* styles, demonstrating font fallbacks and how to use bidirectional fonts (left to right
and right to left directions).
Speaking of fonts, custom font resources using the @font-face rule in CSS are allowed in Store apps.
For local context pages, the src property for the rule must refer to an in-package font file (that is, a URI
that begins with / or ms-appx:///). Pages running in the web context can load fonts from remote
sources.
Another piece of text and typography is dealing with text that overflows its assigned region. You can
use the CSS text-overflow: ellipsis; style to crop the text with a …, and the WinJS stylesheets contain
the win-type-ellipsis class for this purpose. In addition to setting text-overflow, this class also adds
overflow: hidden (to suppress scrollbars) and white-space: nowrap. It’s basically a style you can add to
any text element when you want the ellipsis behavior.
The W3C specification on text overflow, http://dev.w3.org/csswg/css3-ui/#text-overflow, is a helpful
reference as to what can and cannot be done here. One of the limitations of the current spec is that
multiline wrapping text doesn’t work with ellipsis. That is, you can word-wrap with the word-wrap:
break-word style, but it won’t cooperate with text-overflow: ellipsis (word-wrap wins). I also
investigated whether flowing text from a multiline CSS region (see next section) into a single-line region
with ellipsis would work, but text-overflow doesn’t apply to regions. So at present you’ll need to
shorten the text and insert ellipsis manually if it spans multiple lines.
For a demonstration of ellipsis and word-wrapping, see the CenteredText example for this chapter.
266