Construisez votre propre mode lecture — réduire une page à son contenu
Les navigateurs ont un mode lecture, mais il est aléatoire — sur une page il ne se déclenche pas, sur une autre il coupe trop, et vous ne pouvez pas l'ajuster. Dans JustZix vous construisez le vôtre : un bouton d'action qui réduit la page à l'article lui-même, selon vos règles.
Pourquoi le vôtre
Le mode lecture intégré est une boîte noire. Vous ne savez pas quand il apparaît, vous ne pouvez pas influencer ce qu'il considère comme « contenu », vous ne pouvez pas changer la typographie. Votre propre règle, c'est une douzaine de lignes que vous comprenez et ajustez à votre goût.
Au mieux comme action BOUTON
Vous voulez rarement le mode lecture activé automatiquement — vous le voulez à la demande. Cela en fait un candidat idéal pour une action BOUTON dans la barre d'actions JustZix. Étiquetez-le, disons, READ, avec du code qui s'exécute au clic :
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('Aucun conteneur de contenu trouvé.'); }
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';
}Comment ça marche
Choisir le conteneur de contenu
querySelector reçoit une liste de candidats du plus fiable au moins fiable : <article>, un élément avec role="main", <main>, puis des classes de CMS courantes. Il prend le premier qui existe. Pour une page où rien ne correspond, ajoutez son propre sélecteur en tête de liste.
replaceChildren
document.body.replaceChildren(art) jette tout hors du <body> et n'y met que le conteneur de l'article. Un seul appel au lieu d'une boucle supprimant élément après élément.
Typographie
max-width:70ch donne une ligne d'environ 70 caractères — l'optimum de lisibilité. Le reste, c'est de la marge, une police à empattements et un fond chaud. Changez-le à votre goût.
La variante CSS seule
Si la page a un <article> propre, vous pouvez sauter le JS — dans l'onglet CSS de la règle :
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 est moins fiable (elle dépend de la structure de la page) mais elle ne touche pas le DOM — facile à désactiver.
Pièges
- Les images dans le contenu restent. Ce sont des enfants de l'article, donc elles survivent — ce qui est bien.
- replaceChildren est à sens unique. Après réduction, vous revenez à la page normale avec un rechargement (F5). C'est acceptable pour une action à la demande.
- Les scripts de la page peuvent protester. Une partie du code de la page compte sur des éléments que nous avons supprimés et lèvera une erreur dans la console. Cela ne casse pas le contenu.
À voir aussi
- Exemples — des snippets prêts à l'emploi pour les actions et les règles
- Maîtriser les éléments sticky — une façon plus légère de désencombrer une page
- L'action BOUTON — le type d'action sur lequel vous construisez ceci
Installez JustZix — et lisez les articles sans le reste de la page.
Notez cet article
Aucune note — soyez le premier.