Question

I’m trying to scale text in a WinJS app so that the font size increases with the screen size. So far I use

    <div style="height: 5vh;">
        <div data-win-control="WinJS.UI.ViewBox">
            <h1 data-win-bind="textContent:title"></h1>
        </div>
    </div>

This correctly scales up the size of the text on different resolutions but it also performs a translate on the text and moves it to the center of the containing div when I want it to stay left aligned. The h1 has position:absolute, but even explicitly setting that to left:0 doesn’t work, it appears the translate always has a higher importance. Has anyone come across this before? The translate is applied directly to the h1 element in this instance, and there is no margin or padding on the parent elements as well as having text-align:left set

Thanks

Answer 1

Read here, I think this is what you want: http://www.maxdesign.com.au/articles/em/

“The browser scaling feature is achieved using some simple javascript that retrieves the width of the browser, divides that by the optimal line length”