writing mode 와 4 대 문자 시스템

서문에

writing-mode 는 강력한 CSS 속성으로, 문자를 세로로 배열할 수 있습니다 (실제로는 무엇이든 세로로 배열할 수 있습니다. 기본 레이아웃 플로우를 변경할 수 있기 때문). 예를 들어:

小池

泉眼无声惜细流
树阴照水爱晴柔
小荷才露尖尖角
早有蜻蜓立上头

Demo 참조:http://ayqy.net/temp/writing-mode.html

중요한 역할을 하는 CSS 규칙:

/* 竖直 - 从右向左 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;

writing-mode 를 기본 horizontal top-to-bottom mode 에서 vertical right-to-left mode 로 변경합니다. 언뜻 보면 특수 문자 조판 장면 외에는 쓸모가 없어 보이지만, 실제로는 훨씬 강력하며, html 요소에 이 규칙을 적용하면 페이지 전체가 오른쪽에서 왼쪽으로 세로 모드 전환되며, 스크롤 방향, 드롭다운 리스트 방향 등도 영향을 받습니다

강력하지만, 왜 이 것을 이해해야 할까요?

세계의 언어는 다양하며, 영어, 중국어 등의 가로 외에도 아랍어, 히브리어 등의 세로도 있으며, 일부 장면 (예: 다국어 혼용) 에서는 양방향 배열 (bidi) 이 필요합니다
writing-mode 는 "CSS 세계의 세로 가로 규칙을 변경할 수 있으며, 가장 역천적인 CSS 속성이라고 할 수 있다", "이론적으로, writing-mode 가 있으면 이전보다 50% 더 많은 일을 할 수 있다". 이는 무한한 창조력을 가진 속성으로, 기�� 것뿐만 아니라 미래의 것도 영향을 받습니다. 예를 들어 margin-start/end
Flexbox 와 CSS Grid 이해에 도움이 됩니다

一.속성 값 및 호환성

현재 (2017-1-21) 초안 에 따르면, 속성 선택 값은 다음과 같습니다:

/* 默认 horizontal-tb */
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

기본은 horizontal-tb 가로에서 위에서 아래로 배열이며, CSS 에서 가장 기본적인 규칙입니다. 요소는 왼쪽에서 오른쪽으로, 위에서 아래로 순서대로 배열됩니다. vertical-rl/lr 은 각각 세로에서 오른쪽에서 왼쪽으로 배열, 세로에서 왼쪽에서 오른쪽으로 배열을 나타냅니다. 나머지 2 개는 있는지 없는지 모르겠습니다:

This value is at-risk and may be dropped during CR.
sideways-rl: 세로에서 오른쪽에서 왼쪽으로 배열, 단 인쇄 방식 (typographic mode) 은 가로
sideways-lr: 세로에서 왼쪽에서 오른쪽으로 배열, 단 인쇄 방식은 가로

writing-mode 속성은 아직 초안 단계이지만, IE 가 일찍 이 것을 제안했고, 나중에 다른 브라우저가 뒤따랐으며, 현재 호환성은 매우 좋습니다:

sideways-rl | sideways-lr 현재는 지원 없음
horizontal-tb | vertical-rl | vertical-lr 널리 지원, Android[3+], iOS[5.1+], 모두 -webkit-필요
IE[6-10] 은 구 버전 값만 지원: lr-tb | rl-tb | tb-rl | tb-lr, 그 중 위 3 개 널리 지원되는 것에 대응하는 것은 lr-tb | tb-rl | tb-lr

모바일은 프리픽스 붙여 안심하고 사용 가능. 호환성에 대한 상세한 정보는 Can I use writing-mode ? 참조

P.S.IE 구 버전 값은 CSS3 Text Module W3C Candidate Recommendation 14 May 2003 참조

二.인라인 방향, 블록 방향 및 문자 방향

인라인 방향: 기본 writing-mode 에서, 블록은 페이지 상단에서 세로로 배열

인라인 방향은 텍스트 플로우의 각 행의 배열 방향을 가리키며, 기본은 왼쪽에서 오른쪽으로 배열이며, 타자기 효과를 상상하면, 문자가 하나씩 나오는 것이 인라인 방향입니다

