html safari

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



(9)

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:

  • Establecer <p style="display:none;"> para las etiquetas P los elimina del recuento
  • Poniendo la display 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.

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

En cuanto a la fuente de legibilidad, un área para hacer esto es en los atributos id y class , 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.

Conseguí que funcionara al deshacerme de las etiquetas <p> , cambiándolas a etiquetas <div> .

Creo que las etiquetas <p> dicen al navegador que hay algo de texto para leer.

Dejé las etiquetas <h> y ellas, por sí mismas, no sacaron al lector.

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.

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.

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.