Validación HTML: CSS: "letter-spacing": "NaNrem" no es un valor de "letter-spacing".

Acerca de este problema HTML

NaN en JavaScript significa “Not a Number” y aparece cuando una operación numérica falla — por ejemplo, parsear una cadena no numérica con parseFloat(), dividir 0 entre 0, o referenciar una variable undefined en aritmética. Cuando este valor NaN se concatena con una cadena de unidad como "rem", el resultado es "NaNrem", que no tiene significado para CSS. El navegador no puede interpretarlo, y el validador W3C lo marca como un valor de letter-spacing inválido.

Este problema casi siempre se origina en estilos generados dinámicamente — ya sea a través de JavaScript que establece estilos en línea, una plantilla del lado del servidor que computa valores CSS, o una biblioteca CSS-in-JS. El HTML renderizado termina conteniendo algo como style="letter-spacing: NaNrem", que el validador rechaza con razón.

Más allá de la validación, esto es un problema práctico: el navegador ignorará completamente la declaración inválida, por lo que cualquier espaciado de letras que hayas planeado no se aplicará. Tu diseño puede verse diferente a lo esperado, y el valor inválido en el marcado señala un error en tu código que también podría afectar otros estilos computados.

Cómo solucionarlo

Rastrea el origen del valor. Busca en tu código base dónde se establece letter-spacing. Si es un estilo en línea, revisa el JavaScript o código del lado del servidor que lo genera.
Valida el número antes de usarlo. En JavaScript, usa Number.isNaN() o isFinite() para verificar que un valor computado es válido antes de aplicarlo.
Proporciona un respaldo sensato. Si el cálculo puede fallar, establece por defecto un valor conocido como 0 o normal.
Corrige la causa raíz. Determina por qué el cálculo produce NaN — causas comunes incluyen atributos de datos faltantes, variables undefined, o parsear cadenas no numéricas.

Ejemplos

❌ Inválido: `NaN` concatenado con una unidad

Así es como se ve el HTML renderizado cuando ocurre el error:

<p style="letter-spacing: NaNrem">Texto espaciado</p>

El JavaScript que probablemente lo produjo:

// Error: getAttribute devuelve null si data-spacing falta
let spacing = parseFloat(element.getAttribute('data-spacing'));
element.style.letterSpacing = spacing + 'rem'; // "NaNrem" si el atributo falta

✅ Corregido: Valida el valor antes de aplicarlo

let raw = parseFloat(element.getAttribute('data-spacing'));
let spacing = Number.isFinite(raw) ? raw : 0.1; // respaldo a 0.1
element.style.letterSpacing = spacing + 'rem';

Esto produce CSS en línea válido:

<p style="letter-spacing: 0.1rem">Texto espaciado</p>

✅ Corregido: Usando un valor CSS estático

Si el letter-spacing no necesita ser dinámico, la solución más simple es usar una regla CSS plana en lugar de computarla en JavaScript:

<style>
  .spaced-text {
    letter-spacing: 0.1rem;
  }
</style>
<p class="spaced-text">Texto espaciado</p>

✅ Corregido: Plantilla del lado del servidor con protección

Si una plantilla del lado del servidor genera el estilo, añade una verificación antes de renderizar:

<!-- Pseudocódigo para un motor de plantillas -->

<!-- Solo generar el atributo style si el valor es un número válido -->

<p style="letter-spacing: 0.05rem">Texto espaciado</p>

Asegúrate de que tu lógica de plantilla verifique que el valor es numérico antes de inyectarlo en el marcado. Si el valor falta o es inválido, omite completamente el atributo style o usa un valor predeterminado seguro.