← Wszystkie wpisy

Poradniki

Licznik słów i czasu czytania na każdej stronie

15 maja 2026 · autor JustZix Team

Ile zajmie przeczytanie tego artykułu — dwie minuty czy dwadzieścia? Większość stron tego nie mówi. Ta reguła dokłada na górę każdego artykułu mały pasek: liczba słów i szacowany czas czytania.

Reguła

JavaScript reguły, wzorzec URL na blog czy serwis, który czytasz:

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 + ' słów · ~' + min + ' min czytania';
  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);
}

Jak to działa

Liczenie słów

art.innerText to widoczny tekst artykułu (bez znaczników HTML). split(/\s+/) tnie go po każdym ciągu białych znaków — długość tablicy to liczba słów. Proste i wystarczająco dokładne.

200 słów na minutę

Przeciętne tempo czytania ze zrozumieniem to 200–250 słów na minutę. Bierzemy 200 jako ostrożny środek; Math.max(1, ...) pilnuje, by krótki tekst nie pokazał „0 min".

Pasek sticky

position: sticky; top: 0 sprawia, że pasek zostaje widoczny, gdy scrollujesz w głąb artykułu — drobna informacja, zawsze pod ręką.

Wariant — pasek postępu czytania

Chcesz widzieć, ile artykułu zostało? Dołóż cienki pasek u góry, który rośnie wraz ze scrollem:

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) + '%';
});

Pułapki

• Liczy też podpisy i kod. innerText obejmuje wszystko w kontenerze — bloki kodu też. Dla typowego artykułu różnica jest pomijalna.
• Dobór kontenera. Jak licznik pokazuje absurdalną liczbę, to znaczy, że querySelector trafił w zbyt szeroki element — zawęź selektor.

Zobacz też

• Przykłady — więcej gotowych reguł
• Reader mode — komfort czytania do końca
• Web Vitals monitor — inny pasek z informacją na stronie

Zainstaluj JustZix — i wiedz z góry, na ile się piszesz.