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

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


safari mobile-safari ios5
person bshack    schedule 08.06.2010    source источник
comment
См. stackoverflow.com /questions/30730300/ для получения некоторой информации о режиме чтения в Firefox.   -  person handle    schedule 12.10.2018

Ответы (11)


arrow_upward
69
arrow_downward

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

  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

person Mathias Bynens    schedule 10.06.2010

arrow_upward
8
arrow_downward

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

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

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

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

  • Независимо от того, используете ли вы заголовок или нет
  • Обернуть ли текст в <p> или позволить ему свободно течь
  • Знаки препинания (т. е. удаление всех точек, запятых и т. д. не повлияло)
person eriklinde    schedule 15.01.2013

arrow_upward
7
arrow_downward

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

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

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

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

Arc90 (Readability) Copyright © Arc90 Inc.
Readability распространяется под лицензией Apache, версия 2.0.

person tantran    schedule 08.06.2010

arrow_upward
3
arrow_downward

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

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

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

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

1 тег P, 2417 символов 4 тега P, 1527 символов 5 тегов P, 1150 символов 6 тегов P, 862 символа

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

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

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

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

person yrn1    schedule 09.06.2010
comment
Неправильно. Элементы заголовков не требуются для работы Reader. Пример: mathiasbynens.be/demo/safari-reader-test-3 Читать подробнее здесь: mathiasbynens.be/notes/safari-reader - person Mathias Bynens; 10.06.2010

arrow_upward
2
arrow_downward

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

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

person dan    schedule 22.03.2012

arrow_upward
1
arrow_downward

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

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

person yrn1    schedule 08.06.2010
comment
Я использую <article> на своем сайте, и Reader работает там, например. mathiasbynens.be/notes/html5-levels, но не для небольших статей, например mathiasbynens.be/notes/document-head Использование <article>, похоже, ничего не значит делать с этим. - person Mathias Bynens; 10.06.2010
comment
Подойдет любой элемент-обертка — <div>, <article>, <section>… Даже такие странные вещи, как <nav>, <aside> или <span>, прекрасно работают. Подробнее читайте здесь: mathiasbynens.be/notes/safari-reader - person Mathias Bynens; 10.06.2010

arrow_upward
1
arrow_downward

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

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

person user139195    schedule 08.06.2010

arrow_upward
1
arrow_downward

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

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

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

person Marc    schedule 09.06.2010
comment
<article> — допустимая оболочка, распознаваемая Safari Reader, и она отлично работает. См. мой комментарий к этому ответу для некоторых примеров: как включить программу чтения сафари на моем сайте"> stackoverflow.com/questions/2997918/ - person Mathias Bynens; 10.06.2010
comment
Я, возможно, не ясно выразился; Я имел в виду, что ‹article› ничем не отличается от обычного ‹div›; Я надеялся, что если Reader увидит тег ‹article›, он обработает содержимое так, как будто оно состоит из одного блока, чего не происходит, если содержимое не соответствует другим его требованиям. В результате для меня это так, потому что моя ‹статья› содержит несколько ‹разделов› и ‹div› Reader захватывает только один содержащийся ‹раздел›. - person Marc; 11.06.2010

arrow_upward
1
arrow_downward

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

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

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

person Smartmarkey    schedule 10.01.2011

arrow_upward
1
arrow_downward

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

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

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

person Allen    schedule 18.01.2015

arrow_upward
0
arrow_downward

Я работаю над алгоритмами очистки веб-сайтов от информационного "мусора" по аналогии с функцией Safari Reader. Это не так хорошо, как читабельность, но есть кое-что интересное.

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

person sashaeve    schedule 12.06.2010