Як працює подання зчитувача Firefox

Question 1

Резюме

Я шукаю критерії, за якими я можу створити веб-сторінку та бути [досить] впевненим, що вона з’явиться у поданні Firefox Reader , за бажанням користувача.

Деякі сайти мають цю опцію, інші - ні. У деяких із більшою кількістю тексту ця опція відсутня, ніж у інших із значно меншою кількістю тексту. Наприклад, переповнення стека відображає лише запитання, а не відповіді у поданні Reader View.

Питання

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

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

Я висловив припущення, що читання використовувало HTML5 і витягувало <article>вміст, але це не так, оскільки це працює у Вікіпедії, яка, схоже, не використовує <article>або подібні теги HTML5, натомість readview витягує певні <div>s та відображає їх окремо. Ця функція працює на деяких сторінках HTML5, таких як wikipedia, але не на інших.

Якщо хтось має ідеї, як насправді працює Firefox ReaderView і як цю операцію можуть використовувати розробники веб-сайтів, чи можете ви поділитися? Або якщо ви можете знайти, де ця інформація може бути розташована, ви можете вказати мені в правильному напрямку - оскільки мені не вдалося знайти це.

Question 2

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

наприклад, це запустить ReaderView:

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

Дивіться мій приклад на https://stackoverflow.com/a/30750212/1069083

Question 3

Читання через код GitHub, вранці, процес є те , що сторінка елементи перераховані в порядку правдоподібності - з <section>, <p>, <div>, <article>у верхній частині списку (тобто , швидше за все).

Потім кожному з цих "вузлів" присвоюється оцінка на основі таких речей, як підрахунок коми та назви класів, що застосовуються до вузла. Це дещо багатогранний процес, коли оцінки додаються для фрагментів тексту, але також оцінки, здається, зменшуються для недійсних частин або синтаксису. Бали в підрозділах "вузла" відображаються в оцінці вузла в цілому. тобто батьківський елемент містить оцінки всіх нижчих елементів, я думаю.

Це значення оцінки вирішує, чи можна HTML-сторінку "переглядати сторінку" у Firefox.

Мені не зовсім зрозуміло, чи значення оцінки встановлюється Firefox або функцією читабельності.

Javascript насправді не є моєю сильною стороною, і я думаю, що хтось інший повинен перевірити посилання, надане Річардом ( https://github.com/mozilla/readability ), і перевірити, чи зможуть вони дати більш ґрунтовну відповідь.

Те, що я не бачив, але очікував побачити, - це оцінка на основі кількості текстового вмісту в <p>або <div>(або інших) відповідних тегах.

Будь-які покращення щодо цього питання чи відповіді, будь ласка, поділіться !!

РЕДАКТУВАТИ: Зображення <div>або <figure>теги (HTML5) в <p>елементі, здається, зберігаються в режимі читання, коли вміст тексту сторінки є дійсним.

Question 4

Я перейшов за посиланням Мартіна на сховище GitHub Readability.js і подивився вихідний код. Ось, що я з цього роблю.

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

Потім результати оцінюють дерево DOM: кожен абзац додасть частину оцінки до всіх батьківських вузлів - прямий батько отримує повний бал до загальної суми, дідусь і бабуся лише половину, прадідусь третій і так далі на. Це дозволяє алгоритму визначати елементи вищого рівня, які, ймовірно, будуть основним розділом змісту.

Хоча це лише алгоритм Firefox, я думаю, якщо він добре працює для Firefox, він буде добре працювати і для інших браузерів.

Щоб ці алгоритми Reader View працювали на вашому веб-сайті, ви хочете, щоб вони правильно визначали важкі за вмістом розділи вашої сторінки. Це означає, що ви хочете, щоб більш важкі вузли на вашій сторінці отримували високі бали в алгоритмі.

Отже, ось кілька основних правил для покращення якості сторінки в очах цих алгоритмів:

Використовуйте теги абзаців у своєму вмісті! Багато людей, як правило, не помічають їх на користь <br />тегів. Хоча це може виглядати схоже, багато алгоритмів, пов’язаних із вмістом (і не лише Reader View), значною мірою покладаються на них.
Використання HTML5 семантичні елементи в розмітці, як <article>, <nav>, <section>, <aside>. Незважаючи на те, що це не єдиний критерій (як ви вже зазначали у запитанні), вони дуже корисні для комп'ютерів, які читають вашу сторінку (а не лише Reader View), щоб розрізняти різні розділи вашого вмісту. Readability.js використовує їх, щоб вгадати, які вузли, ймовірно, чи навряд чи містять важливий вміст.
Оберніть свій основний вміст в одному контейнері, як елемент <article>або <div>. Це отримає бали від усіх тегів абзаців у ньому та буде визначено як основний розділ змісту.
Тримайте дерево DOM дрібним у місцях, щільних вмістом. Якщо у вас багато елементів, що розбивають ваш вміст, ви лише ускладнюєте життя алгоритму: не буде жодного елемента, який би виділявся як батьківський для багатьох абзаців, важких за вмістом, а багатьох окремих з низькими балами.