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.
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
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.

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.

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 (54)

  1. pmbAustin says:

    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.

  2. Vitor Canova says:

    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.

  3. Brian LePore says:

    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.

  4. BonnieYu says:

    @pmbAuton / Vitor Canova Thanks! This is noted. We will look into support for Desktop IE11 and your other feedbacks for future releases 🙂

    @Brian LePore Currently Reading View does not extract inline article videos. We will look into that for future releases! Documentation for optimizing your page for Reading View can be found at our test drive demo. Click on the </> Code button for flat text documentation

    ie.microsoft.com/…/readingview

    Let us know if that helps!

  5. Matt says:

    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.

  6. Brian LePore says:

    @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?

  7. Ryan Williams says:

    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.

  8. Brenno says:

    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.

  9. contextfree says:

    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?

  10. Daniel Aleksandersen says:

    Thank you for finally publishing some documentation on how this works!

  11. Sean Hogan says:

    Since there is obviously demand for this feature (and browsers are responding) it would be nice if there was better agreement between the browsers on how to identify the primary content (and meta-data) of a page.

    "Keep most of the article text the same font size and DOM depth" is pretty vague advice for CMSes, page authors, etc.

    Another thing I'd like to see is user-defined Reader Views – that would be like user-stylesheets on steroids.

  12. Andy Much says:

    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.

  13. Anonymous says:

    As long as desktop IE doesn't have all the features of Metro IE, it's hard to take you guys seriously.

  14. ITCrowd says:

    "…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.jpg

  15. ZippyV says:

    @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.

  16. Jay Gourley says:

    I use reading view for hours at a time. I love it.

  17. Olivier says:

    @ZippyV: for what do you think stuff like http://schema.org/Article are made for? Maybe so the algorithms is very easy to code.

  18. ZippyV says:

    @Olivier: Sure, but how many websites use it? Reading View would be completely useless if it only relied on microdata.

  19. 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.

  20. Marek says:

    Use a reading vie on my BlackBerry Playbook for years now. My new phone BB Z30 has it too.

  21. youzer says:

    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/Article

  22. The Deeds says:

    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.

  23. Frank P. says:

    Just read this article using reading view: windowsitpro.com/…/exchange-2013-sp1-bug-breaks-third-party-products

    Right after: "It is likely that critics will level four charges against …", reading view is not displaying the four bullet points. I was close to missing that until I closed reading view.

    Second, sometimes links in articles like this one do not open correctly in new tabs.

  24. Chris W. says:

    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.

  25. Peter Adam says:

    Thank you for publishing the documentation for content creators!

  26. Dave D says:

    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 ?

  27. Joe says:

    I'd be nice if this actual article actually was displayed properly in reading mode; no images load. Not an impressive first experience.

  28. Dan says:

    This is a great feature, thank you!  IE11 is officially my goto browser.

  29. Peter Sloetjes says:

    Firefox users might want to install my Column Reader extension to obtain similar features with additional presentation modes.

  30. Copingwith8 says:

    At last, somebody is combatting the insanity of webshouting clutter we wade through every day! Some people like living and working in a swamp, god bless 'em, but I am so very tired of it. Thank you!! I look forward to using this feature. When 8.1 enterprise upgrade is downloadable. When it's not on the short attention span no tabs SQUIRREL! start screen metro modern consumer kitchen junk drawer fisher-price side, but on the power user hey we're workin' here desktop version of IE. Please. But why is developing it for desktop not a no-brainer? And I second Chris W's request for a Win7 version. It's time to remember the power users, and not make us wait for the next tock in the tick/tock cycle of sucks/works OS's. Please.

  31. gawicks8 says:

    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!

  32. gawicks8 says:

    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!

  33. gawicks8 says:

    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!

  34. Bal says:

    Please add it to the desktop version!

  35. vasek7 says:

    Nice work. I'm using similar heuristics to offer reading mode in my news reader application apps.microsoft.com/…/6f514a7e-296d-48c7-8971-c2489fd702b7

  36. Ivan says:

    The Sitka fonts have basic Latin, Greek and Cyrillic coverage. But it does NOT support Chinese.

  37. alvatus says:

    Best feature of IE since a long time.

  38. Leo V says:

    A really nice feature! Pitty I won't be using it often, since I'd need to switch from the desktop browser to the other browser and re-enter the URL.  A button that switches browsers (desktop – Metro v.v.) automatically using the same URL would be greatly apreciated.

  39. pmbAustin says:

    @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.

  40. BonnieYu says:

    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.

  41. Luiz says:

    I was postponing W8.1 update, but that is a must have!

  42. pmbAustin says:

    REALLY hoping there's a fix for the "white/blank-tab" aka "flashing tab" aka "iexplore.exe memory and handles have skyrocketed" bug.  Call it what you will, but it's infuriating, and I experienced it a TON over the weekend.  Just open a bunch of tabs and leave them open for a while, while browsing around.  The gawker sites, plus facebook, plus twitter seem to be good enough to trigger this.

    What happens is that one of the iexplore.exe processes will just start growing.  When it gets in the 500,000k-600,000k range, page refreshes and rendering will start to slow down (flashing).  Beyond 600,000k somewhere, rendering will stop all together, and the page is just white/blank.  If you look at the process, you'll see it's typically spinning at around 20% CPU all of a sudden. If the process size gets high enough, rendering will stop in other areas of the system, like the icons in File Open dialogs.  Killing the process will bring everything back.

    This has been around since IE9 and it's just been getting worse and worse (more and more frequent).  I can't believe nobody at MS can duplicate this… everyone I know experiences it, and I experience it MULTIPLE TIMES PER DAY.  This needs to be top priority on bug-fixing.

  43. Jim Birch says:

    Error in the text, needs fixing

    "Some Web articles require significant effort to read, because there is so much other content on the page."

    I think you meant "crap"  

  44. Jason says:

    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.

  45. __hAl__ says:

    @pmbaustin

    Can't reproduce what you describe. Seems something depending on your config / situation.

    For instance use of plugins or addons like flash or java.

    Also possible is that  you get served different javascript because of your settings (script for instance that behaves when you are logged in at g+ or facebook)

    Also possible is that you recieve conflicting jscript served by an adservers serving ads (based on your location and profile) on those sites.

  46. Simon says:

    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.

  47. Bill says:

    I just re-read this and noticed that it is only in "We're-Not-Allowed-To-Call-It-Metro" mode IE. Pity. This could have been a very useful tool if it was in the IE browser we actually use on Windows 8.

    Why not on desktop too?

  48. Olivier says:

    @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?

  49. pmbAustin says:

    @__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".

  50. Alin says:

    Great feature! Please add it to the desktop version of IE, too! Thanks!

  51. Khun T says:

    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?

  52. Olivier says:

    @pmbAustin : I got the same problem also with IE8.

  53. A. Haiku says:

    Reading view in Internet Explorer

    Only available to users in Metro mode

    Feature is unused and lonely

  54. pmbAustin says:

    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.

Skip to main content