Як увімкнути iOS 5 Safari Reader на моєму веб-сайті?


75

Як працює функція Reader Mobile Safari в iOS 5? Як увімкнути його на своєму сайті. Як я можу визначити, який вміст на моїй сторінці є статтею для запуску цієї функції?


Див stackoverflow.com/questions/30730300 / ... деякою інформацією про зчитувачах View в Firefox.
обробка

Відповіді:


67

Багато розміщених тут відповідей містять неправдиву інформацію. Ось кілька виправлень / уточнень:

  1. <article>Елемент працює відмінно , як обгортка; Safari Reader це розпізнає. Мій сайт є прикладом . Немає значення, який елемент обгортки ви вибрали, якщо він є, крім <body>або <p>. Ви можете використовувати <article>, <div>, <section>; або елементи , які є семантично некоректний для цієї мети, як <nav>, <aside>, <footer>, <header>; або навіть вбудовані елементи на зразок <span>(!).

  2. Для роботи Reader не потрібні заголовки. Ось приклад документа без будь-яких <h*>елементів, з яким Reader чудово працює: http://mathiasbynens.be/demo/safari-reader-test-3

Деякі подробиці щодо своїх висновків я розмістив тут: http://mathiasbynens.be/notes/safari-reader


8

Я протестував близько 100 варіантів цього на своєму iPhone, щоб зрозуміти, що викликає цей невловимий стан Reader. Мої висновки такі:

Ось, що я виявив, вплинуло:

  • Маючи в статті близько 200 або більше слів (або 1000 символів, включаючи пробіли), ви хочете запустити "Reader"
  • Читач НІКОЛИ не запускався, коли у мене було менше 170 слів; хоча іноді це спрацьовувало, коли у мене було 180 або 190 слів.
  • Текст всередині певних елементів, таких як <ol>або <ul>(які зазвичай не використовуються для розміщення історії), не враховуватиметься до 200 слів (однак вони відображатимуться у програмі зчитування, якщо читач спрацьовує з інших причин)
  • Обгортання 200 слів блочним елементом, таким як a, <div>або <article>видається необхідним (тим не менш, я був би здивований, якщо б існували веб-сайти, де цього ще не було)

Для повного розкриття інформації ось що я виявив НЕ вплинуло:

  • Використовуючи заголовок чи ні
  • Незалежно від того, загортаючи текст у, <p>чи дозволяючи йому вільно протікати
  • Пунктуації (тобто видалення всіх крапок, коми тощо) не вплинули)

7

Здається, алгоритм, на якому він базується, шукає p-теги і враховує роздільники типу "." у внутрішньому тексті. Розділ (div) з найбільшою кількістю очок отримує фокус.

див .: http://lab.arc90.com/experiments/readability/

Здається, це основа для режиму читання, принаймні Safari приписує це в Подяках, див .:

файл: /// C: /Program%20Files/Safari/Safari.resources/Help/A благодарності.html

Arc90 (читабельність) Авторське право © Arc90 Inc.
Читаність ліцензується за ліцензією Apache, версія 2.0.


3

У цьому питанні ( Як вимкнути Safari Reader на веб-сторінці ) є докладніші відомості. Скопійовано тут:


Мені цікаво дізнатись більше про те, що запускає опцію Reader у Safari, а що ні. Я не планував би реалізовувати щось, що могло б це відключити, але цікаво як технічна вправа.

Ось те, що я дізнався до цього часу з деякими основними іграми:

Вам потрібен принаймні один тег H. Це відбувається не лише за підрахунком символів, а за кількістю тегів P та довжиною. Напевно, шукає розриви речень '.' та інші критерії Safari надаватиме "Reader", якщо з тегом H та наступним:

1 тег P, 2417 символів 4 теги P, 1527 символів 5 теги P, 1150 символів 6 теги P, 862 символів Якщо відняти 1 символ із будь-якого з наведених вище, опція "Reader" недоступна.

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

Деякі інші цікаві речі:

Налаштування для тегів P вилучає їх із підрахунку. Налаштування відображення не має значення, а потім їх показ через 230 мс за допомогою Javascript також уникає опції Reader

Мені буде цікаво, якщо хтось зможе це визначити повністю.


