MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

size of the font.) Unfortunately, percentage values used in the font-size style in CSS are based on the
default font size (1em), not the size of the parent element as happens with height and width. What
you’d love to be able to do is something like font-size: calc(height * .4), but, well, the value of other
CSS styles on the same element are just not available to calc.
One exception to this is the vh value (which can be used with calc). If you know, for instance, that the
text you want to scale is contained within a grid cell that is always going to be 10% of the viewport
height, and if you want the font size to be half of that, then you can just use font-size: 5vh (5% of
viewport height).
Another method is to use an SVG for the text, wherein you can set a viewBox attribute and a
font-size relative to that viewBox. Then scaling the SVG to a grid cell will effectively scale the font:
Big SVG Text
You can also use JavaScript to calculate the desired font size programmatically based on the
clientHeight property of the parent element. If that element is in a grid cell, the font size (and line
height) can be some percentage of that cell’s height, thereby allowing the font to scale with the cell.
You can also try using the WinJS.UI.ViewBox control. If you want content like text to take up 50% of
the containing element, wrap the ViewBox in a div that is styled to be 50% of the container and style
the child element of the ViewBox with position: absolute. Try dropping the following code into
default.html of a new Blank app project for a demonstration:
Big text!
Item Layout
So far in this chapter we’ve explored page-level layout, which is to say, how top-level items are
positioned on a page, typically with a CSS grid. Of course, it’s all just HTML and CSS, so you can use
tables, line breaks, and anything else supported by the rendering engine so long as you adapt well to
view states and display sizes.
It’s also important to work with item layout in the flexible areas of your page. That is, if you set up a
top-level grid to have a number of fixed-size areas (for headings, title graphics, control bars, etc.), the
remaining area can vary greatly in size as the window size changes. In this section, then, let’s look at
some of the tools we have within those specific regions: CSS transforms, flexbox, nested and inline grids,
multicolumn text, CSS figures, and CSS connected frames. A general reference for these and all other
262