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
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.
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
Have a <p> tag amazingly seems to be quite critical. For example this History of Mathematics page on Abu Kamil has very well formatted HTML but is still not enough. The critical problem appears to be because it lists no <p> tags but instead puts its base text inside <span class="markup">.
If you look in the source of the page it has:
<header> and <main> sectionsabout:reader?url=https://mathshistory.st-andrews.ac.uk/Biographies/Abu_Kamil/But as per @gavenkoa's answer (emphasis mine):
- 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.
No Paragraphs No Glory 😂
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.
