Mis mejores utilidades, ahora en tu móvil.
Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.
# Mide el ancho exacto de cualquier texto en píxeles
¿Tu texto se sale del contenedor? ¿Necesitas saber cuánto espacio ocupa un titular antes de renderizarlo? La API Canvas del navegador permite medir el ancho exacto de cualquier cadena de texto con la precisión de un píxel, sin necesidad de renderizarlo en el DOM.# Por qué contar caracteres no es suficiente
Las fuentes tipográficas modernas son proporcionales: cada glifo tiene un ancho diferente. Una "W" puede ocupar tres veces más que una "i". El número de caracteres no te dice nada sobre el espacio visual real que ocupa el texto.- Diseño web: Evita desbordamientos en botones, etiquetas y celdas de tabla.
- SEO: Los motores de búsqueda truncan los títulos por píxeles, no por caracteres.
- Canvas y PDF: Calcula la posición exacta antes de dibujar texto programáticamente.
- Tooltips y globos: Dimensiona dinámicamente los contenedores según el texto interior.
# Cómo funciona la medición con Canvas
El métodoctx.measureText() de la API Canvas devuelve un objeto TextMetrics con la propiedad width, que refleja el ancho en píxeles CSS con la fuente activa en ese momento. Esta herramienta configura el contexto con tu fuente, tamaño, peso y estilo antes de medir.const ctx = document.createElement('canvas').getContext('2d');ctx.font = '700 16px Inter, system-ui, sans-serif';const width = ctx.measureText('Hola Mundo').width; // ej. 74.5