David Baron's Weblog

Web browsers on smartphones display Web pages in a way designed to handle Web pages that were designed for desktop or laptop computers. Instead of laying out the Web page at the width of the phone, smartphone browsers lay out the page on a canvas that's typically somewhere between 800 and 1000 pixels wide, then zoom that canvas out so that its width initially matches the width of the phone, and then allow the user to pan and zoom around using multitouch (and other) user interface. This means the user can't necessarily read the text when the page is initially displayed, but can zoom in to read it.

Sometimes this model doesn't work so well, though. When the Web page contains paragraphs of text, the lines of text might be long enough that when the user zooms in so that the text is large enough to read, the lines are wider than the phone. This means the user either has to zoom back out and look at tiny (unreadable or perhaps barely readable) text or has to scroll side to side to read each line of text.

Different Web browsers for smartphones handle this problem in different ways. I recently landed patches (which first appeared in Friday's nightly builds) to improve the way Firefox for Android handles this: it will now resize text that is likely to have this problem. This resizing affects the Web page from the moment it is displayed, so the page doesn't move around as the user zooms or pans.

There's still a good bit of work to do on this code. First of all, we need to figure out what appropriate default sizes are, in a way that works across Android devices. This may mean improving code to detect how big a device's screen is. It also probably means providing some user interface to allow the user to change the default. Right now it can be changed only through about:config, by changing the preference font.size.inflation.minTwips. This preference gives the minimum readable font size in twentieths of a point, and currently defaults to 160 (which is 8pt). The text is then inflated so that it will be at least that size when the line length is zoomed to fill the width of the phone. Specifying the preference this way means this code will have much less effect on wider phones than on narrower ones.

More importantly, it will need improvement to the code that decides which text is ok to inflate. To determine this, we need feedback on Web pages that are displayed badly as a result of the changes to font size. If you see pages where this happens, file a bug in product Core, component Layout, and cc: me (:dbaron).

Web authors should note that Web pages can opt out of the inflation for all or part of a page by specifying -moz-text-size-adjust: none, much like the existing -webkit-text-size-adjust: none and -ms-text-size-adjust: none. The -moz-text-size-adjust property exists only to opt opt of this font size inflation, and doesn't do anything else.