ゲームの右から左へ書く言語への対応
遊びを届ける執筆にClaudeを使用しています。
アラビア語・ヘブライ語・ペルシア語（ファルシー）・ウルドゥー語は、文字を右から左へ書く言語です。これらはRTL（Right-to-Left）言語と総称されます。ゲームにこれらの言語を追加しようとして「テキストが逆向きに表示された」「UIのボタン配置がおかしくなった」と困った経験がある方は少なくないはずです。 RTL対応は「フォントを変えれば終わり」ではありません。テキストの表示方向、UI要素の左右反転、文字の結合ルール、数字の扱い方など、独立した複数の問題が重なっています。この記事では、ブラウザゲームを前提に、何をどの順番で対処すればよいかを整理します。
この記事の目次
RTL言語が持つ固有の仕組みを理解する
英語や日本語と違い、RTL言語のテキストは単純に「逆から書いた文字列」ではありません。アラビア語は同じ文字でも語中の位置（語頭・語中・語末・単独）によって字形が変わります。これをアラビア文字の結合形（文字の異体字）といい、フォントエンジンが自動で処理する部分です。ブラウザのHTMLレンダリングはこの処理をある程度サポートしていますが、Canvas APIやWebGLで独自にテキストを描画している場合は自力で対処する必要があります。
また、RTL言語の文章の中に数字や英語が混在するケースがあります。この状態を双方向テキスト（Bidi: Bidirectional Text）といいます。「アラビア語の文の中に1990年という数字が入る」ような場面で、数字は左から右のまま表示しつつ、前後のアラビア語は右から左に流れる必要があります。Bidiの制御を誤ると、数字の前後で文字が崩れたり、文の区切りが不自然になります。
これら二点——アラビア文字の結合形とBidi処理——を最初に把握しておくと、後の対処が整理しやすくなります。
HTMLベースのゲームでできること・できないこと
ブラウザのHTMLとCSSはRTLの基本的な表示を比較的うまく処理できます。<html lang="ar" dir="rtl"> のように dir 属性を指定するだけで、テキストの流れ、flexboxの方向、インライン要素の並び順がまとめて右起点に切り替わります。フォームのテキスト入力も自動でRTLになります。
ただし注意点がいくつかあります。
- dir="rtl" はページ全体か要素単位に適用する。ゲーム内UIが独自のdivで組まれている場合、そのdiv自体に dir="rtl" を当てないと効かないことがあります。
- CSSの margin-left / margin-right はそのまま残る。RTLに切り替えると視覚的な左右が逆になるため、余白や位置指定が意図と逆方向に働くことがあります。論理プロパティ（margin-inline-start / margin-inline-end）を使うと、LTR・RTLどちらでも意図通りに動きます。
- Canvas APIはRTLを自動処理しない。fillText() でアラビア語を描画するだけでは結合形が正しく出ないことがあります。後述するライブラリの導入を検討してください。
HTMLベースでUIを組んでいるゲームは、CSSと dir 属性の組み合わせで大半のテキスト表示は解決できます。Canvasを多用している場合は追加の実装コストがかかると見込んでおきましょう。
UI全体の左右反転をどう判断するか
テキストが正しく表示された後に直面するのが「UIのレイアウトをどこまで反転させるか」という判断です。RTL言語の読者は画面全体の視線の流れも右から左になるため、メニューの開く方向、ナビゲーションの並び、アイコンの向きなども本来は反転が望ましいとされています。
ただし、すべてを反転させると却って混乱を招く要素もあります。判断の目安を以下に示します。
反転させるべき要素
- テキストを含むボタンや説明文の配置（左寄せ→右寄せ）
- リストや会話ウィンドウの流れ方向
- 進行方向を示すUIアロー（「次へ ›」のような要素）
反転させないほうが自然な要素
- 再生・停止・巻き戻しなど時間軸を示す操作ボタン（普遍的なメタファーとして左→右が定着している）
- 地図やフィールドの向き（ゲーム内の空間はRTLに影響されない）
- 数字のみで構成されたスコアやタイマー
実際の判断に迷う場合は、同じジャンルのアラビア語版商業ゲームを数本スクリーンショットで確認してみると、業界での慣習が見えてきます。
Canvasを使う場合のテキスト描画対策
Canvasでテキストを描画しているゲームは、ブラウザのRTL自動処理が届かない領域での対処が必要です。主なアプローチは次の二つです。
1. canvas の direction プロパティを使う
ctx.direction = "rtl" を設定し、ctx.textAlign = "right" と組み合わせることで、簡単なアラビア語テキストであれば正しく描画できる場合があります。ただし、これだけでは文字の結合形が正しく処理されない環境もあります。動作確認はChrome・Firefox・Safariの複数ブラウザで行ってください。
2. 専用ライブラリを使う
結合形の処理やBidiを確実に扱いたい場合は、arabic-reshaper や bidi-js のような専用ライブラリを利用する方法があります。テキストをライブラリで前処理してから fillText() に渡すと、結合形が正しく組まれた状態で描画されます。公式ドキュメントでサポートブラウザとバージョンを確認してから導入してください。
どちらの方法でも、数字と文字が混在するBidiテキストの最終確認は必須です。テスト文として「モデル名と数字が混じったアラビア語文」を用意し、崩れが出ないかチェックします。
フォントの選び方と文字化け防止
RTL言語に対応したフォントを使わないと、文字が豆腐（□）や別の文字に化けます。Google Fontsにはアラビア語対応フォント（Noto Naskh Arabic、Cairoなど）が用意されており、ウェブフォントとして読み込むことができます。ヘブライ語にはNoto Serif Hebrewなどが対応しています。
フォントを選ぶ際に確認する点は次のとおりです。
- グリフの網羅性：ゲームで使う文字（数字・句読点・特殊記号を含む）がフォントに収録されているか
- ファイルサイズ：RTL対応フォントはグリフ数が多くなりがちで、Webフォントとして読み込む場合はロード時間に影響します。サブセット化（使う文字だけを抽出）を検討してください
- ライセンス：商用ゲームへの組み込みが許可されているかを確認してください
一つの画面にLTLとRTLのテキストが混在する場合は、フォントのfallback設定も整えておきます。CSSの font-family で複数フォントを列挙し、アラビア文字の範囲だけを別フォントで補う @font-face の unicode-range 指定が有効です。
次の行動
手元のゲームのHTML要素に dir="rtl" を当て、テキストと余白がどう崩れるかを確認することが最初の一歩です。崩れた箇所をリストアップし、CSSの論理プロパティへの置き換えから着手してください。Canvasを使っている場合は ctx.direction = "rtl" を試し、結合形の崩れが出るようならライブラリの導入を検討してください。完成したゲームはZIPファイルとしてアソバースに投稿し、RTL言語話者のプレイヤーへ届けることができます。
参考資料
- MDN Web Docs「CSS 論理プロパティと値」
- MDN Web Docs「HTMLのdir属性」
- Unicode Consortium「Unicode Bidirectional Algorithm（UBA）」
- Google Fonts（アラビア語・ヘブライ語フォント一覧）