문자 방향은 문자가 어느 쪽을 가리키는지 말하며, 큰 A 를 입력하면 (이 가리킴은 너무 명확하여 화살표 같음), 문자는 페이지 상단을 가리키지만, 다른 언어는 다른 방향을 가리킵니다

[caption id="attachment_1295" align="alignnone" width="625"] three concepts[/caption]

그림에서, 블록 방향은 위에서 아래로, 인라인 방향은 왼쪽에서 오른쪽으로, 문자 방향은 페이지 상단을 가리킵니다

三.4 대 문자 시스템

CSS Writing Mode 는 설계상 4 대 주요 문자 시스템을 충족합니다: 라틴 문자, 아랍 문자, 한자 및 몽골 문자

1. 라틴 문자 시스템

세계 최대의 문자 시스템으로, 70% 의 사람이 이를 사용합니다. 문자는 왼쪽에서 오른쪽으로 배열되며, 블록 방향은 위에서 아래로 (위 그림 참조)

라틴 문자 시스템은 매우 크며, 라틴 문자를 사용하는 모든 다른 언어를 포함합니다. 예를 들어 영어, 스페인어, 독일어, 프랑스어 등. 또한, 라틴 문자를 사용하지 않는 많은 언어도 라틴 문자 시스템에 속하며, 그리스 문자, 키릴 (Cyrillic) 문자를 사용하는 것을 포함합니다. 예를 들어 러시아어, 우크라이나어, 불가리아어, 세르비아어 등, 및 브라흐미계 문자 (Brahmic scripts), 예를 들어 산스크리트어, 태국어, 티베트어 등

이 모드를 트리거하기 위해 CSS 를 사용할 필요는 없습니다. 기본이 이렇게 되어 있습니다. 그러나 언어와 배열 방향을 선언하는 것이 좋습니다. 예를 들어:

<html lang='en-gb' dir='ltr'>

브라우저에 내용이 영국판 영어이며, 왼쪽에서 오른쪽으로 배열됨을 알립니다

2. 아랍 문자 시스템

아랍어, 히브리어는 인라인 방향이 오른쪽에서 왼쪽인 소수로, RTL 이라고 합니다

인라인 방향은 여전히 가로이며, 블록 방향은 위에서 아래로, 문자 방향은 위쪽입니다:

[caption id="attachment_1296" align="alignnone" width="625"] arabic system[/caption]

텍스트 플로우가 오른쪽에서 왼쪽일 뿐만 아니라, 레이아웃 관련의 모든 것이 오른쪽에서 왼쪽이며, 오른쪽 상단에서 시작하여, 눈은 오른쪽에서 왼쪽으로 열람하므로, 일반적으로 RTL 사이트의 레이아웃은 LTR 과 유사하며, 수평으로 뒤집기만 합니다

RTL 하의 CSS 레이아웃

일반적으로 RTL 을 지원하려면 많은 준비 작업이 필요합니다. 예를 들어 모든 margin-left/right, padding-left/right, float: left/right 를 찾고, 표시를 하고, 좌우를 반대로 하는 스타일시트를 하나 더 만듭니다. 이 작업은 지루하고 오류가 발생하기 쉬우며, CSS 는 레이아웃 코드를 한 번만 쓰고, 간단한 명령으로 언어 방향을 쉽게 전환할 수 있는 방식을 제공해야 합니다

새로운 CSS 레이아웃 시스템은 이를 하고 있습니다. Flexbox, Grid 및 Alignment 는 start 와 end 를 사용하여 left 와 right 를 대체합니다. 이렇게 하면 문자 시스템을 기반으로 레이아웃을 정의할 수 있으며, 방향을 쉽게 전환할 수 있습니다. 예를 들어 justify-content: flex-start; justify-items: end; margin-inline-start: 1rem 은 더 이상 움직일 필요가 없습니다. 이 방식이 더 좋으며, start 와 end 로 left 와 right 를 대체하는 것은 혼란스럽지만, 다국어 프로젝트에 유익하며, web 대 환경에도 유익합니다

따라서 인라인 방향, 블록 방향을 이해하고, start 와 end 를 사용하는 데 약간의 시간을 들이면, 곧 익숙해집니다

