How does Reading view in Internet Explorer 11 work? The only developer documentation I could find was pretty useless.
3 Answers
I couldn't find any documentation either. I found a page of mine that worked with Internet Explorer 11's Reading View and worked backwards from there. Here's what I found:
- You have to have a non-empty
<title>
element. It doesn't matter what's in it as long as there is at least one non-whitespace character. - You also have to have a non-empty
<h1>
element. This will be used as the page title in the reading view. It doesn't have to match the<title>
. - After that, you need at least 700 characters of content.
With those findings, I created a minimal page for entering reading view:
<title>.</title>
<h1>.</h1>
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxy
There are a couple other caveats:
- Images must be at least 400 pixels wide. Images in portrait orientation won't show up. Only JPEG images will show up. The first appropriate image on the page will be used as the banner image.
- A
<pre>
tag anywhere on the page will prevent you from entering reading view. (This seems like a bug to me.)
(Testing done with Internet Explorer 11.0.9600.16384 on Windows 8.1 build 9600.)
-
I have a page with
<pre>
and it shows reading view. The 700 character count may be required, though. Some of my post permalinks show the reading view icon and some don't.– doubleJCommented Dec 2, 2013 at 3:17 -
1That page doesn't have a
<pre>
element. It has the text<pre>
, which is literally<pre>
. I wasn't able to get the reading view working on a page with a<pre>
element. Commented Dec 2, 2013 at 23:52 -
Whoa...I didn't even realize that the the tags were showing up on that page. The home page renders, appropriately (and the reading view icon does not show up). You are correct.– doubleJCommented Dec 3, 2013 at 2:59
-
2Images must be >= 400 px with an aspect Ratio >= 1/3 and =< 3.0. We may still capture images that are smaller than 400px in width but have captions Commented Mar 11, 2014 at 16:31
Documentation for Reading View can be found on IE's Test Drive
In the link, you will find more specific guidance on what Reading View looks for during extraction to determine article title, date, author, publisher, images, caption, and copyright. Below is an example I copy and pasted from the test drive
Date Reading View will render the publisher and date information together on the same line, with additional styling to highlight this information. The article's publishing date will render exactly as it appears in the string. Reading View does not convert to a specific date format.
How Reading View Works
Once a Web site is determined to be reading view eligible, reading view uses a number of heuristics to identify and then extract relevant content from the page, to create a new page (in memory). The algorithm was developed using a sample of the web to help ensure we had the largest coverage and accuracy as possible. These heuristics look at HTML tags, node depth, image size, and word count to determine what content on the page is the “main” content.
-
I'm glad there's some official documentation now. I'm a bit miffed that it's half a year late. And that it doesn't use any existing metadata (Open Graph, schema.org, etc.). Commented Mar 11, 2014 at 17:38
-
Are the rules different between IE 11 on Windows 8.1 and IE 11 on Windows Phone 8.1? I have a site that doesn't render in reading view on Windows 8.1 but does on Windows Phone 8.1. Commented Apr 24, 2014 at 4:13
-
The included link doesn't provide the pertinent information anymore.– RostovCommented Aug 4, 2016 at 14:57
The accepted answer's link doesn't appear to point to the correct documentation any longer, so I'm going to throw this link into the hat as it seems to provide some solid information:
article
,aside
,section
, etc. to determine which sections of HTML to show.