Notoは「豆腐なし」を意味する：ミャンマー文字の点線円を修正する

DatoCMSブログ ローカライゼーションがEN、DE、IT、ES、FRなど以上の意味を持つとき 2026年10月6日投稿 Roger Tuan, Ronak Ganatra, Silvano Stralla ページをコピー Markdownリンクをコピー Markdownとして表示 ChatGPTで開く Claudeで開く TLDR 顧客のS'gawカレンコンテンツがFirefoxで奇妙な点線円を表示していました。1つの言語のために修正するのではなく、43ものスクリプトに対応する解決策を見つけました。 CMSは現在、OSが描画できないスクリプトに対してGoogleのNotoフォントにフォールバックし、ページが必要なときにのみロードします。 ローカライゼーションに関して言えば、ロケールコード、フォールバック、テキストの方向、フォントは依然として非常に重要であることがわかりました。 この修正はCMS用であり、フロントエンド用ではありません。フォント検索に役立つチェックリストが下にあります。 ところで、S'gawカレンとは何ですか？ უკეთესი ការបង្ហាញ ለ ရှားပါး ⵜⵉⴼⵉⵏⴰⵖ これはジョージア語、クメール語、アムハラ語、ビルマ語、ティフィナグ文字で「珍しいスクリプトのためのより良い表示」を意味します。 先週まで、CMSがそれらをすべて正しく表示できるかどうかは、どのブラウザで開くかによって決まっていました。 最近、顧客から「FirefoxでのS'gawカレン文字レンダリングを修正してほしい」というサポートリクエストがありました。これがいくつかのグーグル検索につながりました。 手間を省くために言うと、S'gawカレンは主にミャンマーとタイで話されており、当社の顧客の1人がその言語でコンテンツを管理しています。Chromeは問題ありませんでした。しかし、Firefoxでは、文字の周りに明らかに存在すべきではない小さな点線円が表示されていました。私たちはそれを修正しました（詳細は後述）。しかし、私たちが陥ったウサギの穴は、「ローカライゼーション」について、神聖ローマ帝国やUnicodeほど頻繁には考えないことを照らし出しました。そして、ヘッドレスCMSで多言語サイトを運営している場合、私たちが発見したことの大部分はフロントエンドにも当てはまります。 したがって、この話の半分は「私たちが何をしたか」であり、もう半分は「あなたの側で関連する可能性のあること」です。 ローカライゼーションはスタックです 正直に言ってください。サイトが「ローカライズされている」と言うとき、おそらくそれは英語、ドイツ語、イタリア語、スペイン語、フランス語に翻訳されていることを意味します。 これらはすべて同じアルファベット、つまりラテン文字を使用する5つの言語です。これは、正直に言って、それほど大きな飛躍ではありません。 OK、ではさらに凝ったことをして、中国語のサポートも追加したとしましょう。 ローカライゼーション。✅。 または❓本当のローカライゼーションは、実際には一連の決定のスタックであり、翻訳はそのレイヤーの1つにすぎません。 レイヤー それは何に答えますか DatoCMSが提供するもの モデル どのコンテンツが翻訳されますか？ フィールドごとのローカライゼーション、およびモデルごとにオプションで可能な翻訳 ロケール どの言語をどの地域で？ 言語および地域コード（例: en-GB、pt-BR）（言語だけでなく、スイスのドイツ語はオーストリアのドイツ語とは完全に異なるため） ワークフロー 誰が翻訳し、誰が公開し、誰がQAし、いつ公開されますか？ ロケールベースの権限、ロケールごとの公開およびスケジュール設定、AI翻訳プラグイン、翻訳ツール 配信 翻訳が見つからない場合はどうなりますか？ fallbackLocales、_locales、_allFieldLocalesをコンテンツ配信APIで 方向 テキストはどちらの方向に流れますか？ 左から右へ（ほとんど）、右から左へ（例: アラビア語）、上から下へ（例: 漢字） レンダリング 画面は実際にそれを描画できますか？ CMSでの43スクリプトのNotoフォールバックフォント（つまり、CMSが入力したものをレンダリングできるか、顧客がウェブサイトでそれを見ることができるかではありません） これらのいずれかについて詳しく知りたい場合は、ドキュメントをご覧ください。DatoCMSでのローカライゼーション、地域固有の言語コード、AIによるコンテンツ翻訳、コンテンツ配信APIでのローカライゼーションは、Datoでのローカライゼーションについて多くをカバーしています。 ほとんどの会話は、そのスタックの上部（どのフィールド、どのワークフロー、どのAIモデル）で行われます。テキストが一般的なスクリプトで壊れるのは下部であり、フォントの選択がフロントエンドで顧客のためにそれをレンダリングできると非常に確信していない限り、知るのは少し難しいです。 言語 ≠ スクリプト ≠ ロケール これが私を🐰🕳️ハンティングに駆り立てた部分です。 TLDR？ 言語とは、人々が話すことです。 スクリプトとは、それを書き留める方法です。 ロケールとは、言語とそれが使用される場所です。 そして、それらは常に非常に直接的な方法で一致するわけではありません。 例えば、S'gawカレンはビルマ文字で書かれており、ビルマ語、モン語、シャン語と同じです。したがって、カレンを修正することはビルマ語を修正することを意味し、それは4つすべてを修正しました。良いボーナスです。 逆もまた真なり。セルビア語はキリル文字とラテン文字の両方で書かれており、パンジャブ語はインドではグルムキー文字、パキスタンではシャーマキー文字を使用します。 言語コードさえ奇妙になります。カレンには2文字のISOコードがありません。karはカレン言語全体をグループとしてカバーしており、S'gawカレン単体はkswです。 TIL。 さらに、これらのスクリプトが画面上で実際に行うことは、ラテン文字のみの読書では準備できません。 ビルマ文字とバリ文字は子音を互いに積み重ねます ビルマ語とクメール語では、一部の母音記号は子音の後にタイプされますが、それより前に描画されます。 ビルマ語、クメール語、ラオス語は単語の間にスペースを入れません。 新しく追加された43のスクリプトのうち6つは右から左に実行されます：Adlam、Hanifi Rohingya、Mandaic、N'Ko、Syriac、Thaana。 これらの一部を以下に示します。それぞれが自身の名前を書いており、問題なくレンダリングされるはずです。 スクリプト サンプル 文字通りの読み方/音 用途 ビルマ文字 မြန်မာ ミャンマー ビルマ語、S'gawカレン、モン語、シャン語 ジョージア文字 ქართული カルトゥリ（ジョージア語） ジョージア語、ミングレル語、スヴァン語 エチオピア文字 ግዕዝ ゲエズ アムハラ語、ティグリニャ語、ティグレ語、ゲエズ クメール文字 ខ្មែរ クメール語 クメール語 チベット文字 བོད་ ボド（チベット） チベット語、ゾンカ語、ラダク語 チェロキー文字 ᏣᎳᎩ ツァラギ（チェロキー語） チェロキー語 ティフィナグ文字 ⵜⵉⴼⵉⵏⴰⵖ ティフィナグ タシェルハイト語、中央アトラス・タマジット語 豆腐と点線円 スクリプトがレンダリングされない場合、通常は次の2つの方法のいずれかで壊れます。 豆腐（▯）。ブラウザは見つけられるすべてのフォントをチェックしましたが、その文字を持つフォントはありませんでした。そのため、ギブアップして空のボックスを描画します。豆腐のように見えるため、豆腐と呼ばれています。 点線円（◌）。より巧妙です。ブラウザはフォントを見つけましたが、テキストシェーピングエンジンが断片を結合できませんでした。ビルマ文字のようなスクリプトは、ベース文字と、その上、下、または周りのマークから各音節を構築します。フォントがそれらを結合できない場合、残りのマークは点線円で描画されます。これは基本的にブラウザが「このマークは文字を失いました」と言っているようなものです。それが顧客が見ていたものでした。 では、なぜChromeで、Firefoxではなかったのでしょうか？表示されるものは、ブラウザ、OS、およびインストールされているフォントによって異なります。各組み合わせは同じ文字に対して異なるフォールバックフォントを取得でき、一部はカレンを処理しますが、他は処理しません。 つまり、一度だけ再現して修正して次に進むことはできません。多くの組み合わせがあり、自分のラップトップからほとんど見ることはありません。 バグではなくカテゴリの修正 迅速な修正は、カレンのためだけに新しいフォントを1つロードし、FirefoxでLGTM（Looks Good To Me）して、さようなら、ということだったでしょう。そのチケットのどこかに「執着せずに調べる」というようなことが書かれていたのを覚えています。 そのため、1つの言語をパッチする代わりに、レベルを上げました。 言語ごとではなく、スクリプトごとに修正する：Notoはすでにスクリプトごとに1つのフォントを供給しているため、1つのルールでそれに書かれているすべての言語をカバーできます。 現代で使用されているすべてのスクリプトをカバーする：Unicodeはこれらの公式リスト（UAX #31のRecommended and Limited Use scripts）を保持しているため、それが範囲になりました。 オペレーティングシステムがすでに処理しているものをスキップする：ラテン文字、キリル文字、ギリシャ文字、アラビア文字、CJK、ハングル、デーヴァナーガリー文字、タイ文字などは、ほとんどどこでも問題なくレンダリングされます。 最終的に（それは重要です）、43のスクリプトと数十の言語が問題なくレンダリングされるようになり、新しい言語が登場するたびに触れる必要のない数個のCSSルールでカバーされるようになりました。 もしあなたが同様の問題をデバッグしているなら、「言語バグ」が実際にはスクリプトバグかどうかを確認してください。もしそうなら、スクリプト全体を修正することは通常、同じくらいの作業量です。 なぜNotoなのか？ レビュー中、Silvanoも「Googleがそう言っているから」以外の理由でこの質問をしました。 答えは文字通り名前にあります。Noto = 「no tofu」です。知っていましたか？文字通りTIL。 とにかく。 Googleは、すべてをカバーするフォールバックフォントとして特別にこれを構築しました（NPRには非常に良いバックストーリーがあります）。それに加えて： SIL Open Font Licenseの下でオープンソースであるため、バンドルして使用できます。