Mobile/Archive/Reflow on zoom

From MozillaWiki
Jump to: navigation, search


Right now, it's often hard to get an area of text into a font-size and element-size that is easy to read.

The situation is as follows:

  • easier zooming (pinching) will help with the subset of readability problems that are just due to getting the right zoom-level
  • in many (most?) cases, though, the problem is with the design/layout of webpages themselves - they do not become easier to read through simple magnification, because by the time the text is big enough, the column of text is wider than the viewport. As a result, all solutions (that I know of) to the readability problem require "adapting" the page design intended by the site author. Three variants are:
  1. Android-style text reflow. Ben and Brad have a prototype of this in an add-on called Easy Reading. Pros for this approach: it definitely makes reader easier, and android users are used to it. Cons: it changes a web-author's intended page layout (though, I think that any solution to this problem is going to require this to some degree). Because of this last bit, it's controversial, but I think we should try it.
  2. Full-on page layout replacement, like Fabrice's Readability add-on. This works really well, but it's too invasive to be our standard "make the page basically readable" functionality. It's a great additional feature to have, either as an add-on or built-in.
  3. Being clever with size of type. We haven't explored the details of this very much, but we should start. What I mean by this is increasing the size of type when we can tell that it would be most useful, but not doing it when it would just really break the overall layout. For example, we might use a default smaller size when fully zoomed out, but use a larger size when the user zooms in to read an article; or have a minimum fontsize when the current element is 100% of the width of the webpage. In a sense, this is trying to get at the advantages of the android model without the obvious changes in layout.

Other things that help mitigate reabability problems.

  1. Text rendering quality at small sizes.
  2. Image rendering quality at different zoom levels.
  3. Zoom performance (speed, smoothness, responsiveness).
  4. Make sure that double-tap zooms to the right place and level.
  5. Spatial nav (makes it easier to select links and navigate menus at low zoom levels).
  6. Get web sites to deliver Fennec as a mobile browser (evangelism to web developers; UA string changes?).

Current Status

Next Steps

Related Bugs

Reflow, text zoom:

  • bug 611555 - Should reflow on zoom (using textZoom-based reflow from the Easy Reading add-on).
  • bug 578179 - Option to wrap text to screen width (rather than container width) - this is an alternative to bug 611555, which change the Gecko core layout code to work more like the stock Android browser. It might mangle page layouts less than the textZoom approach.
  • bug 545703 - Support changing zooming via text zoom

Double-tap zoom:

  • bug 578537 - unable to double-tap zoom if page isn't fully loaded
  • bug 579555 - Zooming onto images in mobile support article results in a zoom to the right of the image

Text and image rendering quality:

Spatial navigation:

  • bug 492409 - Spatial navigation with arrow keys breaks stuff on touch screen devices


  • Dev: Ben
  • Design: Madhava


Goals/Use Cases

Non Goals