← All posts

Tutorials

Build your own reader mode with JustZix

17 May 2026 · by JustZix Team

Browser reader modes are great until they strip out the one image you wanted, mangle code blocks, or refuse to trigger at all. With JustZix you can build your own reader mode that works exactly how you like it, on exactly the sites you choose.

Why roll your own

The built-in reader mode is a black box. You cannot tweak its line length, you cannot keep figures, and it often fails on pages that are not classic articles. A JustZix rule, by contrast, is just CSS you control. It runs on the real page, so links, code, and media all keep working. You decide what stays and what goes.

Step one: tame the article column

The single biggest readability win is constraining line length. Lines longer than about 75 characters force your eyes to travel too far, and you lose your place on the return sweep. Center the main column and cap its width:

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

The ch unit is tied to the width of the 0 character, so 68ch lands close to the classic 66-character ideal regardless of font size. Adjust the selector list to match your target site.

Step two: open up the text

Default line-height on news sites is often a cramped 1.4. Reading is far more comfortable around 1.7, with a slightly larger body size and a serif or humanist sans:

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

Step three: clear the deck

Now hide the noise. Sidebars, sticky headers, newsletter pop-ins, and related-content rails all compete for attention. A blanket display rule sweeps them away:

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

Be slightly conservative with attribute selectors like [class*="sticky"] — test the page and remove any selector that hides something you wanted to keep.

Putting it together as a rule

In JustZix, create a new rule, set the URL pattern to the site you read most (for example *://*.example-news.com/*), paste all three CSS blocks into the CSS pane, and save. Every matching article now opens in your personal reader mode automatically.

A calm background

Pure white at full brightness is harsh in the evening. A soft cream tone reduces glare without the contrast loss of a heavy dark theme:

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

From here you can keep refining: pin the table of contents, add a focus highlight to the current paragraph, or layer a reading-time badge. Browse our ready-made examples for more starting points, see the companion piece on getting column width exactly right, and download JustZix if you have not yet. Reader mode, your way.