Build your own reader mode — strip a page to its content
Browsers have a reader mode, but it is hit-or-miss — on one page it does not trigger, on another it cuts too much, and you cannot tune it. In JustZix you build your own: one action button that strips the page to the article itself, by your rules.
Why your own
The built-in reader mode is a black box. You do not know when it appears, you cannot influence what it considers "content", you cannot change the typography. Your own rule is a dozen lines you understand and adjust to your taste.
Best as a BUTTON action
You rarely want reader mode on automatically — you want it on demand. That makes it an ideal candidate for a BUTTON action in the JustZix action bar. Label it, say, READ, with code that runs on click:
const art = document.querySelector(
'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('No content container found.'); }
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';
}How it works
Picking the content container
querySelector gets a list of candidates from most to least reliable: <article>, an element with role="main", <main>, then common CMS classes. It takes the first that exists. For a page where nothing matches, add its own selector to the front of the list.
replaceChildren
document.body.replaceChildren(art) throws everything out of <body> and puts only the article container there. One call instead of a loop removing element after element.
Typography
max-width:70ch gives a line about 70 characters long — the readability optimum. The rest is margin, a serif font and a warm background. Change it to your taste.
The CSS-only variant
If the page has a clean <article>, you can skip the JS — in the rule's CSS tab:
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;
}The CSS variant is less reliable (it depends on the page structure) but it does not touch the DOM — easy to switch off.
Pitfalls
- Images in the content stay. They are children of the article, so they survive — which is good.
- replaceChildren is one-way. After stripping, you return to the normal page with a reload (F5). That is acceptable for an on-demand action.
- The page's scripts may protest. Some of the page's code relies on elements we removed and will throw an error in the console. It does not break the content.
See also
- Examples — ready-made snippets for actions and rules
- Tame sticky elements — a lighter way to declutter a page
- The BUTTON action — the action type you build this on
Install JustZix — and read articles without the rest of the page.
Rate this post
No ratings yet — be the first.