Як працює функція Reader Mobile Safari в iOS 5? Як увімкнути його на своєму сайті. Як я можу визначити, який вміст на моїй сторінці є статтею для запуску цієї функції?
Відповіді:
Багато розміщених тут відповідей містять неправдиву інформацію. Ось кілька виправлень / уточнень:
<article>
Елемент працює відмінно , як обгортка; Safari Reader це розпізнає. Мій сайт є прикладом . Немає значення, який елемент обгортки ви вибрали, якщо він є, крім <body>
або <p>
. Ви можете використовувати <article>
, <div>
, <section>
; або елементи , які є семантично некоректний для цієї мети, як <nav>
, <aside>
, <footer>
, <header>
; або навіть вбудовані елементи на зразок <span>
(!).
Для роботи Reader не потрібні заголовки. Ось приклад документа без будь-яких <h*>
елементів, з яким Reader чудово працює: http://mathiasbynens.be/demo/safari-reader-test-3
Деякі подробиці щодо своїх висновків я розмістив тут: http://mathiasbynens.be/notes/safari-reader
Я протестував близько 100 варіантів цього на своєму iPhone, щоб зрозуміти, що викликає цей невловимий стан Reader. Мої висновки такі:
Ось, що я виявив, вплинуло:
<ol>
або <ul>
(які зазвичай не використовуються для розміщення історії), не враховуватиметься до 200 слів (однак вони відображатимуться у програмі зчитування, якщо читач спрацьовує з інших причин)<div>
або <article>
видається необхідним (тим не менш, я був би здивований, якщо б існували веб-сайти, де цього ще не було)Для повного розкриття інформації ось що я виявив НЕ вплинуло:
<p>
чи дозволяючи йому вільно протікатиЗдається, алгоритм, на якому він базується, шукає p-теги і враховує роздільники типу "." у внутрішньому тексті. Розділ (div) з найбільшою кількістю очок отримує фокус.
див .: http://lab.arc90.com/experiments/readability/
Здається, це основа для режиму читання, принаймні Safari приписує це в Подяках, див .:
файл: /// C: /Program%20Files/Safari/Safari.resources/Help/A благодарності.html
Arc90 (читабельність) Авторське право © Arc90 Inc.
Читаність ліцензується за ліцензією Apache, версія 2.0.
У цьому питанні ( Як вимкнути 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
Мені буде цікаво, якщо хтось зможе це визначити повністю.
Тег статті HTML5 не запускає його на моїх тестах. Здається, він також не працює з офлайн-вмістом (тобто сторінками, збереженими на вашому локальному комп'ютері).
Здається, це викликає блок div з великою кількістю p з великою кількістю тексту.
<article>
на своєму сайті, і Reader працює там, наприклад, mathiasbynens.be/notes/html5-levels, але не на менших статтях, наприклад mathiasbynens.be/notes/document-head . Використання <article>
, здається, не має нічого спільного з цим .
<div>
, <article>
, <section>
... Навіть дивні речі , як <nav>
, <aside>
або <span>
працювати нормально. Детальніше тут: mathiasbynens.be/notes/safari-reader
Теорія p тегів звучить добре. Я думаю, що це також виявляє й інші елементи. Одна з наших сторінок з 6 абзацами не викликала Reader, але одна з 4 абзацами та тегом img.
Він також досить розумний для виявлення багатосторінкових статей. Спробуйте це в багатосторінковій статті на nytimes.com або nymag.com. Було б цікаво дізнатись, як це виявляє також.
Дивно, що це може бути, але він справді не звертає уваги на тег статті HTML5, особливо розчаровуючи, враховуючи те, що Safari 5 має повну підтримку статті, розділу, навігації тощо в CSS - їх можна стилізувати як div зараз і поводитись так само, як будь-який елемент рівня блоку.
Я спеціально створив сайт із тегом статті та кількома тегами внутрішнього розділу, готуючись до семантичного маркування HTML5 саме з цією метою, тому я справді сподівався, що Safari 5 використає це для Reader. Немає такої удачі - мабуть, слід зафіксувати цю помилку, оскільки це має великий сенс. Фактично він повністю ігнорує більшість підзаголовків рівня h2 на сторінці, кожен з яких позначений як розділ, відображаючи лише один div, який відповідає критеріям, згаданим раніше.
За іронією долі, стара версія того самого сайту, яка не має ні статті, ні розділу, ні розділюючих тегів div, розпізнає все тіло для відображення в Reader.
<article>
є дійсною обгорткою, визнаною Safari Reader, і вона чудово працює. Дивіться мій коментар на цю відповідь кілька прикладів: stackoverflow.com/questions/2997918 / ...
І Firefox, і Chrome мають подібний плагін з назвою iReader. Ось його проект із вихідним кодом.
http://code.google.com/p/ireader-extension/
Прочитайте код, щоб отримати більше.
Див. Настанови щодо публікації статей .
Ось API про те, як читати та аналізувати: API для розробників читабельності . Уже є проект, до якого ви можете звернутися: ruby-readability .
Коротка історія: Функція Safari Reader, починаючи з того, що браузер Apple Safari 5 вбудовував кодову базу під назвою Readability , а Readability починалася як простий інструмент для читання на основі Javascript, який перетворював будь-яку веб-сторінку на настроюваний режим читання. Він був випущений Arc90 (як експеримент Arc90 Lab), Нью-Йоркському магазині дизайну та технологій, ще на початку 2009 року. Він також вбудований в Amazon Kindle та популярні програми для iPad, такі як Flipboard та Reeder.
Я працюю над алгоритмами очищення веб-сайтів від інформаційних "відходів", подібних до функції Safari Reader. Це не так добре, як читабельність, але має кілька цікавих речей.
Ви можете дізнатись більше на сторінці проекту smartbrowser.codeplex.com .