さまざまな言語のレイアウトとフォントを調整し、RTL レイアウトをサポートする方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
いくつかのシンプルなガイドラインに従えば、Windows ストア アプリのレイアウトとフォントのローカライズをサポートできます。
テクノロジ
手順
レイアウトのガイドライン
ドイツ語やフィンランド語など、一部の言語ではテキストに英語より多くのスペースが必要です。
可能であれば、絶対配置、固定幅、固定高ではなく、可変レイアウト メカニズムを使ってください。JavaScript を使った Windows ストア アプリの場合は、-ms-grid や – ms-box などの CSS レイアウト メカニズムを使ってください。さまざまなレイアウト方向のローカライズには、左右対称のパディングと余白を使います。
このほか、アプリの言語に応じて :-ms-lang() 擬似クラス セレクターを使って特定の要素の幅などの CSS プロパティを調整できます。アプリ ホスティング プロセスは、これを有効にするためにルート要素の lang 属性をアプリ言語に設定します。
.item:-ms-lang(de, fi) { width: 350px; }
アラビア語やヘブライ語などの一部の言語では、テキスト レイアウトとアプリ レイアウトを読む方向に合わせて右から左 (RTL) にする必要があります。
JavaScript を使った Windows ストア アプリで ui-light.css または ui-dark.css スタイル シートを使うと、アプリ言語に応じて本文レイアウトの方向が自動的に設定されます。ui-light.css と ui-dark.css では次の CSS が用意されているため、開発者自身で記述する必要はありません。
body:-ms-lang(ar,he…) { direction: rtl;}
つまり、システムで RTL (右から左) 言語が使われる場合、ほとんどのアプリ レイアウトは正しく設定されます。
WinJS.UI コントロールと同様に、アプリで :-ms-lang() 擬似クラス セレクターを使って、margin や padding などの物理的な CSS プロパティを調整できます。after や before などのキーワードを使う論理的な CSS プロパティを調整する必要はありません。
HTML では align プロパティまたは属性を使わないでください。代わりに、direction プロパティを使って個々のコンポーネントの配置を制御できます。
CSS での垂直テキスト レイアウトのサポートには、writing-mode プロパティを使ってください。
画像の左右反転
RTL に対応するため左右反転が必要な画像がアプリに含まれる場合には、レンダリング時に CSS 変換を使って要素に .mirrorable クラスを追加して、次の CSS クラスを追加することにより、画像の左右反転を行ってください。
.mirrorable { transform: scaleX(-1); }
画像を正しく反転させるためにアプリで別の画像が必要な場合は、layoutdir 修飾子を指定してリソース管理システムを使うことができます。アプリケーション言語が RTL 言語に設定されている場合、システムは file.layoutdir-rtl.png という名前が付いた画像を選びます。画像の一部を反転させ、他の部分は反転させないという場合には、この方法が必要になることもあります。
フォント
JavaScript を使った Windows ストア アプリで ui-light.css または ui-dark.css スタイル シートを使うと、アプリ言語に応じてフォント セットが自動的に最も適切なフォントに設定されます。アプリ ホスティング プロセスは、ルート要素の lang 属性をアプリ言語に設定します。
単一のページに複数の言語を表示するアプリは、各言語のセクションに lang 属性を設定する必要があります。:-ms-lang() 擬似クラス セレクターは、ページのセクションごとに正しいフォントを選びます。
特定言語の推奨フォント ファミリ、サイズ、太さ、スタイルにプログラムを使ってアクセスする場合は、LanguageFont フォント マッピング API を使ってください。LanguageFont オブジェクトを使うと、コンテンツのさまざまなカテゴリ (UI ヘッダー、通知、本文のテキスト、ユーザー自身で編集できるドキュメント本文のフォントなど) の正しいフォント情報にアクセスできます。