lang、dir、そして文字エンコーディング宣言を賢く使い、Unicodeの正規化と方向性の罠を打ち破ります。
このレッスンを Kodokon で開くlang属性はメタデータをはるかに超えるものです。スクリーンリーダーの音声、ハイフネーション(hyphens: autoはこれなしでは機能しません)、CJKグリフの選択(同じ表意文字が日本語と中国語では異なって描画されます)、<q>が生成する引用符、そしてCSSの:lang()セレクターを駆動します。これは継承されます。<html>にBCP 47タグ(en、en-GB、ja)で宣言し、言語が変わるたびにローカルに上書きしましょう。
<html lang="en">
<p>She said: <q>hello</q>.</p>
<p lang="fr">Elle a dit : <q>bonjour</q>.</p>
</html>dir=rtlはデフォルトの配置と、方向性が中立な文字の視覚的な順序を反転させます。予測できないユーザーコンテンツには、dir=autoが最初の強い方向性を持つ文字に基づいて方向を選びます。<bdi>要素はフラグメントを双方向アルゴリズムから隔離します。これがないと、アラビア語のユーザー名の後に「: 12ポイント」が続くと、その句読点が並べ替えられて意味不明になります。
<p dir="auto">مرحبا - inferred direction: RTL</p>
<ul>
<li><bdi>مستخدم</bdi>: 12 points</li>
<li><bdi>Alice</bdi>: 8 points</li>
</ul><meta charset=utf-8>宣言はドキュメントの最初の1024バイト以内に現れなければなりません。ブラウザはエンコーディングを選ぶ前に、そのウィンドウに限定された事前スキャンを実行するからです。宣言もHTTPヘッダーもない場合、デフォルトのエンコーディングはユーザーのロケールに依存し(西ヨーロッパではしばしばwindows-1252)、UTF-8ではありません。ただし、ファイルの先頭にあるBOMは、HTTPヘッダーを含む他のすべてを上書きします。
const composed = "\u00e9";
const decomposed = "e\u0301";
console.log(composed === decomposed); // false
const nfc = decomposed.normalize("NFC");
console.log(composed === nfc); // truemacOSは一部のファイル名を分解形式(NFD)で保存します。したがってアップロードから来た「é」は、キーボードで入力されたものと異なる場合があります。保存や比較の前に、すべてのユーザー入力を体系的にNFCに正規化しましょう。最後に、.lengthはUTF-16コードユニットを数えるのであって、知覚される文字を数えるのではありません。家族の絵文字は7つ以上を組み合わせています。実際の書記素を数えるにはIntl.Segmenterを使いましょう。
<meta charset=utf-8>宣言は必ずどこに配置しなければなりませんか?<head>内のどこでも<body>の最初の512バイト以内dir=autoはどのようにして要素の方向を決定しますか?<html>要素に宣言された方向を適用する===で異なることがあるのですか?