Разработка HTML для режима чтения Safari

Apple не дает никаких рекомендаций по проектированию Safari Reader Mode. Может быть, они хотят иметь право изменить его в любое время или, может быть, это для предотвращения злоупотреблений и рекламы. Точно так же практически невозможно найти какие-либо сторонние рекомендации о том, как структурировать ваш HTML. В основном это угадывание, проверка режима чтения, редактирование HTML, перезагрузка до тех пор, пока он не заработает. Но посмотрев исходный код Reader javascript и множество View Source на многочисленных публикациях, я придумал некоторые правила, как структурировать HTML для оптимизации для Reader. Есть, без сомнения, много альтернативных правил и макетов, но это, похоже, работает.

Структурирование основного содержимого

Основное содержимое (включая заголовок и другое содержимое) должно быть в одном теге <main>. Другие тэги, такие как <article>, также работают. Статья должна быть текстовой. Если существует слишком много ссылок, списков или других нетекстовых элементов, Reader может не запуститься. И наоборот, если HTML-узел непосредственно перед статьей имеет большой объем текста, он может просочиться в основную статью.

Структура заголовка

Заголовок статьи должен быть <h1> сразу после тега <main>.

Структурировать подзаголовок

Поместите подзаголовок или краткое описание как <div> под тэгом <h1>.

Похоже, подзаголовок имеет максимальную длину менее 200 символов. Если он превышает это значение, то рассматривается как абзац. 150 символов кажутся безопасными, но неясно каков порог извлечения.

Добавление даты публикации в подпись

Под подзаголовком добавьте тег <div>, который содержит тэг <time> с атрибутом datetime для даты публикации, и Reader создаст подпись с автором и датой. Неясно, откуда берется авторская часть. Возможно, из метаданных Google, Open Graph или Twitter Card.

В PHP битрикса это можно сделать с помощью:

<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>

Работа с подписью

Вы также можете сделать подпись. Если в <div> выше также используется класс byline, Reader использует весь класс <div> в качестве подписи. На заметку: текст должен быть коротким или Reader отклонит его. Класс byline не нужно определять или предоставлять стиль, он просто должен присутствовать. Также можно использовать другие классы CSS, но необходимо включить byline.

<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<div class="byline another-class etc">
Автор: <a href="/">Имя автора</a> -
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>
</div>

Все вместе

В конце концов, основной HTML для содержимого должен выглядеть следующим образом:

<main>
<h1>Заголовок<h1>
<div>Подзаголовок</div>
<?
$stmp = MakeTimeStamp($arResult['ACTIVE_FROM'], "DD.MM.YYYY HH:MI:SS");
$stmpActiveFrom = date("c", $stmp); // 2020-02-19MSK11:32:00
?>
<div class="byline another-class etc">
Автор: <a href="/">Имя автора</a> -
<time itemprop="datePublished" datetime="<?=$stmpActiveFrom?>" class="active-date">
    <?=$arResult['DISPLAY_ACTIVE_FROM'];?>
</time>
</div>
<p> Содержимое статьи... </p>
</main>

Есть и другие варианты, которые могут работать, но это хорошая основа для начала. Не исследовано, как изображения работают с Reader.

Обновление 2018-04-12: Изменен тэг обертки с <article> на <main>. Использование <main> является более доступным.

Перевод статьи Ника Галбрита.
Источник: https://www.client9.com/designing-html-for-safari-reader-mode/