방향 선언 방법

HTML 에서 방향을 선언해야 하며, CSS 내부가 아닙니다. 이렇게 하면 CSS 로드가 완료되지 않아도, 브라우저는 내용을 올바르게 표시할 수 있습니다. 주로 html 요소를 통해 완료하며, 동시에 언어도 선언해야 합니다. 예를 들어:

<html lang='ar' dir='rtl'>

페이지 내용이 아랍어이며, RTL 레이아웃을 사용함을 나타냅니다

라틴 문자 시스템이든 아랍 문자 시스템이든, writing-mode 속성은 같은 것을 사용해야 합니다:

writing-mode: horizontal-tb;

인라인 텍스트 플로우는 모두 가로이며, 블록 방향도 모두 위에서 아래로이며, CSS 로 나타내면 horizontal-tb 이며, 기본 writing-mode 이므로, 수동으로 선언할 필요는 없습니다. 다른 것을 오버라이드하고 싶거나 더 높은 캐스케이드 우선권을 원할 경우를 제외합니다. 따라서 이전에 만든 모든 페이지에 한 줄이 있다고 상상할 수 있습니다:

html {
    writing-mode: horizontal-tb;
}

3. 한자 시스템

한자 시스템은 CJK 언어를 포함하며, 중국어, 일본어, 한국어 등이며, 두 가지 레이아웃 방식이 있으며, 때때로 함께 나타납니다

많은 CJK 문자 레이아웃은 라틴 언어와 같으며, 블록 방향은 위에서 아래로, 인라인 방향은 왼쪽에서 오른쪽입니다. 레이아웃에 필요한 CSS 는 위와 같습니다:

section {
    writing-mode: horizontal-tb;
}

또는 아무것도 쓰지 않아도, 기본이 이렇게 되어 있습니다

또한, 한자 시스템은 세로로 배열할 수도 있으며, 인라인 방향은 세로이며, 블록 방향은 오른쪽에서 왼쪽입니다. 그림과 같습니다:

[caption id="attachment_1297" align="alignnone" width="625"] han system[/caption]

가로 텍스트 플로우는 왼쪽에서 오른쪽으로, 세로 텍스트 플로우는 오른쪽에서 왼쪽으로임에 주의

페이지 전체의 기본 설정은 장면에 의존하지만, 각 요소, 각 행의 제목, 각 섹션, 각 기사는 기본과 반대로 설정할 수 있습니다. 예를 들어, 기본 설정을 horizontal-tb 로 하고, 세로 요소에 설정:

div.articletext {
    writing-mode: vertical-rl;
}

또는 페이지 기본을 세로 배열로 설정하고, 일부 요소에 horizontal-tb 를 설정:

html { 
    writing-mode: vertical-rl;
}
h2, .photocaptions, section {
    writing-mode: horizontal-tb;
}

페이지에 가로 스크롤이 있는 경우, writing-mode 는 페이지 레이아웃을 왼쪽 상단에서 시작하여 오른쪽으로 스크롤 (horizontal-tb), 또는 페이지 레이아웃을 오른쪽 상단에서 시작하여 왼쪽으로 스크롤하여 넘친 부분 표시

writing-mode 를 전환하는 예가 있습니다: 문자의 이야기, 흥미로운 것은전환이 셀렉터를 통해 구현되었다는 것입니다 (일상적으로 음란하게 코드를扒ぐ):

