← Tutti gli articoli

Tutorial

Crea la tua modalità lettura con JustZix

Le modalità lettura dei browser sono ottime finché non eliminano l'unica immagine che volevi, rovinano i blocchi di codice o si rifiutano del tutto di attivarsi. Con JustZix puoi costruire la tua modalità lettura che funziona esattamente come ti piace, esattamente sui siti che scegli.

Perché farsene una propria

La modalità lettura integrata è una scatola nera. Non puoi modificarne la lunghezza delle righe, non puoi mantenere le figure, e spesso fallisce su pagine che non sono articoli classici. Una regola JustZix, invece, è semplicemente CSS che controlli tu. Viene eseguita sulla pagina reale, quindi link, codice e media continuano tutti a funzionare. Decidi tu cosa resta e cosa va.

Passo uno: doma la colonna dell'articolo

Il singolo maggior guadagno di leggibilità è vincolare la lunghezza delle righe. Righe più lunghe di circa 75 caratteri costringono gli occhi a viaggiare troppo, e perdi il segno nel ritorno a capo. Centra la colonna principale e limitane la larghezza:

article, .post-content, main {
  max-width: 68ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.5rem !important;
}

L'unità ch è legata alla larghezza del carattere 0, quindi 68ch si avvicina al classico ideale di 66 caratteri indipendentemente dalla dimensione del font. Adatta l'elenco dei selettori al sito che hai come obiettivo.

Passo due: apri il testo

L'interlinea predefinita sui siti di notizie è spesso uno stretto 1,4. La lettura è molto più confortevole intorno a 1,7, con un corpo leggermente più grande e un serif o un sans umanista:

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;
}

Passo tre: sgombera il campo

Ora nascondi il rumore. Barre laterali, header fissi, finestre di newsletter e colonne di contenuti correlati competono tutti per l'attenzione. Una regola di display totale li spazza via:

aside,
.sidebar,
.newsletter-signup,
.related-posts,
[class*="sticky"],
[id*="recirculation"] {
  display: none !important;
}
body { overflow-x: hidden !important; }

Sii leggermente conservativo con i selettori di attributo come [class*="sticky"] — testa la pagina e rimuovi qualsiasi selettore che nasconde qualcosa che volevi tenere.

Mettere tutto insieme come regola

In JustZix, crea una nuova regola, imposta il pattern URL sul sito che leggi di più (per esempio *://*.example-news.com/*), incolla tutti e tre i blocchi CSS nel pannello CSS e salva. Ogni articolo corrispondente ora si apre automaticamente nella tua modalità lettura personale.

Uno sfondo tranquillo

Il bianco puro a piena luminosità è duro la sera. Una morbida tonalità crema riduce il riverbero senza la perdita di contrasto di un tema scuro pesante:

html, body, article {
  background: #f6f1e6 !important;
  color: #2b2620 !important;
}
article a { color: #7a4a1f !important; }

Da qui puoi continuare a perfezionare: fissa l'indice, aggiungi un'evidenziazione di focus al paragrafo corrente, o sovrapponi un badge del tempo di lettura. Sfoglia i nostri esempi pronti all'uso per altri punti di partenza, vedi l'articolo complementare su come ottenere la larghezza della colonna esattamente giusta, e scarica JustZix se non lo hai ancora fatto. Modalità lettura, a modo tuo.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso