さまざまな言語のレイアウトとフォントを調整する方法
言語: HTML | XAML

さまざまな言語のレイアウトとフォントを調整し、RTL レイアウトをサポートする方法 (XAML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

いくつかのシンプルなガイドラインに従えば、Windows ストア アプリのレイアウトとフォントのローカライズをサポートできます。

手順

レイアウトのガイドライン

ドイツ語やフィンランド語など、一部の言語ではテキストに英語より多くのスペースが必要です。

絶対配置、固定幅、固定高ではなく、可変レイアウト メカニズムを使ってください。必要があれば、言語に応じて特定の UI 要素を調整できます。

要素に Uid を指定します。


<TextBlock x:Uid="Block1">

アプリの ResW ファイルには、ローカライズする言語ごとに設定できる Block1.Width のリソースを含めるようにします。

アラビア語やヘブライ語などの一部の言語では、テキスト レイアウトとアプリ レイアウトを読む方向に合わせて右から左 (RTL) にする必要があります。

C++、C#、または Visual Basic を使った Windows ストア アプリの場合、左右対称のパディング、余白と共に FlowDirection プロパティを使い、他のレイアウト方向のローカライズを有効にできます。

Grid などの Extensible Application Markup Language (XAML) レイアウト コントロールは、FlowDirection プロパティを使って自動的に拡大縮小と反転を行います。C++、C#、または Visual Basic を使った Windows ストア アプリ内に、独自の FlowDirection プロパティをローカライズ担当者用のリソースとして表示します。

アプリのメイン ページには Uid を指定します。


<Page x:Uid="MainPage">

アプリの ResW ファイルには、ローカライズする言語ごとに設定できる MainPage.FlowDirection のリソースを含めるようにします。

画像の左右反転

RTL に対応するために左右反転が必要な画像がアプリに含まれる場合は、次のように FlowDirection プロパティを適用できます。


<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />

<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />

画像を正しく反転させるためにアプリで別の画像が必要な場合は、layoutdir qualifier 修飾子を指定してリソース管理システムを使うことができます。アプリケーション言語が RTL 言語に設定されている場合、システムは file.layoutdir-rtl.png という名前が付いた画像を選びます。画像の一部を反転させ、他の部分は反転させないという場合には、この方法が必要になることもあります。

フォント

特定言語の推奨フォント ファミリ、サイズ、太さ、スタイルにプログラムを使ってアクセスする場合は、LanguageFont フォント マッピング API を使ってください。LanguageFont オブジェクトを使うと、コンテンツのさまざまなカテゴリ (UI ヘッダー、通知、本文のテキスト、ユーザー自身で編集できるドキュメント本文のフォントなど) の正しいフォント情報にアクセスできます。

関連トピック

FlowDirection
LanguageFont

 

 

表示:
© 2016 Microsoft