Triggering Safari Reader

I do most of my blog reading on my iPhone so it’s really important for me that
my blog looks good on the iPhone.

One feature that I really like is the “Reader” feature that shows up in the
address bar on both mobile and desktop Safari.

One issue with it though is that there is no documentation (that I can find)
about how to markup your site so it consistently triggers the reader.

I noticed that on some of my shorter posts it didn’t work and in reality it’s
not that big of a deal because my site is responsive, but it still bugged me.

After digging through blog posts, comments and forums I came across this comment
that showed that one word of content in an html5 article tag with a height of
350px triggered the reader.

So I started doing some testing of my own. What I found is that in desktop
safari I was able to wrap my content in an article tag and set min-height to
350px and short content would trigger reader. If I shrunk the width of the
browser to a phone width and refreshed the page it did not trigger. If I
increased the min-height to 450px then it worked, but when I published the
site live and tested on my phone it did not work. I had to increase min-height
to 600px in order for my iPhone to show reader on a short blog post.

This is a pain in the ass, especially since the reader isn’t respecting the
constraints of the article tag. It also pulls in the “Feedback” section in
the footer of each blog post. Not the end of the world but still annoying.

I’m guessing part of the reason it’s kept a secret is that Apple doesn’t want
sites messing with it and hiding the post content and showing ads instead (or
something along those lines). People were certainly getting upset when this
feature was released.

Author: Andrew Shell

Madison, WI developer, Co-Founder and CTO of Pinpoint Software, founder of Madison PHP.

Leave a Reply