Usa lang, dir y la declaración de codificación con criterio, y vence las trampas de normalización y direccionalidad de Unicode.
Abrir esta lección en KodokonEl atributo lang es mucho más que metadatos: dirige las voces de los lectores de pantalla, la separación silábica (hyphens: auto no funciona sin él), la selección de glifos CJK (el mismo ideograma se dibuja de forma diferente en japonés y en chino), las comillas generadas por <q> y el selector CSS :lang(). Se hereda: decláralo en <html> con una etiqueta BCP 47 (en, en-GB, ja) y anúlalo localmente en cada cambio de idioma.
<html lang="en">
<p>She said: <q>hello</q>.</p>
<p lang="fr">Elle a dit : <q>bonjour</q>.</p>
</html>dir=rtl invierte la alineación por defecto y el orden visual de los caracteres con direccionalidad neutra. Para contenido de usuario impredecible, dir=auto elige la dirección según el primer carácter fuertemente direccional. El elemento <bdi> aísla un fragmento del algoritmo bidireccional: sin él, un nombre de usuario en árabe seguido de ": 12 points" ve su puntuación reordenada de forma ininteligible.
<p dir="auto">مرحبا - inferred direction: RTL</p>
<ul>
<li><bdi>مستخدم</bdi>: 12 points</li>
<li><bdi>Alice</bdi>: 8 points</li>
</ul>La declaración <meta charset=utf-8> debe aparecer dentro de los primeros 1024 bytes del documento: el navegador ejecuta un preanálisis limitado a esa ventana antes de elegir una codificación. Sin declaración y sin cabecera HTTP, la codificación por defecto depende de la configuración regional del usuario (a menudo windows-1252 en Europa Occidental) - nunca UTF-8. Un BOM al inicio del archivo, en cambio, anula todo lo demás, incluida la cabecera HTTP.
const composed = "\u00e9";
const decomposed = "e\u0301";
console.log(composed === decomposed); // false
const nfc = decomposed.normalize("NFC");
console.log(composed === nfc); // truemacOS almacena algunos nombres de archivo en forma descompuesta (NFD): una "é" proveniente de una subida puede por tanto diferir de la escrita en un teclado. Normaliza sistemáticamente toda entrada de usuario a NFC antes de almacenarla o compararla. Por último, .length cuenta unidades de código UTF-16, no caracteres percibidos: un emoji de familia combina más de siete de ellas; usa Intl.Segmenter para contar grafemas reales.
<meta charset=utf-8>?<head><body>dir=auto la dirección de un elemento?<html>===?