Как работает просмотр читателей Firefox

Резюме

Я ищу критерии, по которым я могу создать веб-страницу, и [честно] уверен, что она появится в Firefox Reader Просмотрите, если пользователь пожелал.

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

Вопрос

У меня обновлен Firefox от 38.0.1 до 38.0.5 и нашел новую функцию ReaderView - это своего рода наложение, которое удаляет "беспорядок страницы" и упрощает чтение текста. Readerview находится в правой части адресной строки в виде интерактивного значка на определенных страницах.

Это прекрасно, но с точки зрения программирования я хочу знать, как работает "просмотр читателя", какими критериями являются страницы, к которым он относится. Я провел некоторое исследование веб-сайта Mozilla Firefox, не имея четких ответов (все ответы на все варианты программирования, которые я нашел), я, конечно же, Googled/Binged, и это только вернулось со ссылками на дополнения Firefox - это не аддон но является основной частью новой версии Firefox.

Я сделал предположение, что readerview использовал HTML5 и извлекал содержимое <article>, но это не так, поскольку он работает в Википедии, который, как представляется, не использует теги <article> или подобные теги HTML5, вместо этого readview извлекает определенные <div> и отображает их в покое. Эта функция работает на некоторых страницах HTML5, таких как википедия, но не на других.

Если у кого-нибудь есть идеи о том, как работает Firefox ReaderView и как эта операция может быть использована разработчиками веб-сайта, вы можете поделиться ею? Или, если вы можете найти, где эта информация может быть расположена, вы можете указать мне в правильном направлении - так как я не смог найти это.

Ответ 1

Вам нужно по крайней мере один тег <p> вокруг текста, который вы хотите увидеть в режиме чтения и не менее 516 символов в 7 словах внутри текста.

например, это вызовет чтение ReaderView:

<body>
<p>
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
 123456789 123456
</p>
</body>

См. мой пример в fooobar.com/questions/125198/...

Ответ 2

Чтение кода gitHub, сегодня утром процесс состоит в том, что элементы страницы перечислены в порядке вероятности - с <section>, <p>, <div>, <article> в верхней части списка (т.е. большинство вероятно).

Затем каждому из этих "узлов" присваивается оценка, основанная на таких вещах, как подсчеты запятой и имена классов, которые относятся к node. Это несколько многогранный процесс, в который добавлены баллы для текстовых фрагментов, но также, по-видимому, уменьшены оценки для недопустимых частей или синтаксиса. Оценки в частях "node" отражаются в оценке node в целом. т.е. родительский элемент содержит десятки всех нижних элементов, я думаю.

Значение этой оценки определяет, может ли страница HTML быть просмотрена в Firefox.

Я не совсем понимаю, установлен ли значение оценки Firefox или функция чтения.

Javascript действительно не моя сильная сторона, и я думаю, что кто-то еще должен проверить ссылку, предоставленную Ричардом (https://github.com/mozilla/readability), и посмотреть, могут ли они предоставить более тщательный ответ.

То, что я не видел, но ожидал увидеть, это оценка на основе количества текстового содержимого в тегах <p> или <div> (или других).

Любые улучшения в этом вопросе или ответе, пожалуйста, поделитесь!

EDIT: Изображения в тегах <div> или <figure> (HTML5) в элементе <p>, как представляется, сохраняются в представлении Reader, когда текст текста страницы действителен.

Ответ 3

Я последовал за Мартином ссылкой на Readability.js репозиторий GitHub и посмотрел исходный код. Вот что я могу сделать.

Алгоритм работает с тегами абзаца. Прежде всего, он пытается идентифицировать части страницы, которые определенно не являются подобными формам и т.д. - и удаляет их. Затем он проходит через узлы абзаца на странице и присваивает оценку, основанную на насыщенности содержимым: он дает им точки для таких вещей, как количество запятых, длина содержимого и т.д. Обратите внимание, что абзац с менее чем 25 символами сразу отбрасывается.

Затем оценивается "пузырь" дерева DOM: каждый абзац добавляет часть его оценки всем родительским узлам - прямой родитель получает полный балл, добавленный к его сумме, только бабушка и дедушка, половина прабабушка и третий и т.д. Это позволяет алгоритму идентифицировать элементы более высокого уровня, которые, вероятно, будут основным разделом содержимого.

Хотя это всего лишь алгоритм Firefox, я думаю, что если он хорошо работает для Firefox, он будет хорошо работать и для других браузеров.

Чтобы эти алгоритмы Reader View работали на вашем веб-сайте, вы хотите, чтобы они правильно идентифицировали контент-тяжелые разделы вашей страницы. Это означает, что вы хотите, чтобы более узкие страницы контента на вашей странице получали высокие баллы в алгоритме.

Итак, вот некоторые эмпирические правила, чтобы улучшить качество страницы в глазах этих алгоритмов:

Используйте теги абзацев в вашем контенте! Многие люди склонны игнорировать их в пользу тегов <br />. Хотя это может выглядеть похоже, многие связанные с содержанием алгоритмы (не только Reader View) сильно зависят на них.
Используйте семантические элементы HTML5 в вашей разметке, например <article>, <nav>, <section>, <aside>. Несмотря на то, что они не являются единственным критерием (как вы отметили в вопросе), это очень полезно для компьютеров, читающих ваши страницы (а не только Reader View), чтобы различать различные разделы ваш контент. Readability.js использует их, чтобы угадать, какие узлы, вероятно, или вряд ли содержат важный контент.
Оберните основное содержимое в один контейнер, например <article> или <div> элемент. Это будет получать очки очков за все теги абзаца внутри него и быть идентифицированным как основной раздел контента.
Следите за тем, чтобы дерево DOM было неглубоко в областях с плотным содержанием. Если у вас много элементов, нарушающих ваш контент, вы только делаете жизнь сложнее для алгоритма: не будет ни одного элемента, который выделяется как родитель многих абзацев, содержащих контент, но многие отдельные с низкими баллами.