Resumen
Estoy buscando los criterios por los cuales puedo crear una página web y estar [bastante] seguro de que aparecerá en Firefox Reader View , si el usuario lo desea.
Algunos sitios tienen esta opción, otros no. Algunos con más texto no tienen esta opción que otros con mucho menos texto. Stack Overflow, por ejemplo, muestra solo la pregunta en lugar de las respuestas en Reader View.
Pregunta
He actualizado mi Firefox de 38.0.1 a 38.0.5 y he encontrado una nueva función llamada ReaderView, que es una especie de superposición que elimina el "desorden de páginas" y hace que el texto sea más fácil de leer. Readerview se encuentra en el lado derecho de la barra de direcciones como un ícono en el que se puede hacer clic en ciertas páginas.
Esto está bien, pero desde el punto de vista de la programación, quiero saber cómo funciona la "vista del lector", qué criterios de qué páginas se aplican. He explorado un poco el sitio web de Mozilla Firefox sin respuestas claras (así que todas las respuestas de programación de cualquier tipo que encontré), por supuesto, busqué en Google/Bingeé esto y esto solo regresó con referencias a los complementos de Firefox; esto no es un complemento. pero una parte básica de la nueva versión de Firefox.
Supuse que la vista del lector usaba HTML5 y extraía el contenido de <article> pero este no es el caso, ya que funciona en Wikipedia, que no parece usar <article> o etiquetas HTML5 similares, sino que la vista de lectura extrae ciertos <div> s y los muestra solos. Esta función funciona en algunas páginas HTML5, como wikipedia, pero no en otras.
Si alguien tiene alguna idea de cómo funciona realmente Firefox ReaderView y cómo los desarrolladores de sitios web pueden usar esta operación, ¿puede compartirla? O si puede encontrar dónde se puede ubicar esta información, ¿puede indicarme la dirección correcta, ya que no he podido encontrar esto?
Necesita al menos una etiqueta <p> alrededor del texto, que desea ver en Reader View, y al menos 516 caracteres en 7 palabras dentro del texto.
por ejemplo, esto activará ReaderView:
<body> <p> 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 123456789 123456 </p> </body>Vea mi ejemplo en https://stackoverflow.com/a/30750212/1069083
Al leer el código de gitHub, esta mañana, el proceso es que los elementos de la página se enumeran en un orden de probabilidad, con <section> , <p> , <div> , <article> en la parte superior de la lista (es decir, lo más probable).
Luego, a cada uno de estos "nodos" se le otorga una puntuación basada en cosas como el recuento de comas y los nombres de clase que se aplican al nodo. Este es un proceso algo multifacético en el que se agregan puntajes para fragmentos de texto, pero también aparentemente se reducen los puntajes para partes o sintaxis no válidas. Las puntuaciones en subpartes de "nodo" se reflejan en la puntuación del nodo como un todo. es decir, el elemento principal contiene las puntuaciones de todos los elementos inferiores, creo.
Este valor de puntuación decide si la página HTML puede ser "página vista" en Firefox.
No tengo absolutamente claro si el valor de la puntuación lo establece Firefox o la función de legibilidad.
Javascript realmente no es mi punto fuerte, y creo que alguien más debería consultar el enlace proporcionado por Richard ( https://github.com/mozilla/readability ) y ver si puede proporcionar una respuesta más completa.
Lo que no vi pero esperaba ver fue una puntuación basada en la cantidad de contenido de texto en una <p> o <div> (u otras) etiquetas relevantes.
¡Cualquier mejora en esta pregunta o respuesta, por favor comparta!
EDITAR: las imágenes en las <div> o <figure> (HTML5) dentro del elemento <p> parecen conservarse en la vista del lector cuando el contenido del texto de la página es válido.
Seguí el enlace de Martin al repositorio Readability.js GitHub y eché un vistazo al código fuente. Esto es lo que hago con eso.
El algoritmo funciona con etiquetas de párrafo. En primer lugar, intenta identificar partes de la página que definitivamente no son contenido, como formularios, etc., y las elimina. Luego revisa los nodos de párrafo en la página y asigna una puntuación basada en la riqueza del contenido: les da puntos por cosas como el número de comas, la longitud del contenido, etc. Tenga en cuenta que un párrafo con menos de 25 caracteres se descarta inmediatamente.
Luego, las puntuaciones "burbujean" en el árbol DOM: cada párrafo agregará parte de su puntuación a todos sus nodos principales: un padre directo obtiene la puntuación completa agregada a su total, un abuelo solo la mitad, un bisabuelo una tercera y así sobre. Esto permite que el algoritmo identifique elementos de nivel superior que probablemente sean la sección de contenido principal.
Aunque este es solo el algoritmo de Firefox, supongo que si funciona bien para Firefox, también funcionará bien para otros navegadores.
Para que estos algoritmos de Reader View funcionen para su sitio web, desea que identifiquen correctamente las secciones de su página con mucho contenido. Esto significa que desea que los nodos con más contenido en su página obtengan puntajes altos en el algoritmo.
Aquí hay algunas reglas generales para mejorar la calidad de la página a los ojos de estos algoritmos:
<br /> . Si bien puede parecer similar, muchos algoritmos relacionados con el contenido (no solo los de Reader View) dependen en gran medida de ellos.<article> , <nav> , <section> , <aside> . Aunque no son el único criterio (como notó en la pregunta), estos son muy útiles para las computadoras que leen su página (no solo la Vista del lector) para distinguir diferentes secciones de su contenido. Readability.js los usa para adivinar qué nodos es probable o improbable que contengan contenido importante.<article> o <div> . Esto recibirá puntos de puntuación de todas las etiquetas de párrafo dentro de él y se identificará como la sección de contenido principal.