← Todos los artículos

Guías

Añade insignias de tiempo de lectura y recuento de palabras a cualquier página

17 mayo 2026 · por JustZix Team

Antes de comprometerte con un artículo ayuda saber el tamaño del compromiso. ¿Es un vistazo de tres minutos o una inmersión profunda de veinte minutos? Muchos sitios no lo dicen. Con una pequeña regla JavaScript de JustZix puedes añadir tú mismo una insignia de tiempo de lectura y recuento de palabras a cada página.

Cómo se estima el tiempo de lectura

El método estándar es simple: cuenta las palabras del artículo y luego divide por una velocidad de lectura media. La mayoría de las estimaciones usan de 200 a 250 palabras por minuto para lectores adultos de prosa en línea. Usaremos 220 como un término medio razonable. Nunca será exacto, pero da una sensación útil de la escala.

El script de conteo

Este fragmento encuentra el artículo principal, cuenta sus palabras y calcula los minutos. Pégalo en el panel JS de una regla de 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 expresión regular /\s+/ divide en cualquier secuencia de espacio en blanco, y filter(Boolean) elimina las entradas vacías para que el recuento sea limpio.

Dibujar la insignia

Ahora construye un pequeño elemento flotante y colócalo en una esquina de la ventana de visualización:

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

La insignia se fija a la esquina inferior derecha para que se mantenga visible mientras te desplazas sin cubrir el texto.

Actualizar el progreso a medida que te desplazas

Puedes hacer la insignia dinámica mostrando cuánto queda. Añade un escuchador de desplazamiento que recalcule según la posición:

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

La opción { passive: true } le dice al navegador que el escuchador no bloqueará el desplazamiento, manteniendo la página fluida.

Gestionar páginas que cargan tarde

Algunos sitios renderizan el artículo después de la carga inicial. Si la insignia muestra cero palabras, retrasa el conteo ligeramente:

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

Conviértelo en una regla

Crea una regla de JustZix, fija el patrón de URL a los sitios donde quieras la insignia y pega los bloques de conteo, insignia y desplazamiento en el panel JS. Guarda y recarga — una pulcra píldora en la esquina ahora te dice en qué te metes y hasta dónde has llegado.

Una insignia de lectura se empareja de forma natural con una maquetación tranquila. Combínala con barras laterales ocultas y un fondo cálido para una configuración de lectura concentrada. Explora nuestros ejemplos listos para usar para más recetas JS, y descarga JustZix para añadir la insignia hoy.