Pregunta Cómo deshabilitar Safari Reader en una página web


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:

  • Necesitas al menos uno H etiqueta
  • 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 un H etiqueta, y lo siguiente:

  • 1 PAG etiqueta, 2417 caracteres
  • 4 PAG etiquetas, 1527 caracteres
  • 5 PAG etiquetas, 1150 caracteres
  • 6 PAG etiquetas, 862 caracteres

Si resta 1 carácter de cualquiera de los anteriores, la opción 'Lector' no está disponible.

Debo señalar que el recuento de caracteres de la H La etiqueta juega un papel, pero lamentablemente no se dio cuenta de esto cuando determiné los resultados anteriores. Asume 20+ caracteres para H etiquetar y corregir a través de los resultados anteriores.

Algunas otras cosas interesantes:

  • Ajuste <p style="display:none;"> para PAG etiquetas los elimina del recuento
  • Ajuste display a none, y luego mostrarlos 230ms más tarde con Javascript evitó la opción Reader también

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


32
2018-06-08 17:12


origen


Respuestas:


"Necesitas al menos uno <h*> elemento "- esto es simplemente incorrecto. Aquí hay un ejemplo: http://mathiasbynens.be/demo/safari-reader-test-3

Mi respuesta en la otra pregunta de Safari Reader proporciona algo más de información.

También puedes leer la publicación de mi blog sobre cómo habilitar Safari Reader por todos mis hallazgos sobre el tema.


7
2018-06-10 12:18



Agregar marcado a etiquetas potencialmente "legibles", como p y div, puede hacer que el algoritmo de legibilidad ignore la etiqueta, reduciendo así la puntuación, con suerte hasta el punto de que no active el icono del lector para mostrar.

En cuanto a la fuente de legibilidad, un área para hacer esto es en el id y class atributos, ya que hace coincidencia de patrones en los datos combinados de estos dos atributos. Por ejemplo, agregar una clase de "comentario", como tal

<p class="myClass comment">...</p>

hará que ese elemento sea ignorado. El patrón que se está buscando para candidatos "poco probables" es:

/combx|comment|disqus|foot|header|menu|rss|shoutbox|sidebar|sponsor/i

Colocar marcadores en los elementos que podrían agregarse al Nivel de Lectura puede permitirle desactivar el icono del Lector.


10
2018-03-14 19:27



Ver http://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.js para "el código" para la legibilidad.


2
2018-06-10 07:22



Esto es lo que funcionó para mí:

Puse todo el contenido dentro de una vieja etiqueta.

<ol style = "padding:0;margin:0"> 
   my content
</ol>

Según lo que leí en otra parte, el lector se desencadena en parte por el número de palabras en una página, pero no cuenta las palabras dentro de una página.


2
2017-10-25 09:08



De acuerdo a El registro, Safari Reader se basa en el proyecto de código abierto Legibilidad. Es posible que pueda mirar a través de el código para pistas.


1
2018-06-09 21:59



Mira esta publicación: http://www.jangro.com/items/how-to-block-safari-5s-new-reader-and-bite-off-your-nose/


1
2017-10-21 22:04



Parece un algo bastante complejo, el adoptado por Safari Reader. Supongo que hay algo más simple detrás de esto. Probablemente sea un buen documento W3C con algunas mejores prácticas de SEO como la que mencionaste.

Yo creo algo así:

  1. Al menos un H1
  2. <p> etiquetas abiertas y cerradas, y siguiendo correctamente cada etiqueta de encabezado
  3. una capa que contiene general

Lo más probable es que el lector esté buscando algo cercano al nuevo HTML 5 específico, por lo que un artículo llamador de clase o algo así.

Es interesante entender por qué Apple no reveló nada al respecto.


0
2018-06-09 08:50



Tenía un div dentro de mi que envolvía todo mi contenido. Al cambiar este div para que sea un elemento, y al agregar una clase para eliminar todo el relleno creado por, eliminé el botón del lector en mi sitio móvil.


0
2018-04-23 17:23