다양한 언어에 맞게 레이아웃 및 글꼴을 조정하고 RTL 레이아웃을 지원하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
몇 가지 간단한 지침에 따라 Windows 스토어 앱에서 지역화된 레이아웃 및 글꼴을 지원합니다.
기술
지침
레이아웃 지침
일부 언어(예: 독일어 및 핀란드어)에는 영어보다 더 많은 텍스트 공간이 필요합니다.
가능하면 절대 위치, 고정 너비 또는 고정 높이 대신 가변 레이아웃 메커니즘을 사용하세요. JavaScript를 사용하는 Windows 스토어 앱의 경우 CSS 레이아웃 메커니즘(예: -ms-grid 및 –ms-box)을 사용합니다. 다양한 레이아웃 방향에 대해 지역화를 사용하려면 대칭 안쪽 여백과 여백을 사용합니다.
앱에서 :-ms-lang() 의사 클래스 선택기를 사용하여 CSS 속성(예: 앱 언어 기반의 특정 요소에 대한 너비)을 조정할 수도 있습니다. 이를 위해 앱 호스트는 루트 요소의 lang 특성을 앱 언어로 설정합니다.
.item:-ms-lang(de, fi) { width: 350px; }
아랍어 및 히브리어와 같은 일부 언어에서는 텍스트 레이아웃과 앱 레이아웃이 RTL(오른쪽에서 왼쪽) 읽기 순서를 따라야 합니다.
ui-light.css 또는 ui-dark.css 스타일시트를 사용하는 JavaScript를 사용하는 Windows 스토어 앱은 앱 언어를 기반으로 본문 레이아웃 방향을 자동으로 설정합니다. 다음 CSS는 ui-light 및 ui-dark.css에 있으므로 개발자가 직접 작성할 필요가 없습니다.
body:-ms-lang(ar,he…) { direction: rtl;}
즉, 시스템에서 오른쪽에서 왼쪽으로 읽는 언어를 사용하는 경우 대부분의 앱 레이아웃이 올바르게 설정됩니다.
WinJS.UI 컨트롤과 마찬가지로 앱에서 :-ms-lang() 의사 클래스 선택기를 사용하여 물리적 CSS 속성(예: margin 및 padding)을 조정할 수 있습니다. after 및 before 같은 키워드를 사용하는 논리적 CSS 속성은 조정할 필요가 없습니다.
HTML에서는 align 속성 또는 특성을 사용하지 마세요. 대신 direction 속성을 사용하여 특정 구성 요소의 맞춤을 제어합니다.
CSS에서 가로 방향 텍스트 레이아웃을 지원하려면 writing-mode 속성을 사용합니다.
이미지 미러링
앱에 RTL에 대해 미러링해야 하는 이미지가 있는 경우 .mirrorable 클래스를 요소에 추가한 후 다음 CSS 클래스를 추가하여 렌더링할 때 CSS 변환을 사용하여 이미지를 미러링할 수 있습니다.
.mirrorable { transform: scaleX(-1); }
앱에서 이미지를 올바르게 대칭 이동하기 위해 다른 이미지가 필요한 경우 리소스 관리 시스템을 layoutdir 한정자와 함께 사용할 수 있습니다. 응용 프로그램 언어가 RTL 언어로 설정되어 있는 경우 file.layoutdir-rtl.png 이미지가 선택됩니다. 이 방법은 이미지의 한 부분만 대칭 이동되는 경우에 사용할 수 있습니다.
글꼴
ui-light.css 또는 ui-dark.css 스타일시트를 사용하는 JavaScript를 사용하는 Windows 스토어 앱은 앱 언어를 기반으로 가장 적절한 글꼴을 자동으로 설정합니다. 앱 호스트는 루트 요소의 lang 특성을 앱 언어로 설정합니다.
한 페이지에 여러 언어를 표시하는 앱은 각 언어의 섹션에 대해 lang 특성을 설정해야 합니다. :-ms-lang() 의사 클래스 선택기는 페이지의 각 섹션에 대해 올바른 글꼴을 선택합니다.
특정 언어에 대한 권장 글꼴 패밀리, 크기, 두께 및 스타일에 프로그래밍 방식으로 액세스하려면 LanguageFont 글꼴 매핑 API를 사용합니다. LanguageFont 개체를 사용하면 UI 헤더, 알림, 본문 텍스트, 사용자 편집 가능한 문서 본문 글꼴을 비롯하여 콘텐츠의 다양한 범주에 대한 올바른 글꼴 정보에 액세스할 수 있습니다.