Pregunta ¿Cómo habilitar iOS 5 Safari Reader en mi sitio web?


¿Cómo funciona la función de lector de Mobile Safari en iOS 5? ¿Cómo lo habilito en mi sitio? ¿Cómo le digo qué contenido en mi página es un artículo para activar esta función?


75
2018-06-08 13:56


origen


Respuestas:


Muchas de las respuestas publicadas aquí contienen información falsa. Aquí hay algunas correcciones / aclaraciones:

  1. los <article> el elemento funciona bien como envoltorio; Safari Reader lo reconoce. Mi sitio es un ejemplo. No importa qué elemento de envoltura elijas, siempre que haya uno que no sea <body> o <p>. Puedes usar <article>, <div>, <section>; o elementos que son semánticamente incorrectos para este propósito, como <nav>, <aside>, <footer>, <header>; o incluso elementos en línea como <span> (!).

  2. No se requieren encabezados para que Reader funcione. Aquí hay un ejemplo de un documento sin ningún <h*> elementos en los que el lector funciona bien: http://mathiasbynens.be/demo/safari-reader-test-3

Publiqué algunos más detalles con respecto a mis hallazgos aquí: http://mathiasbynens.be/notes/safari-reader


66
2018-06-10 12:11



He probado aproximadamente 100 variaciones de esto en mi iPhone para descubrir qué desencadena este elusivo estado de Reader. Mis conclusiones son las siguientes:

Esto es lo que encontré tuvo un impacto:

  • Tener alrededor de 200 o más palabras (o 1000 caracteres incluyendo espacios en blanco) en el artículo que desea activar el "Reader" parece ser necesario
  • El lector NUNCA se activó cuando tenía menos de 170 palabras; aunque a veces se activaba cuando tenía 180 o 190 palabras.
  • Texto dentro de ciertos elementos como <ol> o <ul> (que no suelen utilizarse para contener una historia) no contará para las 200 palabras (sin embargo, se mostrarán en el lector si el lector se activa por otras razones)
  • Envolver las 200 palabras en un elemento de bloque, como <div> o <article> parece necesario (dicho esto, me sorprendería si hubiera sitios web donde ese no fuera el caso)

Para una divulgación completa, esto es lo que encontré que NO tuvo un impacto:

  • Ya sea usando un encabezado o no
  • Si envolver el texto en una <p> o dejarlo fluir libremente
  • Las puntuaciones (es decir, eliminar todos los puntos, comas, etc. no tuvieron ningún impacto)

7
2018-01-15 23:21



Parece que el algoritmo en el que se basa busca p-Tags y cuenta con delimitadores como "." en el texto interno. La sección (div) con más puntos obtiene el foco.

ver: http://lab.arc90.com/experiments/readability/

Parece ser la base para el modo Lector, al menos Safari lo atribuye a los Agradecimientos, ver:

file: /// C: /Program%20Files/Safari/Safari.resources/Help/Acknowledgments.html

Arc90 (legibilidad) Copyright Arc90 Inc.
La legibilidad está autorizada bajo la Licencia Apache, Versión 2.0.


7
2018-06-08 16:46



Esta pregunta (Cómo deshabilitar Safari Reader en una página web) tiene más detalles. Copiado aquí:


Tengo curiosidad por saber más acerca de qué desencadena la opción Reader en Safari y qué no. No planeaba implementar nada que lo desactivara, pero era curioso como ejercicio técnico.

Esto es lo que he aprendido hasta ahora con algunos juegos básicos:

Necesita al menos una etiqueta H   No va solo por el recuento de caracteres, sino por el número de etiquetas P y la longitud   Probablemente busca suspensiones de frase '.' y otros criterios   Safari proporcionará el 'Reader' si, con una etiqueta H, y lo siguiente:

1 etiqueta P, 2417 caracteres   4 etiquetas P, 1527 caracteres   5 etiquetas P, 1150 caracteres   6 etiquetas P, 862 caracteres   Si resta 1 carácter de cualquiera de los anteriores, la opción 'Lector' no está disponible.

Debo señalar que el número de caracteres de la etiqueta H juega un papel, pero lamentablemente no me di cuenta de esto cuando determiné los resultados anteriores. Asuma 20+ caracteres para la etiqueta H y corregidos a lo largo de los resultados anteriores.

Algunas otras cosas interesantes:

La configuración de las etiquetas P las elimina del recuento   Poniendo la pantalla en none, y mostrándolas 230ms más tarde con Javascript evitó la opción Reader también

Me interesaría si alguien puede determinar esto en su totalidad.


3
2018-06-09 09:08



Estaba luchando con esto. Finalmente saqué el <ul> marcas en mi historia, y viola! comenzó a funcionar.

No puse ningún envoltorio alrededor del cuerpo, pero puede haberlo hecho por accidente.


2
2018-03-22 15:09



La etiqueta del artículo HTML5 no se activa en mis pruebas. Tampoco parece funcionar en contenido sin conexión (es decir, páginas guardadas en su máquina local).

Lo que parece desencadenar es un bloque div con muchas p con mucho texto.


1
2018-06-08 16:07



La teoría de la etiqueta p suena bien. Creo que también detecta otros elementos también. Una de nuestras páginas con 6 párrafos no activa el Reader, pero sí una con 4 párrafos y una etiqueta img.

También es lo suficientemente inteligente como para detectar artículos de varias páginas. Pruébelo en un artículo de varias páginas en nytimes.com o nymag.com. Estaría interesado en saber cómo lo detecta también.


1
2018-06-08 16:46