Martin Martin - 16 days ago 8
Javascript Question

How Does Firefox Reader View Operate (FF version 38.0.5)

Summary


I am looking for the criteria by which I can create a webpage and be [fairly] sure it will appear in the Firefox Reader
View
, if user desired.


Some sites have this option, some do not. Some with more text do not have this option than others with much less text. Stack Overflow for
instance displays only the question rather than any answers in Reader
View.



Question

I have had my Firefox upgraded from 38.0.1 to 38.0.5 and have found a new feature called ReaderView - which is a sort of overlay which removes "page clutter" and makes text easier to read.
Readerview is found in the right hand side of the address bar as a clickable icon on certain pages.

This is fine, but from the programming point of view I want to know how "reader view" works, which criteria of which pages it applies to. I have done some exploration of the Mozilla Firefox website with no clear answers (sod all programming answers of any sort I found), I have of course Googled / Binged this and this only came back with references to Firefox addons - this is not an addon but a staple part of the new Firefox version.

I made an assumption that readerview used HTML5 and would extract
<article>
contents but this is not the case as it works on Wikipedia which does not appear to use
<article>
or similar HTML5 tags, instead the readview extracts certain
<div>
s and displays them alone. This feature works on some HTML5 pages - such as wikipedia - but then not others.

If anyone has any ideas how Firefox ReaderView actually operates and how this operation can be used by website developers, can you share? Or if you can find where this information can be located, can you point me in the right direction - as I have not been able to find this.

Any help is much appreciated. Please note further information in my answer below.

Answer

You need at least one <p> tag around the text, you want to see in Reader View and at least 516 characters in 7 words inside the text.

for example this will trigger the ReaderView:

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

See my example at http://stackoverflow.com/a/30750212/1069083