item.label item.label item.label item.label item.label

Web Reader Compatibility Guide

on the

Presumably we all have devices with reader mode, be it your web browser, tablet, smartphone or TV in some cases. This is a useful tool when browsing the web which takes a page and reduces the content to plain text (and images with some), making your website compatible should be a priority. Particularly on pages with a lot of text and especially if you have a unique design.

Unfortunately, each browser has it's own quirks and interpretation algorithm. Our experiments lead us to believe you'll never get things working perfectly and there will be a margin of error on some devices, each one failing at different hurdles. However, there are things you can do to make things go a little smoothly.

This article has also been converted into a handy reference PDF, like our last article “Web & Social Meta Cheat Sheet”. If you missed this and want to read/download, click here.

How it works

At it's core, reader mode takes a page, works out if it meets the criteria for reader mode, works out what the main content is, strips out all irrelevant elements (css, images etc) and then displays it back to you. The resulting display is usually a black and white page, some browsers strip out images and others don't (I.e android vs firefox).

As far as we can tell, some will work from the rendering engine and others like firefox (discovered via noscript) use javascript. Most, seem to be based upon a version of Readability.

To access reader mode on browsers you will typically need to press a book or text icon next to the url.

General guidelines

From our recent foray into getting reader mode working on our site, structuring your content in the following ways can help with detection:

  • Surrounding the desired content with an <article> tag.
  • Putting text in paragraphs (<p>) as opposed to line breaks, spacing can be removed on paragraphs with: "margin:0;padding:0;"
  • Using header (<h1>, <h2>, <h3> etc) tags on page titles/headings and sub headings. Be careful, as <h1> tags past the first are sometimes stripped out. Try to use only one <h1> tag, the others appear to be unaffected.
  • When displaying code, <pre> and <code> tags help the reader mode to differentiate these.
  • Don't wrap text/image content within too many divs (count the start of the <article> tag as 0), this can cause reader mode to skip over them
  • Surround the page title (non-meta title, basically where author data and article/page title are displayed to the user) with <header> tags.
  • User the css classes outlined in the readability spec, particliarly on the article tag, content div and title div - https://www.readability.com/developers/guidelines#reader

Browser/Device Quirks

Each browser works differently and has slightly different criteria for reader mode. I'll briefly speak about each here that I've tested. Of course, this article was wrote in August of 2016, updates could possibly have already fixed these issues. The guidelines above, should still be relevant regardless of year or decade (within reason, may be oudated in the next century or millenia).

Android (Stock, Galaxy S4)

Stock android reader mode seems to be the worst of the bunch (in my version at least). It will display images but not where they should be, in some cases jumbling them all at the top of the page. It will however respect display:none; on them.

It manages to detect most pages as readable that should be, but cuts them off prematurely in a few cases.

There also seems to be an omission of “</” (those characters in that combination were removed from the text) when viewing a page using <pre> and <code> tags, otherwise it did not seem to struggle with these tags.

One page that caused particular issue was our Services page, as there seems to be a predetermined character count for displaying paragraphs half of the content is missing here.

Amazon Silk

Silk seems to be one of the most unreliable/inconsistent out of all of them, it's requirements for reader mode is a set amount of paragraphs with internal text counts that seem incredibly low, our About page for example does not translate into reader mode but our blog posts do.

It won't display anything bar texts in paragraphs of a certain length, as demonstrated with the previous blog post it will not show <pre> or <code> tags. Our service page is a good example of this paragraph length, when each bullet point or heading was a separate paragraph some were missing completely if they did not meet a certain character count. After converting each block of bullet points to a single paragraph separated with <br> tags and each title to <h2> tags it will display properly.

Chrome

This needs to be enabled via installing an extension called Read Mode found in the web store, unfortunately it's missing from the mobile counterpart. No Major issues here, everything works as expected unless including multiple <code> blocks within one <pre> tag.

Won't adhere to hiding images with display:none; and displays them anyway.

Edge

I'm not a big fan of microsoft browsers, as they seem to have their own way of doing things which can make compatibility a pain. Edge however isn't too bad (var png-8 alisasing) so I'll let them off here.

Display both text and images but doesn't seem to detect pages for reader mode that include <pre> and <code> tags and can sometimes place images in the wrong order.

Will adhere to css hiding of elements using display:none;.

Displays the background of it's reader mode in cream, which is a weird deviation personally.

Firefox/Firefox Mobile

Comes as standard, no major issues with this at all. Displays images, text and pre/code blocks perfectly. Very strict with it's detection however but fair. Make sure you adhere to the standard outlined above. Particularly with paragraphs, headings and the readability spec.

Won't adhere to hiding images with display:none; and displays them anyway.

Only displays the first occurance of <h1>, any tags after this are stripped out. <h2> and <h3> are not effected.

These behaviours remain consistent across desktop and mobile variants.

IOS/Desktop Safari

No major issues here, as long as you adhere to the spec outline above it should be fine. This device will support images but not over a certain size or those hidden with display:none;

No issues with <pre> or <code> either.

These behaviours remain consistent across desktop and mobile variants.

Finale

Hopefully this helps, the reason for compiling my knowledge here was when researching the topic myself there weren't many useful articles on the subject.

Everything gathered here has been through trial and error.

As I am limited by what devices I own, if you have anything unusual or exotic with a reader mode and have a couple of minutes, do some tests around the web and report back here in the comments. I'd be more than happy to update this article with more information from readers.

As promised, here is your PDF download - click me!

Happy reading,
Connor


Downloads:

2017-09/reader-compatibility-eager-amoeba


Follow us here to know when we post:
item.label item.label item.label item.label item.label

comments powered by Disqus

Eager Amoeba® is the trading name for Connor Graham and his freelance associates, specialising in website, database, app and film production.