Introducing Reading View in IE 11
In IE11, you can click or tap a button in the address bar to put a Web page article into reading view.
Reading view is a new feature in Internet Explorer 11 for Windows 8.1 that helps you focus on the main content of the Web page you want to read. Reading view is a way to experience just the article or blog post you want to read, without the distractions of related (or unrelated) content surrounding the story. Find an article you want to read, switch to reading view, and settle into a great reading experience. When you’re done, just exit reading view to continue browsing on the site.
A web article in reading view
Reading view is a native feature of “immersive” IE – you don’t have to install anything extra – and it’s available for pages with a significant amount of text, in any language IE supports.
How to Use Reading View in IE 11
Using reading view is easy. Just click the reading view button in the address bar. If you’re a keyboard person, you can also use CTRL+SHIFT+R to put a page into reading view.
The reading view button will appear in the address bar for pages that have “article-like” content. If you don’t see it, it means that the page doesn’t work well in reading view.
To exit reading view, tap or click the button in the address bar again), or hit Esc. To go to the previous page, tap or click the back button, or back-swipe if you’re using a touch-enabled device.
What makes a great reading experience?
When we built reading view in IE 11, the goal was to create a view of the page that was noticeably terrific for reading, one where it actually felt better to read this page than the original page – like a temporary reading oasis in your browser just for that article. At the same time, we wanted to preserve the integrity of the content, as well as the story’s URL, author, and other relevant contextual information. While we are not the first browser to integrate it natively, we did see an opportunity to improve on other browsers’ experiences by incorporating legibility best practices that publishers of printed media have been using and refining for centuries, and adapt them to reading online.
There are many things that can contribute to the readability of a page such as font choice, line length, white space, paragraph markers, line spacing, kerning, contrast, and placement of images. Here are a few things we built into reading view in IE11 that we think make a positive difference:
A new font designed for online reading
IE 11 reading view takes advantage of a brand new font for Windows 8.1, called Sitka. It was developed for Microsoft by Mathew Carter, in collaboration with the Advanced Reading Technologies team that previously developed Clear Type text rendering to work well for online reading as well as in print.
One of the advantages of the Sitka font comes from the optical scaling addressed by its different weights. Research has shown that different letter spacing, stroke sizes, and x-height can have a positive effect on the readability of different sizes of text. An optical family contains styles specifically optimized for each size and use case – rather than trying to be one-size-fits-all, like many of the typefaces common on the Web. Thus, you can get terrific legibility in text, and style in display sizes, all with the same family. Reading view for example uses Sitka Small, which is designed with thicker strokes, larger x-height, and looser letter spacing, for image captions, and Sitka Banner, designed with thinner strokes and tighter letter spacing, for the article titles.
In this picture we show three of the optical weights of Sitka at the 2.0em size. From this you can see how the tighter letter spacing and thinner widths employed in Sitka Heading are a better reading choice for text at this size.
In this picture again we show the same three optical weights of Sitka this time at the 0.8em size. It is easy to see how the greater x-height, and looser letter spacing employed in Sitka Small is substantially better for reading the text at this size.
Sitka was also the first typeface family designed with scientific legibility studies integrated directly into the design process. Most fonts do not undergo legibility studies. Those few that do are studied after the font is nearly done. Sitka, however, was repeatedly tested throughout the design process.
Additionally reading view uses a larger than average size font because research has shown that reading speed increases at larger sizes (up to a plateau at very, very large sizes).
A layout that is easy on the eyes
Some Web articles require significant effort to read, because there is so much other content on the page. In contrast, the effect we were going for with reading view in IE 11 can almost be described as one of relief – the page should just feel good to look at. To that end, we gave attention to a few aspects of the layout that can make a difference, specifically aiming to get the right balance of column width, line height, and text size.
For example, because the user can change the font size in reading view it was important for the feature to adjust the line spacing too as the font got bigger. Other considerations were padding (white space) between columns, around images, and between paragraphs. The goal was for the page to feel clean and free of distractions, and this padding helps your eyes and brain quickly identify and distinguish the different elements of the article from each other, as well as provide cues for orienting your path through the text.
No more “Next, Next, Next…” links
There are many articles on the Web that contain multiple and separate pages content. That means you have to click a “Next Page” link to continue reading, sometimes again and again, if the article spans many pages – and then you have to wait for each successive page to load, thus interrupting your reading experience.
Reading view in IE 11 combines the primary content from all pages of an article into a single continuously scrolling page that works great on any device. No need to click those “next page” links. Instead you can just use your finger or your mouse to scroll as you read. You get to have full control the position of the text on the screen.
If you are using a wide-screened device, like a tablet or a large monitor, articles in reading view can display in a multi-column, horizontally scrolling page.
If you like to read on a tablet while holding it in portrait mode, or if IE is displayed side-by-side with another app window, articles in reading view will display in a single-column, vertically scrolling page. As a general rule, if the IE window isn’t wide enough to show two columns of text, then reading view will use a single-column, vertically scrolling layout.
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 Web is a big and dynamic space, and from an engineering perspective, our algorithm aims to retrieve the most relevant content for the largest number of reading view eligible sites. These heuristics look at HTML tags, node depth, image size, and word count to determine what content on the page is the “main” content.
We have put together an interactive Reading View Test Drive demo to provide more details on key rules used in the Reading View extraction algorithm. We hope these tips will help content managers and developers ensure their site looks great on reading view.
Happy reading
We are excited to bring reading view to IE11. Try it out today and please share your thoughts.
— Jane Liles and Bonnie Yu, Program Managers, Internet Explorer
— Marty Hall, Interaction Designer, Internet Explorer
Comments
Anonymous
March 04, 2014
Works great in Modern IE 11 Can you add it to Desktop IE 11? I've never seen the option appear there, and would love to have that capability in Desktop.Anonymous
March 04, 2014
I love the idea but implementation needs to be better. I missed a better dark color. The one provided is too dark. Take a look the color Instapaper and Readability. I hate to need to wait the page is almost completely loaded. I will love when this feature arrives on Windows Phone too.Anonymous
March 04, 2014
Honestly, I love this! That being said, any chance website owners could get some documentation on how to optimize a page for Reading View? Seems like if there is a sidebar then the option isn't available ... sometimes. It also looks like header and footer elements are ignored, but if you had text below a footer for any reason that's included, when it maybe shouldn't ... and it appears to break if the page had a YouTube video on there.Anonymous
March 04, 2014
The comment has been removedAnonymous
March 04, 2014
Two things: a) Why is reading view so slow? Seems it always reloads the page whenever I turn it on/off. b) I would like to always have the single-column Version. Would be great if you could make that configurable. Thanks.Anonymous
March 04, 2014
@Bonnie Thanks! I clicked on that page before and totally missed the </> Code button. It seems obvious now; I was just distracted while I was on the page. Some of the choices seem odd. There are open graph properties for some of these that are not being used as an option. Open graph article published time for example. No use of Authorship Markup (though it seems to work even without byline)? And really, a meta tag for the title? Between the title tag, an open graph page title, a twitter card title, and a microdata schema name property the new tag brings us to 5 different ways to specify the name of a page. Some of our inline images that are supposed to be aligned to the side are, while some are not. Any heuristic for why this may be?Anonymous
March 04, 2014
I really like Reading View and appreciate the effort that went into making it work so quickly. I too would greatly appreciate the ability to enter Reading View from the desktop version of IE11.Anonymous
March 04, 2014
Great stuff concerning the optical sizes! Now could you please ask the Windows development guys whether they could update the "Windows Font Viewer" application? So that it makes use of DirectWrite and everything that comes with it like for example the optical scaling you presented here. Maybe also let people choose between different alternate styles if a font has them. And maybe also more Info on a font, e.g. what usable OpenType data it includes.Anonymous
March 04, 2014
I generally really like reading view (including the multi-column horizontal layout in widescreen) but it bugs me when a header will appear at or near the bottom of a column with most of the content starting on the next column. Shouldn't it be possible to adjust the column-izing algorithms to avoid situations like that?Anonymous
March 04, 2014
Thank you for finally publishing some documentation on how this works!Anonymous
March 04, 2014
The comment has been removedAnonymous
March 04, 2014
Amazing! I appreciate the effort and innovation Bonnie and Jane that you and the team have done on this to enhance technology to improve our lives. I'm loving it.Anonymous
March 04, 2014
The comment has been removedAnonymous
March 04, 2014
"...and it’s available for pages with a significant amount of text..." And user has to guess why it works on one page, and dont works on another? Facepalm.jpgAnonymous
March 04, 2014
@ITCrowd: You didn't really think about this did you? It's not possible to create an algorithm that works on every page and not every page needs a reading view. How would you represent a registration form in the reading view? It would be useless. And Safari shows the same behavior.Anonymous
March 04, 2014
I use reading view for hours at a time. I love it.Anonymous
March 04, 2014
@ZippyV: for what do you think stuff like http://schema.org/Article are made for? Maybe so the algorithms is very easy to code.Anonymous
March 04, 2014
@Olivier: Sure, but how many websites use it? Reading View would be completely useless if it only relied on microdata.Anonymous
March 05, 2014
I love reading view; except I don't have reading view in my IE11. (Well... one of the reasons IE is not my primary browser.) Any why this post has come so late? October 2013 was a long time ago.Anonymous
March 05, 2014
Use a reading vie on my BlackBerry Playbook for years now. My new phone BB Z30 has it too.Anonymous
March 05, 2014
Do the guidelines for generating a "Reading View"-friendly article not follow the Article schema defined at the Microsoft sponsored schema.org/Article? ie.microsoft.com/.../readingview http://schema.org/ArticleAnonymous
March 05, 2014
Please add flip-ahead feature in Reading View, so if we are reading blogs or article posts, we get next button. Please consider this for MSDN Blogs, WindowsBlog.com and WPCentral.com. Thanks for all the effort. Separately, please consider this request for desktop version of IE: connect.microsoft.com/.../ootb-sharing-options-in-internet-explorer. It will surely give a lot of benefit to the end user. Personally, that would be 1 against 1 million reasons to use Internet Explorer over other browser.Anonymous
March 05, 2014
The comment has been removedAnonymous
March 05, 2014
Given that 1) Windows 8.x is widely despised and now has a well-earned aura of failure and 2) Windows tablet devices have a marketshare of ~3% (and that's being generous), how about bringing this to "desktop" IE - and on Windows 7? I'm serious - as negative as I am on the loathsome Windows 8, I'd love to have a reading mode in IE11 on Windows 7. It can be very useful. You don't have to have a tablet (notebooks work just fine) and it really does make reading long-form articles and books a more pleasant experience. It seems there are hopeful signs that MS is re-acknowledging the existence of desktop and notebook users (ie the non-touchy people). It's a great time to start adding robustness to desktop IE and this is a great (and probably easy) place to start.Anonymous
March 05, 2014
Thank you for publishing the documentation for content creators!Anonymous
March 05, 2014
How's this going to affect adverts ? A lot of free (as in beer) websites rely on advertising revenue, if less ads are viewed their revenue goes down & may not be able to afford to continue ?Anonymous
March 05, 2014
I'd be nice if this actual article actually was displayed properly in reading mode; no images load. Not an impressive first experience.Anonymous
March 05, 2014
This is a great feature, thank you! IE11 is officially my goto browser.Anonymous
March 06, 2014
Firefox users might want to install my Column Reader extension to obtain similar features with additional presentation modes.Anonymous
March 06, 2014
The comment has been removedAnonymous
March 06, 2014
Guys I have a few suggestions for desktop ie. I know you guys are doing a great job on the 'plumbing' of ie but will there be any improvements on the UX front? I know lot of people who agree that Ie is fast when shown side by side with chrome, . But still stick to chrome because it 'Feels faster' , ' Nicer'. IE is 'Fast' but not 'Fluid' to throw your own marketing term back at you. For proof look no further than the new tab animation , how plain when compared with other browsers. Themes? Nope ,Extensions? Basic, Inbuilt translation? Nope. Paste and go for Desktop Ie? Nope. And most annoyingly a fix for google's stupid search redirection which breaks the back button!Anonymous
March 06, 2014
Guys I have a few suggestions for desktop ie. I know you guys are doing a great job on the 'plumbing' of ie but will there be any improvements on the UX front? I know lot of people who agree that Ie is fast when shown side by side with chrome, . But still stick to chrome because it 'Feels faster' , ' Nicer'. IE is 'Fast' but not 'Fluid' to throw your own marketing term back at you. For proof look no further than the new tab animation , how plain when compared with other browsers. Themes? Nope ,Extensions? Basic, Inbuilt translation? Nope. Paste and go for Desktop Ie? Nope. And most annoyingly a fix for google's stupid search redirection which breaks the back button!Anonymous
March 06, 2014
I have a few suggestions for desktop ie. I know you guys are doing a great job on the 'plumbing' of ie but will there be any improvements on the UX front? I know lot of people who agree that Ie is fast when shown side by side with chrome, . But still stick to chrome because it 'Feels faster' , ' Nicer'. IE is 'Fast' but not 'Fluid' to throw your own marketing term back at you. For proof look no further than the new tab animation , how plain when compared with other browsers. Themes? Nope ,Extensions? Basic, Inbuilt translation? Nope. Paste and go for Desktop Ie? Nope. And most annoyingly a fix for google's stupid search redirection which breaks the back button!Anonymous
March 06, 2014
Please add it to the desktop version!Anonymous
March 06, 2014
Nice work. I'm using similar heuristics to offer reading mode in my news reader application apps.microsoft.com/.../6f514a7e-296d-48c7-8971-c2489fd702b7Anonymous
March 06, 2014
The Sitka fonts have basic Latin, Greek and Cyrillic coverage. But it does NOT support Chinese.Anonymous
March 06, 2014
Best feature of IE since a long time.Anonymous
March 06, 2014
The comment has been removedAnonymous
March 06, 2014
@Leo V ... when in the Modern-IE11, you can open the same page in Desktop quite easily. I heard rumors that the Windows 8.1 Update 1 will provide that function in Desktop IE, allowing you to open the current page in Modern-IE. I sure hope so, but I cannot verify that at all. It's certainly a function that should exist... just going one way makes little since. Being able to go the other is necessary too.Anonymous
March 07, 2014
It’s great to see all the interest in our feature! I’ve taken note of your suggestions for our future releases. Regarding all the questions about why our extraction algorithm works the way it is, our perspective in building reading view was to extract as much relevant content as possible from web articles. The algorithm was developed using a sample of the web to help ensure we had the largest coverage and accuracy as possible. As we all know, the web’s a pretty complex place A few examples of the issues to consider • If we decided to support only certain formats such as OG and the hNews microformat, we can miss on a lot of content • What if a developer uses both the <title> element and OG title tag with different title strings? What is the correct title? There are many nuances to this problem. For our initial release, we optimized for best user experience by supporting APIs websites are currently using. We hear your feedback that this doesn’t make it as easy as it could be for developers that want to explicitly target the feature in their site. We’ll investigate what we can do in future releases to improve this for developers, including considering things like supporting other formats and tags. @BrianLePore The meta tag for the title is not required. We allow for using the meta tag since it is already widely used and provides an alternate means of specifying the article title. The algorithm does look at other potential title candidates as well. If you want to simplify your code base, having the <title> element in your header and making sure the title text in your article body matches is sufficient for the title to be captured correctly J Regarding images, reading view aligns the image based on the original size of the image. Sometimes you will see text wrapping sometimes you will see it centered.Anonymous
March 07, 2014
I was postponing W8.1 update, but that is a must have!Anonymous
March 09, 2014
The comment has been removedAnonymous
March 10, 2014
The comment has been removedAnonymous
March 10, 2014
Please tell me that I can specifically choose a sans-serif font instead of your new serif font? We're still ticked about the mess created with FuzzyType [TM]. Otherwise this feature is useless.Anonymous
March 11, 2014
The comment has been removedAnonymous
March 11, 2014
Try Reading View for this very page and you'll notice that it's not working very reliably. Specifically the font examples (images) are missing.Anonymous
March 11, 2014
The comment has been removedAnonymous
March 11, 2014
@ZippyV : I agree with you that most websites don't use schemas stuff. But why Microsoft invent and recommends weird techniques to optimize for "IE11 reading view", when they could have just recommended using standard stuff like microdatas?Anonymous
March 12, 2014
@hAl ... I can reproduce it on any machine. Different makes and manufacturers. Desktops and laptops. It ALWAYS happens. CONSTANTLY. I cannot fathom how anyone cannot notice this... unless they're shutting down IE all the time. All you have to do is leave it open running many tabs, and just use it throughout the day. Certain sites do seem to set it off more often, but I've seen it happen with any sites eventually. I don't use any plugins or java. I have vanilla IE installs. But yes, Facebook and Twitter are two of the sites you'll see it on, along with io9.com and gizmodo.com and verge.com and others. You just have to be patient enough. Sometimes it'll take a couple days. Sometimes only hours. Sometimes just sitting over night will do it. Sometimes it does it while actively using it. Others in the past have duplicated this... you can "force" it by opening a ton of tabs, but there's no need for that. Half a dozen or so will do. I've yet to see any machine that doesn't have this issue with IE, and I've heard other people talk about the "white tab" problem themselves. Simply shutting down IE "fixes" it, but that's annoying when you use sites that keep state and you don't want to have to "start over".Anonymous
March 12, 2014
Great feature! Please add it to the desktop version of IE, too! Thanks!Anonymous
March 13, 2014
Great feature, love it. Wish it will do faster when turn off Reading View to normal view. On my count, it's about 3 seconds to get back to fully load normal view page. Where's the cache page gone?Anonymous
March 16, 2014
@pmbAustin : I got the same problem also with IE8.Anonymous
March 17, 2014
The comment has been removedAnonymous
March 17, 2014
Yeah, @Olivier, I've noticed it since IE9. But it's seem to become much more frequent. I have no idea if the problem is actually worse now in the code, or I just notice it more because I visit more sites that trigger it (due to more javascript or more ads or whatever it is that is trigging it). But I get the problem EVERY DAY. Every. Single. Day. I sometimes wish I could just get MS to hook up a remote debugger every time one of my tabs goes blank (or starts flashing), and one of the iexplore.exe process starts chewing up 20+% CPU steadily... and I just cannot believe nobody inside MS or on the IE team has never seen this or has no idea what I'm talking about.