← All posts

Tutorials

Word count and reading time on any page

15 May 2026 · by JustZix Team

How long will this article take — two minutes or twenty? Most pages do not say. This rule adds a small bar at the top of every article: word count and estimated reading time.

The rule

The rule's JavaScript, URL pattern for a blog or site you read:

const art = document.querySelector('article, main, .entry-content');
if (art) {
  const words = art.innerText.trim().split(/\s+/).length;
  const min = Math.max(1, Math.round(words / 200));
  const bar = document.createElement('div');
  bar.textContent = words + ' words · ~' + min + ' min read';
  bar.style.cssText =
    'position:sticky;top:0;z-index:9999;padding:6px 12px;' +
    'background:#1f2937;color:#fff;font:13px/1.4 system-ui;' +
    'text-align:center';
  art.prepend(bar);
}

How it works

Counting words

art.innerText is the article's visible text (no HTML tags). split(/\s+/) cuts it on every run of whitespace — the array length is the word count. Simple and accurate enough.

200 words per minute

The average reading-with-comprehension pace is 200–250 words per minute. We take 200 as a cautious middle; Math.max(1, ...) keeps a short text from showing "0 min".

A sticky bar

position: sticky; top: 0 keeps the bar visible as you scroll into the article — a small piece of info, always at hand.

Variant — a reading-progress bar

Want to see how much of the article is left? Add a thin bar at the top that grows with the scroll:

const p = document.createElement('div');
p.style.cssText =
  'position:fixed;top:0;left:0;height:3px;z-index:99999;' +
  'background:#14b8a6;width:0';
document.body.appendChild(p);
addEventListener('scroll', () => {
  const h = document.body.scrollHeight - innerHeight;
  p.style.width = (scrollY / h * 100) + '%';
});

Pitfalls

• It counts captions and code too. innerText includes everything in the container — code blocks included. For a typical article the difference is negligible.
• Container choice. If the counter shows an absurd number, querySelector hit too broad an element — narrow the selector.

See also

• Examples — more ready-made rules
• Reader mode — comfort to read to the end
• Web Vitals monitor — another on-page info bar

Install JustZix — and know up front what you are signing up for.