tags: HTML, Tooling, Web

Reading View

Have you ever browsed websites using Microsoft Edge and seen the little reading book in the address bar? That is the reading view option and is an absolute brilliant tool as when it is enabled, it gets rid of all the junk on the page, changes the text size and colours and makes a reading experience so much better. Some sites seem to have it and some don’t, but why? What is the magic juice that is needed to get this enabled for your web sites?

A tale of two Edges

Yes there are two edges we need to worry about here. Firstly there is the out of the box Microsoft Edge that comes with Windows 10 and renders using EdgeHTML. Secondly there is the re-invented Edge that uses Chromium under the hood. Edge powered by Chromium is still in development, but you can get your hands on it by signing up to the Insiders Channels.

Layout of your page

Have a basic layout similar to the following.

Reading View will extract various bits of information out from meta tags and specific classes such as the byline-name, dateline and displaydate and display them prominently on the page:-


reading-view-1

But this does not always work for the default Edge as even Microsoft’s page on Reading View does not work on the default Edge, but does on Chromium Edge.

Here is my test page address bar in both default Edge and Chromium Edge. I should point out that reading view does not work on local html files, they have to be hosted on a server.

Default Edge

default-edge-1

Chromium Edge

chromium-edge-1


But why?

Well I cannot be entirely sure, but my experiments show that if you call your file index.html, and browse to it then in the default Edge it will not have a reading view, but in Chromium Edge it will. However even in Chromium Edge, not all the meta data is extracted as this image shows. But this is all experimental at the moment, so this will maybe change in the future.I should also point out that you need enough content for the parser to deem it necessary to have a reading view. In the above page I have three paragraphs, if it was just the one then reading view is not available.

reading-view-2

Enabling it in Chromium Edge

It is already enabled in default Edge, but currently in Chromium Edge you need to set a flag by going to edge://flags/ in the address bar and searching for ‘Microsoft Edge Reading View’ which as of version 78.0.276.2 is still experimental.

reading-view


Happy coding.