레이아웃 및 글꼴 조정, 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을 설정합니다. 그러면 내부에 포함된 모든 컨트롤이 해당 속성을 상속합니다.

Important

그러나 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">

이는 모든 언어에 대한 한 줄 코드 대신 번역되는 각 언어에 대해 이 속성 리소스를 올바르게 "번역"하는 번역가에 따라 달라집니다. 따라서 이 기술을 사용하는 경우 사람의 오류가 추가적으로 발생할 수 있음에 주의하세요.

중요 API