26

The latest version of Firefox has a button called "Reader View" that is supposed to hide the clutter on the page such as sidebars and headers and only show the article.

https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages

How do I make my site compatible with this button? When I click the button on my site it says:

Failed to load article from page

3
5
  • Firefox's readerview
  • Microsoft's Read later thing
  • Chrome's Readability
  • Evernote's Clearly
  • Safari's Reading List

All of these have one thing in common.. they need text and they need properly formed HTML code behind them.

Having these two things in your website will not only make them work with these new features but will also give you the benefit of meeting more SEO requirements for better placement in the search engines.

2
  • I can confirm that malformed HTML can cause the readerview to not appear. – Marco Tolk Nov 27 '15 at 13:03
  • Is a markup validation service that can check whether a page is displaying "malformed HTML" currently available? I mean malformed in the screen reader context. – IGP Nov 18 '20 at 23:56
2

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.

2
  • 8
    Do you have a reference? – MrWhite Sep 2 '15 at 9:43
  • And how about cases where there are also images, videos, and widgets? My pages have very little text. – Stephen Ostermiller Sep 2 '15 at 10:10
2

There seems to be no official documentation about this, see https://support.mozilla.org/en-US/questions/1067528. However, I'd advise trying wrapping your article in <article> tag.

2

Check source code for Firefox:

https://searchfox.org/mozilla-release/source/toolkit/components/reader/Readability.js

 * grabArticle - Using a variety of metrics (content score, classname, element types), find the content that is
 *         most likely to be the stuff a user wants to read. Then return it wrapped up in a div.

You can find lots of comment like:

Remove DIV, SECTION, and HEADER nodes without any content(e.g. text, image, video, or iframe).

Loop through all paragraphs, and assign a score to them based on how content-y they look.

Add a point for the paragraph itself as a base.

Add points for any commas within this paragraph.

For every 100 characters in this paragraph, add another point. Up to 3 points.

After we've calculated scores, loop through all of the possible candidate nodes we found and find the one with the highest score.

Scale the final candidates score based on link density. Good content should have a relatively small link density (5% or less) and be mostly unaffected by this operation.

Good summary is here: https://stackoverflow.com/a/40747529/173149

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.