Search code examples
htmlcsssafarimicrosoft-edgereader

How to ensure that an IMG is displayed in the Reader Viewer?

I'm using the following HTML/CSS to display images of screenshots of my product:

<p>Review the following screenshots:</p>
<div>
<a href="images/pic1.png" target="_blank" title="Full size screenshot 1">
<img border="0" src="images/pic1.png" class="wbrdr"></a>
<a href="images/pic2.png" target="_blank" title="Full size screenshot 2">
<img border="0" src="images/pic2.png" class="wbrdr"></a>
</div>

with the following CSS:

img.wbrdr
{
    padding: 1px;
    border: 1px solid #cccccc;
    -moz-box-shadow: 3px 3px 3px #cccccc;
    -webkit-box-shadow: 3px 3px 3px #cccccc;
    box-shadow: 3px 3px 3px #cccccc;
    height: auto; 
    width: auto; 
    max-width: 200px; 
    max-height: 200px;
}

This works fine when the page is viewed normally, but for some reason when I tried to view it as a "Reader View" in Sarari in iOS, or as "Reading view" in Microsoft Edge:

enter image description here

My screenshot images were not used/displayed. (Although that worked in Firefox.)

Any idea what am I doing wrong here?

Solution

  • I run the code you providing directly in Microsoft Edge and the Reading view icon is grey.

    Then I add some other paragraphs and I find that the screenshot images can be displayed in Reading view in Microsoft Edge without being wrapped by <div>. You could try the following sample in Microsoft Edge:

    <h2>A layout that is easy on the eyes</h2>
<p>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.</p>
<p>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.</p>
<p>Review the following screenshots:</p>
<a href="images/pic1.png" target="_blank" title="Full size screenshot 1">
    <img border="0" src="images/pic1.png" class="wbrdr">
</a>
<a href="images/pic2.png" target="_blank" title="Full size screenshot 2">
    <img border="0" src="images/pic2.png" class="wbrdr">
</a>