vista - texto a voz firefox
Optimizar el sitio web para mostrar la vista del lector en Firefox (2)
Tal como se encuentra el código en noviembre de ''17, la función de activación ( isProbablyReaderable ) anota solo p o elementos pre y div elementos que contienen al menos un br difuntos.
Una ligera simplificación de la heurística de puntuación es:
- Para cada elemento en [''p'', ''pre'', ''div> br'']:
- Si la longitud del contenido de texto es> 140 caracteres, aumente la
scoreensqrt(length - 140)
- Si la longitud del contenido de texto es> 140 caracteres, aumente la
- Si la
scoreacumulada> 20, devuelvetrue
Firefox 38.0.5 agregó una "Vista del lector" a la barra de direcciones:
Pero no todos los sitios obtienen este ícono, solo aparece cuando se detecta una página de contenido legible. Entonces, ¿cómo puedo habilitar esto para mi sitio?
Intenté imprimir medios y una hoja de estilo adicional para la vista de impresión, pero eso no tiene ningún efecto:
<html>
<head>
<style>
@media print { /* no effect: */
.no-print { display:none; }
}
</style>
<!-- no effect either:
<link rel="stylesheet" href="print.css" media="print"><!-- -->
</head><body>
<h1>Some Title</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<br><br><br>This is the only text
</body></html>
¿Qué fragmentos de código debo agregar en el código fuente de mi sitio web para que este ícono de libro sea visible para los visitantes de mi sitio?
Tiene que agregar <div> o <p> para lograr una página para iniciar ReaderView.
He creado un html simple que funciona:
<html><head>
<title>Reader View shows only the browser in reader view</title>
</head>
<body>
Everything outside the main div tag vanishes in Reader View<br>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">
<div>
<h1>H1 tags outside ot a p tag are hidden in reader view</h1>
<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">
<p>
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
123456789 123456
</p>
</div>
</body>
</html>
Este es el mínimo necesario para activarlo. Este es un proceso algo multifacético en el que se agregan puntajes para fragmentos de texto.
Por ejemplo, puede activar la vista del lector en el software del foro si agrega una etiqueta <p> alrededor de cada bloque de mensajes en la plantilla de publicaciones de publicaciones.
Aquí hay algunos detalles más sobre el mecanismo.