← All posts

Guides

Add reading-time and word-count badges to any page

17 May 2026 · by JustZix Team

Before you commit to an article it helps to know the size of the commitment. Is this a three-minute skim or a twenty-minute deep dive? Many sites do not say. With a small JustZix JavaScript rule you can add a reading-time and word-count badge to every page yourself.

How reading time is estimated

The standard method is simple: count the words in the article, then divide by an average reading speed. Most estimates use 200 to 250 words per minute for adult readers of online prose. We will use 220 as a reasonable middle ground. It will never be exact, but it gives a useful sense of scale.

The counting script

This snippet finds the main article, counts its words, and computes minutes. Paste it into the JS pane of a JustZix rule:

function countArticle() {
  var el = document.querySelector('article, main, .post-content');
  if (!el) return null;
  var text = el.innerText || '';
  var words = text.trim().split(/\s+/).filter(Boolean).length;
  var minutes = Math.max(1, Math.round(words / 220));
  return { words: words, minutes: minutes };
}

The regex /\s+/ splits on any run of whitespace, and filter(Boolean) drops empty entries so the count is clean.

Drawing the badge

Now build a small floating element and place it in a corner of the viewport:

function showBadge(stats) {
  if (!stats) return;
  var b = document.createElement('div');
  b.id = 'jz-read-badge';
  b.textContent = stats.minutes + ' min read · '
    + stats.words.toLocaleString() + ' words';
  b.style.cssText = [
    'position:fixed', 'bottom:16px', 'right:16px',
    'z-index:99999', 'padding:8px 14px',
    'background:#2b2620', 'color:#f4ecd8',
    'font:13px/1 system-ui, sans-serif',
    'border-radius:20px', 'box-shadow:0 2px 8px rgba(0,0,0,.3)'
  ].join(';');
  document.body.appendChild(b);
}

var stats = countArticle();
showBadge(stats);

The badge is fixed to the bottom-right corner so it stays visible as you scroll without covering text.

Updating progress as you scroll

You can make the badge live by showing how much is left. Add a scroll listener that recalculates based on position:

window.addEventListener('scroll', function () {
  var badge = document.getElementById('jz-read-badge');
  if (!badge || !stats) return;
  var max = document.body.scrollHeight - window.innerHeight;
  var ratio = max > 0 ? window.scrollY / max : 1;
  var left = Math.max(0, Math.round(stats.minutes * (1 - ratio)));
  badge.textContent = left + ' min left · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

The { passive: true } option tells the browser the listener will not block scrolling, keeping the page smooth.

Handling pages that load late

Some sites render the article after the initial load. If the badge shows zero words, delay the count slightly:

setTimeout(function () {
  if (!document.getElementById('jz-read-badge')) {
    showBadge(countArticle());
  }
}, 1200);

Make it a rule

Create a JustZix rule, set the URL pattern to the sites where you want the badge, and paste the counting, badge, and scroll blocks into the JS pane. Save and reload — a tidy pill in the corner now tells you what you are in for and how far you have come.

A reading badge pairs naturally with a calm layout. Combine it with hidden sidebars and a warm background for a focused reading setup. Browse our ready-made examples for more JS recipes, and download JustZix to add the badge today.