.c-switcher:not(:checked)~main figure {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.c-switcher:checked~main figure {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

4. 몽골 문자 시스템

몽골 문자도 세로 문자 언어이며, 텍스트는 페이지에서 세로로 배열되며, 한자 시스템과 같습니다. 2 가지 주요 차이가 있습니다

먼저 블록 방향이 다르며, 몽골 문자 블록 요소는 왼쪽에서 오른쪽으로 배열됩니다. 블록 방향은 화면 왼쪽에서 시작하여 오른쪽으로 배열. 인라인 방향은 위에서 아래로, RTL 텍스트와 매우 유사하며, 이 페이지를 반시계 방향으로 90 도 회전한 모습을 상상합니다.

또 다른 차이는, 문자 방향이 상하 반대이며, 몽골 문자의 상단은 왼쪽을 가리키는 것이 아니라 (블록 방향의 시작 변을 가리킴), 오른쪽을 가리킵니다. 그림과 같습니다:

[caption id="attachment_1298" align="alignnone" width="625"] mongolian system[/caption]

writing-mode: vertical-lr 은 이 상황을 처리하기 위한 것으로, 몽골 문자를 위해量身定做된 것이므로, writing-mode: vertical-lr 의 실제 효과는 상상과 다를 수 있습니다:

[caption id="attachment_1299" align="alignnone" width="625"] vertical actual[/caption]

vertical-rl 은 확실히 페이지를 시계 방향으로 90 도 회전한 결과이며, vertical-lr 은 반시계 방향으로 90 도 회전한 후, 다시 문자 방향을 반전합니다. 속성 값의 의미는 문자 시스템 표현에 따라 정의되며, 글자 면 그대로가 아닙니다

예외 상황도 있으며, writing-mode: vertical-rl/lr 에서, 라틴 문자는 모두 시계 방향으로 회전하며, writing-mode 는 반시계 방향으로 회전할 수 없습니다

몽골 문자 내용을 조판하는 경우, CSS 적용 방식은 한자 시스템과 같으며, html 요소에서 페이지 전체를 설정하거나, 지정 요소를 선언:

section {
    writing-mode: vertical-lr;
}

writing-mode 를 가로 언어가 아닌平面设计 효과에 사용하는 경우, writing-mode: vertical-lr 은 쓸모가 없을 수 있습니다. 텍스트가 개행되면, 배열 방식이 매우 이상해집니다. 따라서 vertical-rl 을 자주 사용하고, vertical-lr 은 잘 사용하지 않을 수 있습니다

四.Writing Mode 와平面设计

그렇다면 어떻게 writing-mode 를 사용하여 영어 제목 행을横向으로 할 수 있을까요? transform: rotate() 로搞定할 수 있습니다 (vertical-rl/lr 은 문자 방향을 반전하므로, vertical-rl + rotate 로 모의 필요)

/* 顺时针旋转 90 度效果 */
h1 {
    writing-mode: vertical-rl;
}

/* 逆时针旋转 90 度效果 */
h1 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: right;
}

여기서 writing-mode: vertical-lr 을 사용하지 않는 것은, 앞에서 언급한 개행 시 텍스트 배열이 매우 이상해지기 때문입니다 (실제로 테스트하여 이상한 곳을 발견하지 못했고, 무엇을 가리키는지 모름). 따라서 vertical-rl + rotate 로 구현하며, text-align: right; 는 텍스트를 컨테이너 상단에 붙이기 위한 것으로, 여기서는 vertical-rl 에 대한 것으로, hack 算是합니다

또한, text-orientation: upright; 와 함께하여 문자 방향을 위쪽으로 유지할 수 있습니다

이렇게 하면 섹션 제목을 사이드에 세로로 배열할 수 있으며, 독서 체험은 "아마도" 더 좋아질 수 있습니다

五.Writing Mode 테크닉

Writing Mode 를 활용하여 가로 규칙을 세로로 옮겨, 예를 들어 margin: auto 0; 로 세로 중앙 정렬 구현:

/* 容器 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* 要素 */
height: 100px;
margin: auto 0;

또는 더 난폭하게:

/* 容器 */
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-align: center;
/* 要素 */
display: inline-block;
text-align: left;

그러나, transfrom 이 있는 시대에, 일부 테크닉은 그다지 실용적이지 않습니다. 예를 들어:

세로 text-indent 로 버튼 누를 때 문자 침하 구현
세로 iconfont 로 펼치기/접기 화살표 구현

text-indent 는 다자 경우에 개행하며, 세로 폰트는 시계 방향으로만 회전할 수 있고, 반시계 방향으로 회전할 수 없습니다

transform 이 없다면, writing-mode 는 레이아웃 효과에서大放光彩합니다. 예를 들어 [IE6+] 환경에서, writing-mode 는 마법과 같습니다

그러나, writing-mode 는 확실히 50% 의 가능성을 증가시켰으며, 또 하나의 문입니다

서문에