Text inflation vs. rewrapping

[Henri Sivonen]

I have written about this before, but back then the text inflation
feature was in the planning stage, so there was no way to compare it
with line wrapping to screen width in practice. Now that
implementations can be compared, I find that Opera Mobile's approach
performs well consistently while Fennec's text inflation might
occasionally be near the readability of Opera but is often worse. In
particular, while browsing the Web with both browsers, I have yet to
see an example where Fennec's results were *better* than Opera
Mobile's after double-tap--and most of the time on desktop-oriented
sites, a double-tap is needed in both Fennec and Opera Mobile anyway.

I'd like to suggest again that Fennec would work better if instead of
text inflation, it set the default font size to slightly larger than
on desktop in terms of CSS px (e.g. 18 px), rewrapped lines not to
exceed the width of the screen (while not modifying the outer
dimensions of the block boxes) both on double-tap-to-zoom and on
multitouch zoom and overzoomed on double-tap to activate rewrapping.


Some examples:

On Daring Fireball, the text in the initial rendering is too small
both in Fennec and in Opera Mobile:
http://hsivonen.iki.fi/screen/text-inflation/daringfireball-initial-fennec.png
http://hsivonen.iki.fi/screen/text-inflation/daringfireball-initial-opera.png

On this site, text inflation doesn't take effect, so after
double-tapping, the text is still too small in Fennec:
http://hsivonen.iki.fi/screen/text-inflation/daringfireball-doubletap-fennec.png

In Opera Mobile, after double-tapping, the text is easy to read:
http://hsivonen.iki.fi/screen/text-inflation/daringfireball-doubletap-opera.png


On Slashdot, in Fennec, the initial layout is very unbalanced and
invites the user to double-tap to get rid of the blank space:
http://hsivonen.iki.fi/screen/text-inflation/slashdot-initial-fennec.png

In Opera Mobile, the layout is balanced but the text is too small to
read without double-tapping:
http://hsivonen.iki.fi/screen/text-inflation/slashdot-initial-opera.png

After double-tapping and scrolling to comments on Slashdot, the text
size is extremely unbalanced. Even though the expanded comments are
super-easy to read, the collapsed comments are tiny and hard to
expand:
http://hsivonen.iki.fi/screen/text-inflation/slashdot-doubletap-fennec.png

In Opera Mobile, the expanded and collapsed posts have the same font
size balance as on desktop, the text is easy to read and the collapsed
comments are easy to expand:
http://hsivonen.iki.fi/screen/text-inflation/slashdot-doubletap-opera.png


TBPL is completely broken in Fennec:
http://hsivonen.iki.fi/screen/text-inflation/tbpl-fennec.png

It doesn't work in Opera Mobile, either, but due to another (sad) reason:
http://hsivonen.iki.fi/screen/text-inflation/tbpl-opera.png


Even on a site where text inflation works rather well, it doesn't
obviously outperform the rewrapping approach.

On the hs.fi front page, the story headings and ledes are very
readable in Fennec even though the page looks unbalanced due to tiny
text in the navigation:
http://hsivonen.iki.fi/screen/text-inflation/hs-front-initial-fennec.png

In Opera Mobile, a double-tap is necessary, but the initial layout is
more balanced:
http://hsivonen.iki.fi/screen/text-inflation/hs-front-initial-opera.png

Fennec loses any advantage when double-tapping:
http://hsivonen.iki.fi/screen/text-inflation/hs-front-doubletap-fennec.png
http://hsivonen.iki.fi/screen/text-inflation/hs-front-doubletap-opera.png

On a story page, the text is quite readable without double-tapping in
Fennec, but the layout still invites to double-tap to avoid losing
screen space to the sidebar:
http://hsivonen.iki.fi/screen/text-inflation/hs-story-initial-fennec.png

In Opera Mobile, the initial layout gives a better idea of what's on
the page, but a double-tap is obviously necessary to read the text:
http://hsivonen.iki.fi/screen/text-inflation/hs-story-initial-opera.png

Again, Fennec loses any advantage when double-tapping. In Opera
Mobile, the size of the publication date is more balanced with the
copy than in Fennec:
http://hsivonen.iki.fi/screen/text-inflation/hs-story-doubletap-fennec.png
http://hsivonen.iki.fi/screen/text-inflation/hs-story-doubletap-opera.png

--
Henri Sivonen
hsiv...@iki.fi
http://hsivonen.iki.fi/

[Ben Bucksch]

On 24.01.2012 16:00, Henri Sivonen wrote:

I have yet to see an example where Fennec's results were *better* than Opera Mobile's after double-tap

I don't know Opera, but I see the same with Android vs. Fennec.

Android browser almost always produced good results, while Fennec (6 ?) doesn't half of the time. Most of the time, it's fixed after a second (!) double-tab, but even then is not always correct.

This and the memory requirements (and consequently speed) are the main reason why I felt I couldn't use Fennec and went back to Android, even though I was obviously highly motivated to use Fennec.

Ben

[Asa Dotzler]

On 1/24/2012 9:03 AM, Ben Bucksch wrote:
> On 24.01.2012 16:00, Henri Sivonen wrote:

>> I have yet to see an example where Fennec's results were*better* than Opera Mobile's after double-tap

>
> I don't know Opera, but I see the same with Android vs. Fennec.
>
> Android browser almost always produced good results, while Fennec (6 ?)
> doesn't half of the time. Most of the time, it's fixed after a second
> (!) double-tab, but even then is not always correct.
>
> This and the memory requirements (and consequently speed) are the main
> reason why I felt I couldn't use Fennec and went back to Android, even
> though I was obviously highly motivated to use Fennec.
>
> Ben

A lot has changed since Fennec 6. You should grab the latest nightly and
give it a try. It is literally an entirely new animal.

- A

[L. David Baron]

On Tuesday 2012-01-24 17:00 +0200, Henri Sivonen wrote:
> I'd like to suggest again that Fennec would work better if instead of
> text inflation, it set the default font size to slightly larger than
> on desktop in terms of CSS px (e.g. 18 px), rewrapped lines not to
> exceed the width of the screen (while not modifying the outer
> dimensions of the block boxes) both on double-tap-to-zoom and on
> multitouch zoom

I agree we should implement rewrapping. I don't have the time to
commit to doing it, though.

I'm not at all ready to say we should do it *instead* of font
inflation rather than in *addition* to font inflation.

> and overzoomed on double-tap to activate rewrapping.

I don't think we should have special behavior for double-tap, for
two reasons: poor discoverability of either the different ways of
zooming or the differences between them, and the fact that making
double-tap behave differently introduces modal behavior (lots more
states to be in, and hard to tell which one you're in).

I also don't understand what difference in behavior you're proposing
for double-tap, given that you've suggested above that rewrapping
activate for both double-tap and pinch zoom.

-David

--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla http://www.mozilla.org/ 𝄂

[Robert Kaiser]

Ben Bucksch schrieb:

> Android browser almost always produced good results, while Fennec (6 ?)
> doesn't half of the time.

Henri is talking about functionality that wasn't in Fennec 6. Not even
sure if it's in release yet.

Robert Kaiser

[L. David Baron]

It's not. Currently the earliest release it's in is 11 (currently
aurora), but it may not stay in that release.

[Henri Sivonen]

On Tue, Jan 24, 2012 at 8:52 PM, L. David Baron <dba...@dbaron.org> wrote:
> On Tuesday 2012-01-24 17:00 +0200, Henri Sivonen wrote:
>> I'd like to suggest again that Fennec would work better if instead of
>> text inflation, it set the default font size to slightly larger than
>> on desktop in terms of CSS px (e.g. 18 px), rewrapped lines not to
>> exceed the width of the screen (while not modifying the outer
>> dimensions of the block boxes) both on double-tap-to-zoom and on
>> multitouch zoom
>
> I agree we should implement rewrapping.  I don't have the time to
> commit to doing it, though.
>
> I'm not at all ready to say we should do it *instead* of font
> inflation rather than in *addition* to font inflation.

If it was done in addition to font inflation, it wouldn't address the
problem of severely imbalanced text sizes when some text gets inflated
but other text doesn't. If you want to read text that the inflation
heuristic doesn't inflate, the text that was inflated is humongous at
that zoom level even if wrapped.

I think Opera Mobile has the best zooming behavior on the market today
and that behavior in (IMO of course) substantially better than
Fennec's. I wish Fennec had as good or better behavior. Obviously, "as
good" could be reached by doing the same as Opera. I realize that what
Opera does might be a local maximum. However, I really have trouble
seeing how incremental improvements to text inflation could lead to
something even better than what Opera does, because text inflation
requires making guesses and guesses are wrong some of the time while
what Opera does doesn't involve guessing. (Opera pays for not guessing
by requiring a double-tap user action more often, but Fennec requires
the double tap very often anyway, so the double-tap avoidance in
Fennec isn't much of a win.)

>> and overzoomed on double-tap to activate rewrapping.
>
> I don't think we should have special behavior for double-tap, for
> two reasons:  poor discoverability of either the different ways of
> zooming or the differences between them, and the fact that making
> double-tap behave differently introduces modal behavior (lots more
> states to be in, and hard to tell which one you're in).
>
> I also don't understand what difference in behavior you're proposing
> for double-tap, given that you've suggested above that rewrapping
> activate for both double-tap and pinch zoom.

By "overzoom" I mean "over" as far as the width of block goes. That
is, I think double-tap should zoom so that the text that was
double-tapped becomes a certain size. This would often be overzooming
compared to the current rule where double-tapping zooms until the
width of the block fills the width of the screen.

As for "activate", I didn't mean any different modality from general
rewrapping. I meant just that since rewrapping would activate whenever
the width of the block is greater than the width of the view port,
zooming in further than to fit the width of the block upon double-tap
would end up triggering the rewrap condition. This is how Opera Mobile
behaves.

[Patrick Walton]

On 2/3/12 2:43 AM, Henri Sivonen wrote:
> On Tue, Jan 24, 2012 at 8:52 PM, L. David Baron<dba...@dbaron.org> wrote:
>> On Tuesday 2012-01-24 17:00 +0200, Henri Sivonen wrote:
>>
>> I'm not at all ready to say we should do it *instead* of font
>> inflation rather than in *addition* to font inflation.
>
> If it was done in addition to font inflation, it wouldn't address the
> problem of severely imbalanced text sizes when some text gets inflated
> but other text doesn't. If you want to read text that the inflation
> heuristic doesn't inflate, the text that was inflated is humongous at
> that zoom level even if wrapped.

I stopped using Opera Mobile because it does not have font inflation and
uses text rewrapping instead (which breaks layouts by inserting large
amounts of empty space). I think we shouldn't back out font inflation
when Opera's approach gets implemented; it should be a pref.

Patrick