Construye tu propio modo lectura — reducir una página a su contenido
Los navegadores tienen un modo lectura, pero es inconstante — en una página no se activa, en otra corta demasiado, y no puedes ajustarlo. En JustZix construyes el tuyo: un botón de acción que reduce la página al artículo mismo, según tus reglas.
Por qué el tuyo
El modo lectura integrado es una caja negra. No sabes cuándo aparece, no puedes influir en lo que considera «contenido», no puedes cambiar la tipografía. Tu regla es una docena de líneas que entiendes y adaptas a tu gusto.
Mejor como acción BUTTON
Rara vez quieres el modo lectura activo automáticamente — lo quieres a demanda. Esto lo convierte en un candidato ideal para una acción BUTTON en la barra de acciones JustZix. Etiquétala, digamos, READ, con código que se ejecuta al clic:
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('No se ha encontrado ningún contenedor de contenido.'); }
else {
document.body.replaceChildren(art);
document.body.style.cssText =
'max-width:70ch;margin:40px auto;padding:0 24px;' +
'font:19px/1.7 Georgia, serif;background:#fbfaf7;color:#222';
}Cómo funciona
Elegir el contenedor de contenido
querySelector recibe una lista de candidatos del más al menos fiable: <article>, un elemento con role="main", <main>, luego clases CMS comunes. Coge el primero que existe. Para una página donde nada coincide, añade su selector al principio de la lista.
replaceChildren
document.body.replaceChildren(art) echa fuera todo del <body> y pone allí solo el contenedor del artículo. Una sola llamada en lugar de un bucle que elimina elemento tras elemento.
Tipografía
max-width:70ch da una línea de unos 70 caracteres — el óptimo de legibilidad. El resto es margen, una fuente con gracias y un fondo cálido. Cámbialo a tu gusto.
La variante solo-CSS
Si la página tiene un <article> limpio, puedes saltarte el JS — en la pestaña CSS de la regla:
body > *:not(:has(article)) { display: none !important; }
article {
max-width: 70ch !important;
margin: 40px auto !important;
font-size: 19px !important;
line-height: 1.7 !important;
}La variante CSS es menos fiable (depende de la estructura de la página) pero no toca el DOM — fácil de desactivar.
Trampas
- Las imágenes en el contenido se mantienen. Son hijas del artículo, así que sobreviven — lo cual es positivo.
- replaceChildren es de un solo sentido. Tras la reducción, vuelves a la página normal con una recarga (F5). Es aceptable para una acción a demanda.
- Los scripts de la página pueden protestar. Parte del código de la página cuenta con elementos que hemos eliminado y lanzará un error en la consola. No rompe el contenido.
Mira también
- Ejemplos — snippets listos para usar para acciones y reglas
- Doma los elementos sticky — una forma más ligera de adelgazar una página
- La acción BUTTON — el tipo de acción sobre el que construyes esto
Instala JustZix — y lee los artículos sin el resto de la página.
Valora este artículo
Sin valoraciones — sé el primero.