How to properly support reader-mode on a blog?
Hi!
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