Writing Mode

 

CSS 작성 모드 모듈은 국제 작성 모드를 정의합니다. 이 중에는 왼쪽에서 오른쪽으로 쓰는 방법(라틴 및 인디아 scripts에서 사용), 오른쪽에서 왼쪽으로 쓰는 방법(히브리어나 아랍어 scripts에서 사용), 양방향(왼쪽에서 오른쪽과 오른쪽에서 왼쪽 scripts을 혼합할 때 사용) 및 수직(일부 아시아 scripts에서 사용)방향 작성 방법이 있습니다.

 

 

writing-mode

 

writing-mode CSS 속성은 텍스트가 가로로 표시되는지, 세로로 표시되는지, 그리고 블록이 쌓이는 방향을 설정합니다. 문서 전체에 적용하려면 루트 요소(HTML 요소는 HTML 문서에서)에 적용해야 합니다.

 

이 속성은 블록의 흐름 방향을 지정하며, 블록 수준 컨테이너가 쌓이는 방향과 블록 내에서 인라인 수준 콘텐츠가 흐르는 방향과 블록의 순서를 결정합니다.

 

 

속성 값

글 방향 속성 값은 아래 목록에서 선택됩니다. 가로 문자열의 방향은 해당 스크립트가 좌에서 우(ltr,예:영어와 대부분의 언어) 또는 우에서 좌(rtl,예:히브리어나 아라비아어)로 표시되는 방향에 따라 영향을 받습니다.

 

horizontal-tb : 왼쪽에서 오른쪽, 위(t)에서 아래로(b)

ltr 스크립트의 경우, 왼쪽에서 오른쪽으로 콘텐츠가 작성됩니다. rtl 스크립트의 경우, 오른쪽에서 왼쪽으로 콘텐츠가 작성됩니다. 다음 줄은 이전 줄 하단에 작성합니다.

vertical-rl : 위에서 아래, 오른쪽(r)에서 왼쪽(l)

ltr 스크립트의 경우, 위에서 아래로 콘텐츠가 작성되고 다음 줄은 이전 줄의 왼쪽에 위치합니다.  rtl 스크립트의 경우, 아래에서 위로 콘텐츠가 작성되고 다음 수직선은 이전 줄의 오른쪽에 위치합니다.

vertical-lr: 위에서 아래, 왼쪽(l)에서 오른쪽(r)

ltr 스크립트의 경우, 컨텐츠가 위에서 아래로 수직으로 작성되며, 다음 수직 라인은 이전 줄의 오른쪽에 위치합니다.  rtl 스크립트의 경우, 컨텐츠가 아래에서 위로 수직으로 작성되고, 다음 수직 라인은 이전 줄의 왼쪽에 위치합니다.

 

 

Writing Mode Example

 

 

 

- 수직으로 쓰는 언어의 표시 제어 -

 

text-orientation

text-orientation CSS 속성은 줄 내 텍스트 문자의 방향을 제어합니다. 수직 모드의 텍스트에만 영향을 미칩니다. 수직으로 쓰는 언어의 표시를 제어하는 데 유용하며, 수직 테이블 헤더를 만드는 데도 사용가능합니다.

 

 

속성 값

 

mixed

수평 문자열의 문자를 시계 방향으로 90° 회전합니다. 수직 문자열의 문자는 자연스럽게 배치됩니다. 기본값입니다.

upright

수평 문자열의 문자를 자연스럽게(수직으로) 배치하며, 수직 문자열의 글리프도 포함합니다. 이 키워드는 모든 문자를 왼쪽에서 오른쪽으로 강제로 표시하기 때문에, 방향설정에서 사용된 값은 ltr이 되도록 강제됩니다.

sideways

문자를 수평으로 배치하지만 전체 줄을 시계 방향으로 90° 회전시켜 세로로 문자를 배치합니다.

sideways-right

호환성 유지를 위해 사용되는 별칭입니다.

use-glyph-orientation

SVG 요소에서, 이 키워드는 폐지된 SVG 속성인 glyph-orientation-vertical과 glyph-orientation-horizontal의 값을 사용하도록 합니다.

 

 

[text-orientation Mode Example]

 

text-combine-upright

text-combine-upright CSS 속성은 문자 조합을 하나의 문자 공간에 넣습니다. 조합된 텍스트가 1em보다 넓으면 사용자 에이전트는 내용을 1em 내에 맞춰야합니다. 결과적으로 구성 요소는 레이아웃 및 장식을 위한 하나의 정자 글리프로 처리됩니다. 이 속성은 수직 작성 모드에서만 효과가 있습니다.

이 속성은 일본어로는 tate-chū-yoko(縦中横)로, 중국어로는 橫向文字로 알려진 효과를 생성하는 데 사용됩니다.

 

 

속성 값

 

none
특별한 처리는 없습니다.

all

빈 상자 안에 연속된 모든 문자를 수직선 내에서 하나의 문자 공간을 차지하도록 수평으로 조판하는 시도입니다.

 

 

[text-combine-upright : all]