레이아웃 및 글꼴 조정 및 RTL 지원

RTL(오른쪽에서 왼쪽) 흐름 방향을 포함하여 여러 언어의 레이아웃 및 글꼴을 지원하도록 앱을 디자인합니다. 흐름 방향은 스크립트가 작성되고 표시되는 방향이며 페이지의 UI 요소는 눈으로 스캔됩니다.

레이아웃 지침

독일어 및 핀란드어와 같은 언어는 일반적으로 영어보다 더 많은 문자를 사용합니다. 동아시아 글꼴은 일반적으로 높이가 더 필요합니다. 아랍어 및 히브리어와 같은 언어에서는 레이아웃 패널과 텍스트 요소를 RTL(오른쪽에서 왼쪽) 읽기 순서로 배치해야 합니다.

번역된 텍스트 메트릭의 이러한 변형으로 인해 절대 위치 지정, 고정 너비 또는 고정 높이를 사용자 인터페이스(UI)에 사용하지 않는 것이 좋습니다. 대신 Windows UI 요소에 기본 제공되는 동적 레이아웃 메커니즘을 활용합니다. 예를 들어 콘텐츠 컨트롤(예: 단추), 항목 컨트롤(예: 그리드 보기 및 목록 보기) 및 레이아웃 패널(예: 그리드 및 스택 패널)은 기본적으로 콘텐츠에 맞게 크기 조정 및 재배치됩니다. 앱을 의사 지역화하여 UI 요소의 크기가 콘텐츠에 맞게 제대로 조정되지 않는 문제가 있는 에지 사례를 발견합니다.

동적 레이아웃은 권장되는 기술이며 대부분의 경우 이를 사용할 수 있습니다. UI 마크업에 크기를 고정하는 것보다는 그다지 좋지 않지만, 언어에 따라 레이아웃 값을 설정하는 것이 더 낫습니다. 다음은 앱에서 지역화자가 언어별로 적절하게 설정할 수 있는 리소스로 Width 속성을 노출하는 방법의 예입니다. 먼저 앱의 리소스 파일(.resw)에서 이름이 "TitleText.Width"인 속성 식별자를 추가합니다("TitleText" 대신 원하는 이름을 사용할 수 있음). 그런 다음, x:Uid 사용하여 하나 이상의 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 속성을 사용하고 대칭 패딩과 마진을 설정합니다. Grid와 같은 레이아웃 패널은 사용자가 설정한 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;
}

위의 기술은 기본 설정된 사용자 표시 언어의 속성을 LayoutDirection의 함수로 만듭니다. 어떤 이유로든 해당 논리를 원하지 않는 경우 앱에서 FlowDirection 속성을 지역화자가 번역하는 각 언어에 적절하게 설정할 수 있는 리소스로 노출할 수 있습니다.

먼저 앱의 리소스 파일(.resw)에서 이름이 "MainPage.FlowDirection"인 속성 식별자를 추가합니다("MainPage" 대신 원하는 이름을 사용할 수 있음). 그런 다음, x:Uid을 사용하여 핵심 페이지 요소(또는 루트 레이아웃 패널이나 프레임)를 이 속성 식별자와 연결합니다.

<Page x:Uid="MainPage">

모든 언어를 위한 하나의 코드 줄 대신, 각 번역된 언어에 대해 이 속성 리소스를 올바르게 "번역"하는 것은 번역자에게 달려 있습니다. 따라서 이 기술을 사용할 때 인간의 실수 발생 가능성이 높아진다는 점을 주의하세요.

중요 API

• FrameworkElement.FlowDirection
• LanguageFont

관련 항목

• UI 및 앱 패키지 매니페스트에서 문자열을 지역화하십시오
• 리소스를 언어, 규모 및 기타 조건에 맞게 조정하십시오.
• 사용자 프로필 언어 및 앱 매니페스트 언어 이해