为Safari浏览器模式设计HTML

使你的HTML页面适用于Safari阅读模式的简单规则，并创建字幕和衬线

Nick Galbreath-四月 10, 2018

不管什么原因，苹果公司没有提供任何关于如何为Safari阅读模式设计的指导。也许他们希望有权利随时改变它，或者是为了防止滥用和广告潜入。同样地，几乎不可能找到任何关于如何构造你的HTML的第三方指导。它主要是猜测，检查阅读器模式，编辑HTML，重新加载直到它工作。但是，在看了Reader的javascript源代码，以及在许多出版物上看了大量的源码之后，我想出了一些关于如何结构HTML以优化Reader的规则。毫无疑问，有许多替代规则和布局，但这似乎是有效的。

结构化的主要内容

主要内容（包括标题和其他内容）应该在一个单一的<main> 标签中。其他标签如<article> 也可以。文章应以文字为重。如果有太多的链接、列表或其他非文本项目，Reader可能不会触发。相反，如果文章节点之前的HTML节点是文字密集型的，它可能会渗入主文章中。

标题的结构

文章的标题应该是紧跟在<main> 标签之后的

。

副标题的结构

将副标题或简短的描述作为<h1> 标签下的<div> 。

2018-05-01更新：似乎副标题的最大长度低于200个字符。如果它超过这个值，它只是被当作段落处理。150个字符似乎很安全，但不清楚提取的阈值是什么。

添加一个出版日期的署名

在副标题下面，添加一个<div> ，包裹一个<time> 标签，有一个datetime 属性，用于出版日期，将触发Reader制作一个带有作者和日期的署名。目前还不清楚作者的部分来自哪里。可能是来自谷歌搜索、Open Graph或Twitter Card元数据。

在hugo，静态网站博客生成器，这可以用。

<div>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z" }}">
{{- .Date.Format (.Site.Params.dateform | default "January 2, 2006") -}}
</time>
</div>

使用署名的工作

你也可以制作有限的自定义署名。如果上面的<div> 也使用了一个byline 类，Reader就使用整个<div>作为署名。在合理范围内：总的文本需要很短，否则Reader会拒绝它。byline 这个类不需要定义或提供样式，它只需要存在就可以了。同样，其他CSS类也可以使用，但byline ，必须包括在内。

同样，在hugo。

<div class="byline another-class etc">
By <a href="/">Your Name Here</a> --
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z" }}">
{{- .Date.Format (.Site.Params.dateform | default "January 2, 2006") -}}
</time>
</div>

全部合在一起

最后，内容的主要HTML应该看起来像。

<main>
<h1>Your title<h1>
<div>Your subtitle</div>
<div class="byline">
By <a href="/">Your Name</a> -- 
<time datetime="2018-04-06T05:52:50Z">April 6, 2018</time>
</div>
<p> article content... </p>
<p> article content... </p>
</main>

还有其他可能的变化，但这提供了一个良好的基础，可以开始。没有调查的是图像如何与读者一起工作。当有疑问时，在主要出版物上查看来源是你的朋友。

2018-04-12更新：将包装标签从<article> 改为<main> 。使用<main> 更方便。

为Safari阅读模式设计HTML