レイアウトやフォントの調整と RTL のサポート

  • [アーティクル]

RTL (右から左) のテキストの方向を含め、複数の言語のレイアウトやフォントをサポートするアプリを設計します。 フローの方向とは、スクリプトが書き込まれ、表示される方向であり、ページ上の UI 要素が目でスキャンされます。

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

ドイツ語やフィンランド語などの言語では、通常、英語よりも多くの文字が使用されます。 東アジアのフォントでは、通常、より高さが必要です。 また、アラビア語やヘブライ語などの言語では、レイアウト パネルとテキスト要素を右から左 (RTL) の読み取り順序でレイアウトする必要があります。

翻訳されたテキストのメトリックにこれらのバリエーションがあるため、絶対配置、固定幅、固定高さをユーザー インターフェイス (UI) にベイクしないことをお勧めします。 代わりに、Windows UI 要素に組み込まれている動的レイアウト メカニズムを利用してください。 たとえば、コンテンツ コントロール (ボタンなど)、項目コントロール (グリッド ビューやリスト ビューなど)、レイアウト パネル (グリッドやスタックパネルなど) は、コンテンツに合わせて既定で自動的にサイズ変更およびリフローされます。 アプリを擬似ローカライズして、UI 要素のサイズがコンテンツに適切に合わない問題のあるエッジ ケースを明らかにします。

動的レイアウトが推奨される手法であり、ほとんどの場合に使用できます。 あまり望ましくありませんが、UI マークアップにサイズをベイクするよりも優れているのは、レイアウト値を言語の関数として設定することです。 ローカライザーが言語ごとに適切に設定できるリソースとして、アプリで Width プロパティを公開する方法の例を次に示します。 まず、アプリのリソース ファイル (.resw) で、"TitleText.Width" という名前のプロパティ識別子を追加します ("TitleText" の代わりに、任意の名前を使用できます)。 次に、x:Uid を使用して、1 つ以上の UI 要素をこのプロパティ識別子に関連付けます。

<TextBlock x:Uid="TitleText">

リソース ファイル (.resw)、プロパティ識別子、および x:Uid の詳細については、「UI およびアプリ パッケージ マニフェストで文字列をローカライズする」を参照してください。

フォント

LanguageFont フォント マッピング クラスは、特定の言語で推奨されるフォント ファミリ、サイズ、太さ、スタイルにプログラムでアクセスするために使用します。 LanguageFont クラスを使用すると、UI ヘッダー、通知、本文、ユーザーが編集可能なドキュメント本文フォントなど、さまざまなカテゴリのコンテンツに対して適切なフォント情報にアクセスできます。

イメージのミラーリング

RTL 用にミラー化する必要があるイメージ (つまり、同じイメージを反転できる) がアプリにある場合は、FlowDirection を使用できます。

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

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

アプリでイメージを正しく反転させるために別のイメージが必要な場合は、修飾子でLayoutDirectionリソース管理システムを使用できます (「言語、スケール、およびその他の修飾子用にリソースを調整する」の「LayoutDirection」セクションを参照してください)。 システムは、アプリランタイム言語 (ユーザー プロファイル言語とアプリ マニフェスト言語の理解を参照) が RTL 言語に設定されている場合に名前付きのfile.layoutdir-rtl.pngイメージを選択します。 この方法は、画像の一部が反転されているが、別の部分が反転していない場合に必要になる場合があります。

右から左 (RTL) 言語の処理

アプリが右から左 (RTL) 言語用にローカライズされている場合は、FrameworkElement.FlowDirection プロパティを使用し、対称パディングと余白を設定します。 設定した FlowDirection の値を使用して、グリッドスケールやフリップなどのレイアウトパネルを自動的に設定します。

FlowDirection は、ページのルート レイアウト パネル (またはフレーム) またはページ自体に設定します。 これにより、そのプロパティに含まれるすべてのコントロールがそのプロパティを継承します。

重要

ただし、 FlowDirection は 、Windows 設定でユーザーが選択した表示言語に基づいて自動的に設定されることはありません 。また、ユーザーの切り替え表示言語に応じて動的に変更されることはありません。 たとえば、ユーザーが Windows の設定を英語からアラビア語に切り替えた場合、 FlowDirection プロパティは 自動的に左から右から右から左に変更されません 。 アプリ開発者は、現在表示している言語に合わせて FlowDirection を適切に設定する必要があります。

プログラムによる手法では、優先ユーザー表示言語のプロパティをLayoutDirection使用して FlowDirection プロパティを設定します (以下のコード例を参照)。 Windows に含まれるほとんどのコントロールでは、FlowDirection が既に使用されています。 カスタム コントロールを実装する場合は、FlowDirection を使用して RTL 言語と LTR 言語に適切なレイアウト変更を行う必要があります。

this.languageTag = Windows.Globalization.ApplicationLanguages.Languages[0];

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

var flowDirectionSetting = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "LTR")
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
}
else
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
}

#include <winrt/Windows.ApplicationModel.Resources.Core.h>
#include <winrt/Windows.Globalization.h>
...

m_languageTag = Windows::Globalization::ApplicationLanguages::Languages().GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView().QualifierValues().Lookup(L"LayoutDirection");
if (flowDirectionSetting == L"LTR")
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::LeftToRight);
}
else
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::RightToLeft);
}

this->languageTag = Windows::Globalization::ApplicationLanguages::Languages->GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView()->QualifierValues->Lookup("LayoutDirection");
if (flowDirectionSetting == "LTR")
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::LeftToRight;
}
else
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::RightToLeft;
}

上記の手法により、 FlowDirection は優先ユーザー表示言語のプロパティの関数 LayoutDirection になります。 何らかの理由でそのロジックが不要な場合は、ローカライズ担当者が翻訳する言語ごとに適切に設定できるリソースとして、アプリで FlowDirection プロパティを公開できます。

まず、アプリのリソース ファイル (.resw) で、"MainPage.FlowDirection" という名前のプロパティ識別子を追加します ("MainPage" ではなく、任意の名前を使用できます)。 次に、x:Uid を使用して、メインの Page 要素 (またはそのルート レイアウト パネルまたはフレーム) をこのプロパティ識別子に関連付けます。

<Page x:Uid="MainPage">

すべての言語に対して 1 行のコードを記述する代わりに、翻訳された言語ごとにこのプロパティ リソースを正しく "翻訳" するかによって異なります。そのため、この手法を使用すると、人的エラーが発生する可能性があることに注意してください。

重要な API