2
Невірно. Елементи заголовка не потрібні для роботи Reader. Приклад: mathiasbynens.be/demo/safari-reader-test-3 Детальніше читайте тут: mathiasbynens.be/notes/safari-reader
Mathias Bynens

2

Я боровся з цим. Нарешті я вийняв <ul>позначення у своїй історії та альт! воно почало працювати.

Я не накладав обгортки на тіло, але, можливо, це зробив випадково.


1

Тег статті HTML5 не запускає його на моїх тестах. Здається, він також не працює з офлайн-вмістом (тобто сторінками, збереженими на вашому локальному комп'ютері).

Здається, це викликає блок div з великою кількістю p з великою кількістю тексту.


Я використовую <article>на своєму сайті, і Reader працює там, наприклад, mathiasbynens.be/notes/html5-levels, але не на менших статтях, наприклад mathiasbynens.be/notes/document-head . Використання <article>, здається, не має нічого спільного з цим .
Mathias Bynens

1
Будь-який елемент обгортка буде робити - <div>, <article>, <section>... Навіть дивні речі , як <nav>, <aside>або <span>працювати нормально. Детальніше тут: mathiasbynens.be/notes/safari-reader
Mathias Bynens

1

Теорія p тегів звучить добре. Я думаю, що це також виявляє й інші елементи. Одна з наших сторінок з 6 абзацами не викликала Reader, але одна з 4 абзацами та тегом img.

Він також досить розумний для виявлення багатосторінкових статей. Спробуйте це в багатосторінковій статті на nytimes.com або nymag.com. Було б цікаво дізнатись, як це виявляє також.


1

Дивно, що це може бути, але він справді не звертає уваги на тег статті HTML5, особливо розчаровуючи, враховуючи те, що Safari 5 має повну підтримку статті, розділу, навігації тощо в CSS - їх можна стилізувати як div зараз і поводитись так само, як будь-який елемент рівня блоку.

Я спеціально створив сайт із тегом статті та кількома тегами внутрішнього розділу, готуючись до семантичного маркування HTML5 саме з цією метою, тому я справді сподівався, що Safari 5 використає це для Reader. Немає такої удачі - мабуть, слід зафіксувати цю помилку, оскільки це має великий сенс. Фактично він повністю ігнорує більшість підзаголовків рівня h2 на сторінці, кожен з яких позначений як розділ, відображаючи лише один div, який відповідає критеріям, згаданим раніше.

За іронією долі, стара версія того самого сайту, яка не має ні статті, ні розділу, ні розділюючих тегів div, розпізнає все тіло для відображення в Reader.


<article>є дійсною обгорткою, визнаною Safari Reader, і вона чудово працює. Дивіться мій коментар на цю відповідь кілька прикладів: stackoverflow.com/questions/2997918 / ...
Матіас Bynens

1
Мені, можливо, не було ясно; Я мав на увазі, що <article> не трактується інакше, ніж звичайний <div>; Я сподівався, що якщо Reader побачить тег <article>, він буде розглядати вміст, як ніби з одного блоку, чого не робить, якщо вміст не відповідає іншим вимогам. Підсумок для мене полягає в тому, що оскільки мій <article> містить кілька <section>, а <div> Reader захоплює лише один вміщений <section>.
Марк


1

Див. Настанови щодо публікації статей .

Ось API про те, як читати та аналізувати: API для розробників читабельності . Уже є проект, до якого ви можете звернутися: ruby-readability .

Коротка історія: Функція Safari Reader, починаючи з того, що браузер Apple Safari 5 вбудовував кодову базу під назвою Readability , а Readability починалася як простий інструмент для читання на основі Javascript, який перетворював будь-яку веб-сторінку на настроюваний режим читання. Він був випущений Arc90 (як експеримент Arc90 Lab), Нью-Йоркському магазині дизайну та технологій, ще на початку 2009 року. Він також вбудований в Amazon Kindle та популярні програми для iPad, такі як Flipboard та Reeder.


0

Я працюю над алгоритмами очищення веб-сайтів від інформаційних "відходів", подібних до функції Safari Reader. Це не так добре, як читабельність, але має кілька цікавих речей.

Ви можете дізнатись більше на сторінці проекту smartbrowser.codeplex.com .

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.