Как включить iOS 5 Safari Reader на моем сайте? - PullRequest
Новая
       60

Как включить iOS 5 Safari Reader на моем сайте?

75 голосов
/ 08 июня 2010

Как работает функция Reader в Mobile Safari в iOS 5?Как мне включить его на моем сайте.Как мне узнать, какой контент на моей странице является статьей для запуска этой функции?

Ответы [ 11 ]

67 голосов
/ 10 июня 2010

Многие ответы, опубликованные здесь, содержат ложную информацию.Вот некоторые исправления / уточнения:

  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

7 голосов
/ 16 января 2013

Я протестировал около 100 вариантов этого на своем iPhone, чтобы выяснить, что вызывает это неуловимое состояние Reader.Мои выводы заключаются в следующем:

Вот что я обнаружил, оказало влияние:

  • Наличие около 200 или более слов (или 1000 символов, включая пробелы) в статье, которую вы хотите вызвать«Читатель» кажется необходимым
  • Читатель НИКОГДА не срабатывал, когда у меня было менее 170 слов;хотя иногда это срабатывало, когда у меня было 180 или 190 слов.
  • Текст внутри определенных элементов, таких как <ol> или <ul> (которые обычно не используются для содержания истории), не будет учитываться в 200 словах(однако они будут отображаться в читателе, если читатель вызван по другим причинам)
  • Заключение 200 слов в элемент блока, такой как <div> или <article>, кажется необходимым (при этом яя был бы удивлен, если были какие-либо сайты, где это не было уже так)

Для полного раскрытия, вот что я обнаружил, не оказало влияния:

  • с использованием заголовка или без
  • Независимо от того, будет ли обернут текст в <p> или обеспечен свободный поток
  • Знаки пунктуации (т. е. удаление всех точек, запятых и т. д. не оказало влияния)
7 голосов
/ 08 июня 2010

Похоже, алгоритм, на котором он основан, ищет p-теги и считает разделители вроде "." во внутреннем тексте. Раздел (div) с наибольшим количеством точек получает фокус.

см: http://lab.arc90.com/experiments/readability/

Кажется, что это основа для режима Reader, по крайней мере, Safari приписывает его в благодарностях, см .:

Файл: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html

Arc90 (удобочитаемость) Copyright © Arc90 Inc.
Читаемость лицензируется под лицензией Apache, версия 2.0.

3 голосов
/ 09 июня 2010

Этот вопрос ( Как отключить Safari Reader на веб-странице ) содержит более подробную информацию.Скопировано здесь:

Мне интересно узнать больше о том, что запускает опцию Reader в Safari, а что нет.Я не планировал бы реализовывать что-либо, что могло бы отключить его, но любопытно, как техническое упражнение.

Вот что я выучил до сих пор с некоторой базовой игрой вокруг:

Вам нужно вхотя бы один H-тег. Идет не по количеству символов, а по количеству P-тегов и длине. Вероятно, ищет разрывы предложений '.'и другие критерии Safari предоставит «Читатель», если с тегом H и следующим:

1 тег P, 2417 символов 4 тега P, 1527 символов 5 тегов P, 1150 символов 6 тегов P, 862chars Если вы вычли 1 символ из любого из вышеперечисленных, опция 'Reader' недоступна.

Следует отметить, что подсчет символов в теге H играет определенную роль, но, к сожалению, я этого не понял, когда определилрезультаты выше.Предположим, что для тега H более 20 символов, и исправлены в приведенных выше результатах.

Некоторые другие интересные вещи:

Настройка тегов P удаляет их из счетчика.позже в Javascript тоже не использовали опцию Reader

Мне было бы интересно, может кто-нибудь определить это полностью.

2 голосов
/ 22 марта 2012

Я боролся с этим.Наконец-то я снял отметки <ul> в моей истории и альт!это начало работать.

Я не надела обертку на тело, но, возможно, сделала это случайно.

1 голос
/ 18 января 2015

См. Правила публикации статей .

Вот API-интерфейсы о том, как читать и анализировать: API читабельности для разработчиков .Уже есть проект, на который вы можете ссылаться: ruby-readability .

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

1 голос
/ 10 января 2011

И Firefox, и Chrome имеют похожий плагин с именем iReader. Вот его проект с исходным кодом.

http://code.google.com/p/ireader-extension/

Прочтите код, чтобы получить больше.

1 голос
/ 10 июня 2010

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

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

По иронии судьбы старая версия того же сайта, которая не имеет ни статьи, ни раздела, ни разделительных тегов div, распознает все тело для отображения в Reader.

1 голос
/ 08 июня 2010

Теория p-тегов звучит хорошо.Я думаю, что это также обнаруживает и другие элементы.Одна из наших страниц с 6 параграфами не вызывала Reader, но одна с 4 параграфами и тегом img сработала.

Она также достаточно умна для обнаружения многостраничных статей.Попробуйте это в многостраничной статье на nytimes.com или nymag.com.Было бы интересно узнать, как он это обнаруживает.

1 голос
/ 08 июня 2010

HTML5 тег статьи не запускает его в моих тестах. Он также не работает с автономным контентом (т. Е. Страницами, сохраненными на вашем локальном компьютере).

Кажется, что это вызывает блок div с большим количеством p и большим количеством текста.

Страница:
...