How to properly support reader-mode for a blog?
Hi!
I submitted this post to the safari-section a couple weeks ago but go no answers, so now I'm shooting my shot here.
I'm trying to write proper semantic html with the explicit goal to support Safaris reader mode. On this journey, I stumbled upon various intricacies. My page runs locally in a development-setup, so a description of the HTML-topology will have to suffice.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<link href="/rss.xml" rel="alternate" title="Text-Feed" type="application/rss+xml"/>
<link href="/rss.xml?html" rel="alternate" title="HTML-Feed" type="application/rss+xml"/>
<title>
Target Name
</title>
</head>
<body>
<header>
<h1>
<a href="/target" style="text-decoration:none;color:black">
Target Name
</a>
</h1>
</header>
<main>
<section>
<time datetime="2022-04-05" itemprop="datePublished">
<h2>
Tue Apr 5 2022
</h2>
</time>
<a href="?ts=9cb2ce68">
[l]
</a>
// long blogpost here
<a href="?ts=9cb54d35">
[l]
</a>
// long blogpost here
</section>
<section>
<time datetime="2022-04-04" itemprop="datePublished">
<h2>
Mon Apr 4 2022
</h2>
</time>
<a href="?ts=9cb5ef02">
[l]
</a>
// long blogpost here
<a href="?ts=9cb408b5">
[l]
</a>
// long blogpost here
<a href="?ts=9cb402d0">
[l]
</a>
// long blogpost here
<a href="?ts=9cb40010">
[l]
</a>
// long blogpost here
</section>
// more sections (no more than 7 in total) following here.
</main>
<footer>
<p>
</p>
<div style="text-align:center">
<a href="/target?mon=202204">
some text
</a>
</div>
<div style="text-align:right">
more text
<br/>
<a href="link.html">
labels
</a>
</div>
</footer>
</body>
</html>
So basically, I wrap a bunch of blog-posts inside <section>-tags per day. This seems semantically clean and works flawless for other implementations of reader-mode (validated for Firefox).
Sadly, after doing quite a bit of research on the topic, I'm no smarter than when I started with respect to the implementation in Safari, I found no guide for devs or anything of that kind. But what really got me to write this post is: for some reason, Safaris reader mode shows all the blog posts *twice*. In reader view, I get a second page where everything starts over from the beginning, leading to a very confused developer. This applies across all my (apple-) devices and is not a cache-problem. If instead I wrap the single blog posts in <article> tags (in addition to the section-wrappings), only the posts for the top-most (and most recent) day are displayed. Fascinatingly, even then we get a page2 that repeats all the content that was already displayed on page 1. But the content just appears once in the HTML-Markup, and the HTML-Markup should be perfectly clean. It's parsed by Pythons BeautifulSoup-library, using the lxml-parser.
Am I overlooking existing documentation? Is the source code for Safaris reader implementation public? Where do I need to look so I can support reader mode for my websites and blogs? I don't know where to look further and I really want to solve this, I find the web increasingly unusable without reader mode. This is my daily driver, it's the way I consume the web, I really, really want to be able to support this. Please send help!
Cheers,
Max
