← Tous les articles

Guides

Ajoutez des badges de temps de lecture et de nombre de mots à n'importe quelle page

17 mai 2026 · par JustZix Team

Avant de vous engager dans un article, il est utile de connaître la taille de l'engagement. Est-ce un survol de trois minutes ou une plongée de vingt minutes ? Beaucoup de sites ne le disent pas. Avec une petite règle JavaScript JustZix, vous pouvez ajouter vous-même un badge de temps de lecture et de nombre de mots à chaque page.

Comment le temps de lecture est estimé

La méthode standard est simple : compter les mots de l'article, puis diviser par une vitesse de lecture moyenne. La plupart des estimations utilisent 200 à 250 mots par minute pour les lecteurs adultes de prose en ligne. Nous utiliserons 220 comme juste milieu raisonnable. Ce ne sera jamais exact, mais cela donne un sens utile de l'échelle.

Le script de comptage

Ce snippet trouve l'article principal, compte ses mots, et calcule les minutes. Collez-le dans le panneau JS d'une règle JustZix :

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

La regex /\s+/ découpe sur toute suite d'espaces, et filter(Boolean) écarte les entrées vides pour que le compte soit propre.

Dessiner le badge

Maintenant, construisez un petit élément flottant et placez-le dans un coin de la zone d'affichage :

function showBadge(stats) {
  if (!stats) return;
  var b = document.createElement('div');
  b.id = 'jz-read-badge';
  b.textContent = stats.minutes + ' min de lecture · '
    + stats.words.toLocaleString() + ' mots';
  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);

Le badge est fixé au coin inférieur droit pour qu'il reste visible pendant que vous défilez sans recouvrir le texte.

Mettre à jour la progression au défilement

Vous pouvez rendre le badge vivant en montrant combien il reste. Ajoutez un écouteur de défilement qui recalcule selon la 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 restantes · '
    + Math.round(ratio * 100) + '%';
}, { passive: true });

L'option { passive: true } indique au navigateur que l'écouteur ne bloquera pas le défilement, gardant la page fluide.

Gérer les pages qui se chargent tard

Certains sites rendent l'article après le chargement initial. Si le badge affiche zéro mot, retardez légèrement le comptage :

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

Faites-en une règle

Créez une règle JustZix, réglez le motif d'URL sur les sites où vous voulez le badge, et collez les blocs de comptage, de badge et de défilement dans le panneau JS. Enregistrez et rechargez — une pastille soignée dans le coin vous indique maintenant ce qui vous attend et le chemin parcouru.

Un badge de lecture se marie naturellement avec une mise en page calme. Combinez-le avec des barres latérales masquées et un fond chaud pour une installation de lecture concentrée. Parcourez nos exemples prêts à l'emploi pour plus de recettes JS, et téléchargez JustZix pour ajouter le badge dès aujourd'hui.