Costruisci la tua modalità lettura — ridurre una pagina al suo contenuto
I browser hanno una modalità lettura, ma è incostante — su una pagina non si attiva, su un'altra taglia troppo, e non puoi regolarla. In JustZix costruisci la tua: un pulsante azione che riduce la pagina all'articolo stesso, secondo le tue regole.
Perché la tua
La modalità lettura integrata è una scatola nera. Non sai quando appare, non puoi influenzare ciò che considera «contenuto», non puoi cambiare la tipografia. La tua regola è una dozzina di righe che capisci e adatti al tuo gusto.
Meglio come azione PULSANTE
Raramente vuoi la modalità lettura attiva in automatico — la vuoi su richiesta. Questo ne fa un candidato ideale per un'azione PULSANTE nella barra delle azioni JustZix. Etichettala, diciamo, READ, con codice che viene eseguito al clic:
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('Nessun contenitore di contenuto trovato.'); }
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';
}Come funziona
Scegliere il contenitore di contenuto
querySelector riceve una lista di candidati dal più al meno affidabile: <article>, un elemento con role="main", <main>, poi classi CMS comuni. Prende il primo che esiste. Per una pagina dove nulla corrisponde, aggiungi il suo selettore in cima alla lista.
replaceChildren
document.body.replaceChildren(art) butta fuori tutto dal <body> e vi mette solo il contenitore dell'articolo. Una sola chiamata invece di un ciclo che rimuove elemento dopo elemento.
Tipografia
max-width:70ch dà una riga lunga circa 70 caratteri — l'ottimo di leggibilità. Il resto è margine, un font con grazie e uno sfondo caldo. Cambialo a tuo gusto.
La variante solo-CSS
Se la pagina ha un <article> pulito, puoi saltare il JS — nella scheda CSS della regola:
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 è meno affidabile (dipende dalla struttura della pagina) ma non tocca il DOM — facile da disattivare.
Trappole
- Le immagini nel contenuto restano. Sono figlie dell'articolo, quindi sopravvivono — il che è positivo.
- replaceChildren è a senso unico. Dopo la riduzione, torni alla pagina normale con un ricaricamento (F5). È accettabile per un'azione su richiesta.
- Gli script della pagina possono protestare. Parte del codice della pagina conta su elementi che abbiamo rimosso e lancerà un errore nella console. Non rompe il contenuto.
Vedi anche
- Esempi — snippet pronti all'uso per azioni e regole
- Doma gli elementi sticky — un modo più leggero di sfoltire una pagina
- L'azione PULSANTE — il tipo di azione su cui costruisci questo
Installa JustZix — e leggi gli articoli senza il resto della pagina.
Valuta questo articolo
Nessuna valutazione — sii il primo.