Как работает просмотр в Firefox?
Резюме
Я ищу критерии, по которым я могу создать веб-страницу и быть [достаточно] уверенным, что она появится в представлении Firefox Reader, если пользователь пожелает.
Некоторые сайты имеют эту опцию, некоторые нет. Некоторые с большим количеством текста не имеют этой опции, чем другие с намного меньшим количеством текста. Например, Переполнение стека отображает только вопрос, а не любые ответы в представлении Reader.
Вопрос
Я обновил Firefox с 38.0.1 до 38.0.5 и обнаружил новую функцию под названием Reader View, которая является своего рода наложением, которое устраняет "беспорядок на странице" и облегчает чтение текста. Readerview находится в правой части адресной строки в виде кликабельного значка на определенных страницах.
Это хорошо, но с точки зрения программирования я хочу знать, как работает "читательский взгляд", к каким критериям он относится к каким страницам. Я провел некоторое исследование веб-сайта Mozilla Firefox без четких ответов (отменил все найденные мной ответы на любые вопросы о программировании), я, конечно, гуглил / Binged, и это возвращалось только со ссылками на аддоны Firefox - это не аддон но основная часть новой версии Firefox.
Я сделал предположение, что читатель использует HTML5 и извлечет <article> содержание, но это не тот случай, так как он работает в Википедии, которая, кажется, не использует <article> или аналогичные теги HTML5, вместо этого readview извлекает определенные <div> с и отображает их в одиночку. Эта функция работает на некоторых страницах HTML5, таких как Википедия, но не на других.
Если у кого-то есть идеи, как на самом деле работает Firefox Reader View и как эта операция может использоваться разработчиками веб-сайтов, можете поделиться? Или, если вы можете найти, где эта информация может быть расположена, вы можете указать мне правильное направление - так как я не смог найти это.
3 ответа
Тебе нужен как минимум один <p> Обведите текст вокруг текста, который вы хотите видеть в Reader View, и не менее 516 символов в 7 словах внутри текста.
например, это вызовет ReaderView:
<body>
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</body>
Смотрите мой пример на /questions/45786078/optimizirujte-veb-sajt-chtobyi-pokazat-chitatelyu-predstavlenie-v-firefox/45786097#45786097
Сегодня утром, читая код gitHub, процесс состоит в том, что элементы страницы перечислены в порядке вероятности - с <section>,<p>,<div>,<article> в верхней части списка (то есть, скорее всего).
Затем каждому из этих "узлов" присваивается оценка, основанная на таких вещах, как число запятых и имена классов, которые применяются к узлу. Это несколько многогранный процесс, в котором оценки добавляются для фрагментов текста, но также оценки, по-видимому, уменьшаются для неверных частей или синтаксиса. Результаты в подразделах "узла" отражаются в оценке узла в целом. то есть родительский элемент содержит оценки всех более низких элементов, я думаю.
Это значение решает, может ли HTML-страница быть "просмотренной страницей" в Firefox.
Мне не совсем понятно, установлено ли значение оценки Firefox или функцией читабельности.
Javascript на самом деле не моя сильная сторона, и я думаю, что кто-то другой должен проверить ссылку, предоставленную Ричардом ( https://github.com/mozilla/readability), и посмотреть, смогут ли они дать более подробный ответ.
То, что я не видел, но ожидал увидеть, было счетом, основанным на количестве текстового содержания в <p> или <div> (или другие) соответствующие теги.
Любые улучшения по этому вопросу или ответу, пожалуйста, поделитесь!
РЕДАКТИРОВАТЬ: Изображения в <div> или же <figure> теги (HTML5) внутри <p> элемент отображается в представлении Reader, если текстовое содержимое страницы является действительным.
Я перешел по ссылке Мартина на GitHub-репозиторий Readability.js и посмотрел исходный код. Вот что я делаю из этого.
Алгоритм работает с тегами абзаца. Прежде всего, он пытается идентифицировать части страницы, которые определенно не являются контентом - например, формы и т. Д. - и удаляет их. Затем он проходит по узлам абзаца на странице и назначает оценку на основе богатства контента: он дает им баллы за такие вещи, как количество запятых, длина контента и т. Д. Обратите внимание, что абзац, содержащий менее 25 символов, немедленно отбрасывается.
Затем баллы "всплывают" в DOM-дереве: каждый абзац добавляет часть своего балла ко всем своим родительским узлам - прямой родитель получает полный балл, добавленный к его итоговому значению, прадедушка - только половину, прадедушка - третий и т. Д. на. Это позволяет алгоритму идентифицировать элементы более высокого уровня, которые, вероятно, будут основным разделом контента.
Хотя это всего лишь алгоритм Firefox, я предполагаю, что если он работает хорошо для Firefox, он будет хорошо работать и для других браузеров.
Чтобы эти алгоритмы Reader View работали на вашем сайте, вы хотите, чтобы они правильно идентифицировали содержательные разделы вашей страницы. Это означает, что вы хотите, чтобы более насыщенные контентом узлы на вашей странице получали высокие оценки в алгоритме.
Итак, вот несколько практических правил по улучшению качества страницы в глазах этих алгоритмов:
- Используйте теги абзаца в вашем контенте! Многие люди склонны игнорировать их в пользу
<br />теги. Хотя это может выглядеть одинаково, многие алгоритмы, связанные с контентом (не только Reader View), сильно зависят от них. - Используйте семантические элементы HTML5 в вашей разметке, например,
<article>,<nav>,<section>,<aside>, Несмотря на то, что они не являются единственным критерием (как вы отметили в вопросе), они очень полезны для компьютеров, читающих вашу страницу (не только Reader View), чтобы различать различные разделы вашего контента. Readability.js использует их, чтобы угадать, какие узлы могут содержать или не содержать важный контент. - Оберните ваш основной контент в один контейнер, как
<article>или же<div>элемент. Он получит баллы за все теги абзаца внутри и будет определен как основной раздел контента. - Держите ваше дерево DOM неглубоким в областях с высоким содержанием. Если у вас много элементов, разбивающих ваш контент, вы только усложняете работу алгоритма: не будет ни одного элемента, который выделялся бы как родитель для множества абзацев с большим содержанием, но было бы много отдельных с низкими баллами.