← Tous les articles

Tutoriels

Construisez votre propre mode lecture avec JustZix

17 mai 2026 · par JustZix Team

Les modes lecture des navigateurs sont formidables jusqu'à ce qu'ils retirent la seule image que vous vouliez, déforment les blocs de code, ou refusent carrément de se déclencher. Avec JustZix, vous pouvez construire votre propre mode lecture qui fonctionne exactement comme vous l'aimez, sur exactement les sites que vous choisissez.

Pourquoi faire le vôtre

Le mode lecture intégré est une boîte noire. Vous ne pouvez pas ajuster sa longueur de ligne, vous ne pouvez pas garder les figures, et il échoue souvent sur les pages qui ne sont pas des articles classiques. Une règle JustZix, en revanche, n'est que du CSS que vous contrôlez. Elle s'exécute sur la vraie page, donc les liens, le code et les médias continuent tous de fonctionner. Vous décidez de ce qui reste et de ce qui part.

Étape un : apprivoiser la colonne d'article

Le plus grand gain de lisibilité à lui seul est de contraindre la longueur de ligne. Des lignes de plus d'environ 75 caractères forcent vos yeux à trop voyager, et vous perdez votre place au retour à la ligne. Centrez la colonne principale et plafonnez sa largeur :

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

L'unité ch est liée à la largeur du caractère 0, donc 68ch tombe près de l'idéal classique de 66 caractères quelle que soit la taille de police. Ajustez la liste de sélecteurs pour correspondre à votre site cible.

Étape deux : ouvrir le texte

La hauteur de ligne par défaut sur les sites d'actualités est souvent un 1,4 à l'étroit. La lecture est bien plus confortable autour de 1,7, avec une taille de corps légèrement plus grande et une serif ou une sans-serif humaniste :

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

Étape trois : faire le ménage

Maintenant, masquez le bruit. Barres latérales, en-têtes collants, encarts de newsletter et rails de contenu connexe se disputent tous l'attention. Une règle d'affichage globale les balaie :

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

Soyez légèrement prudent avec les sélecteurs d'attributs comme [class*="sticky"] — testez la page et retirez tout sélecteur qui masque quelque chose que vous vouliez garder.

Tout assembler en une règle

Dans JustZix, créez une nouvelle règle, réglez le motif d'URL sur le site que vous lisez le plus (par exemple *://*.example-news.com/*), collez les trois blocs CSS dans le panneau CSS, et enregistrez. Chaque article correspondant s'ouvre désormais automatiquement dans votre mode lecture personnel.

Un fond apaisant

Le blanc pur à pleine luminosité est dur le soir. Une teinte crème douce réduit l'éblouissement sans la perte de contraste d'un thème sombre lourd :

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

À partir de là, vous pouvez continuer à affiner : épingler la table des matières, ajouter un surlignage de focus au paragraphe courant, ou superposer un badge de temps de lecture. Parcourez nos exemples prêts à l'emploi pour plus de points de départ, voyez l'article complémentaire sur l'obtention de la largeur de colonne exacte, et téléchargez JustZix si ce n'est pas déjà fait. Le mode lecture, à votre façon.