Crea tu propio modo de lectura con JustZix
Los modos de lectura del navegador son geniales hasta que eliminan la única imagen que querías, destrozan los bloques de código o se niegan a activarse. Con JustZix puedes crear tu propio modo de lectura que funcione exactamente como te gusta, en exactamente los sitios que elijas.
Por qué crear el tuyo
El modo de lectura integrado es una caja negra. No puedes ajustar su longitud de línea, no puedes conservar las figuras y a menudo falla en páginas que no son artículos clásicos. Una regla de JustZix, en cambio, es simplemente CSS que tú controlas. Se ejecuta en la página real, así que los enlaces, el código y los medios siguen funcionando. Tú decides qué se queda y qué se va.
Paso uno: domar la columna del artículo
La mayor victoria de legibilidad individual es restringir la longitud de línea. Las líneas más largas de unos 75 caracteres obligan a tus ojos a viajar demasiado lejos, y pierdes el sitio en el barrido de retorno. Centra la columna principal y limita su ancho:
article, .post-content, main {
max-width: 68ch !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 1.5rem !important;
}La unidad ch está vinculada al ancho del carácter 0, así que 68ch aterriza cerca del ideal clásico de 66 caracteres independientemente del tamaño de fuente. Ajusta la lista de selectores para que coincida con tu sitio objetivo.
Paso dos: abrir el texto
La altura de línea por defecto en los sitios de noticias suele ser un apretado 1,4. La lectura es mucho más cómoda en torno a 1,7, con un tamaño de cuerpo ligeramente mayor y una serif o sans humanista:
article p, .post-content p {
font-size: 1.18rem !important;
line-height: 1.75 !important;
margin-bottom: 1.4em !important;
font-family: Georgia, 'Iowan Old Style', serif !important;
}
article h2, article h3 {
line-height: 1.3 !important;
margin-top: 2em !important;
}Paso tres: despejar el terreno
Ahora oculta el ruido. Las barras laterales, las cabeceras fijas, las ventanas emergentes de boletines y las columnas de contenido relacionado compiten todas por la atención. Una regla general de display las barre:
aside,
.sidebar,
.newsletter-signup,
.related-posts,
[class*="sticky"],
[id*="recirculation"] {
display: none !important;
}
body { overflow-x: hidden !important; }Sé un poco conservador con los selectores de atributo como [class*="sticky"] — prueba la página y elimina cualquier selector que oculte algo que querías conservar.
Juntándolo todo como una regla
En JustZix, crea una regla nueva, fija el patrón de URL al sitio que más lees (por ejemplo *://*.example-news.com/*), pega los tres bloques CSS en el panel CSS y guarda. Cada artículo que coincida ahora se abre en tu modo de lectura personal automáticamente.
Un fondo tranquilo
El blanco puro a brillo completo es duro por la noche. Un suave tono crema reduce el deslumbramiento sin la pérdida de contraste de un tema oscuro pesado:
html, body, article {
background: #f6f1e6 !important;
color: #2b2620 !important;
}
article a { color: #7a4a1f !important; }Desde aquí puedes seguir refinando: fija la tabla de contenidos, añade un resaltado de foco al párrafo actual o superpón una insignia de tiempo de lectura. Explora nuestros ejemplos listos para usar para más puntos de partida, consulta el artículo complementario sobre acertar exactamente con el ancho de columna, y descarga JustZix si aún no lo has hecho. Modo de lectura, a tu manera.
Valora este artículo
Sin valoraciones — sé el primero.