Verificação HTML: CSS: "letter-spacing": "NaNrem" não é um valor de "letter-spacing".

Sobre este problema HTML

NaN em JavaScript significa “Not a Number” e aparece quando uma operação numérica falha — por exemplo, ao analisar uma string não-numérica com parseFloat(), dividir 0 por 0, ou referenciar uma variável undefined numa operação aritmética. Quando este valor NaN é concatenado com uma string de unidade como "rem", o resultado é "NaNrem", que não tem significado para CSS. O navegador não consegue interpretá-lo, e o validador W3C assinala-o como um valor de letter-spacing inválido.

Este problema quase sempre origina de estilos gerados dinamicamente — seja através de JavaScript que define estilos inline, um template do lado do servidor que calcula valores CSS, ou uma biblioteca CSS-in-JS. O HTML renderizado acaba por conter algo como style="letter-spacing: NaNrem", que o validador rejeita legitimamente.

Além da validação, isto é um problema prático: o navegador irá ignorar completamente a declaração inválida, pelo que o letter-spacing que pretendia não será aplicado. O seu layout pode parecer diferente do esperado, e o valor inválido na marcação sinaliza um bug no seu código que pode afetar outros estilos calculados também.

Como corrigir

Rastreie a origem do valor. Procure no seu código onde letter-spacing é definido. Se for um estilo inline, examine o JavaScript ou código do lado do servidor que o gera.
Valide o número antes de o usar. Em JavaScript, use Number.isNaN() ou isFinite() para verificar que um valor calculado é válido antes de o aplicar.
Forneça uma alternativa sensata. Se o cálculo pode falhar, use como padrão um valor conhecido como bom, como 0 ou normal.
Corrija a causa raiz. Determine por que o cálculo produz NaN — causas comuns incluem atributos de dados em falta, variáveis undefined, ou análise de strings não-numéricas.

Exemplos

❌ Inválido: `NaN` concatenado com uma unidade

Isto é como o HTML renderizado parece quando o bug ocorre:

<p style="letter-spacing: NaNrem">Texto espaçado</p>

O JavaScript que provavelmente o produziu:

// Bug: getAttribute retorna null se data-spacing estiver em falta
let spacing = parseFloat(element.getAttribute('data-spacing'));
element.style.letterSpacing = spacing + 'rem'; // "NaNrem" se o atributo estiver em falta

✅ Corrigido: Valide o valor antes de o aplicar

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

Isto produz CSS inline válido:

<p style="letter-spacing: 0.1rem">Texto espaçado</p>

✅ Corrigido: Usar um valor CSS estático

Se o letter-spacing não precisa de ser dinâmico, a correção mais simples é usar uma regra CSS simples em vez de calculá-la em JavaScript:

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

✅ Corrigido: Template do lado do servidor com uma verificação

Se um template do lado do servidor gera o estilo, adicione uma verificação antes de renderizar:

<!-- Pseudocódigo para um motor de templates -->

<!-- Só produzir o atributo style se o valor for um número válido -->

<p style="letter-spacing: 0.05rem">Texto espaçado</p>

Certifique-se de que a sua lógica de template verifica que o valor é numérico antes de o injetar na marcação. Se o valor estiver em falta ou for inválido, omita completamente o atributo style ou use um padrão seguro.