text-orientation 속성의 이해

text-orientation 속성은
세로 쓰기 모드에서 텍스트 문자 방향을 설정합니다.

이 속성은 세로 쓰기 모드에서만 작동하며, 가로 쓰기 모드에는 영향을 주지 않습니다.
참고로, 세로 쓰기 모드는 writing-mode 속성으로 설정합니다. 즉, text-orientation 속성이 작동하려면, 해당 요소는 writing-mode: vertical-rl로 설정되어 있거나, writing-mode: vertical-lr로 설정되어 있어야 합니다.

데모

다음의 CSS 데모로 text-orientation 속성의 구현 방식에 대해 살펴보세요.

CSS 데모: text-orientation 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    text-orientation: mixed | upright | sideways
}

구문

CSS 
/* 키워드 값 */
text-orientation: mixed; /* 초깃값 */
text-orientation: upright;
text-orientation: sideways;

/* 전역 값 */
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

값

이 속성은 키워드 값을 사용하며, 그 의미는 다음과 같습니다.

mixed

이 속성의 초깃값입니다.

  • 아라비아 숫자와 대부분의 문자(특히 라틴 문자)는 가로 쓰기 표준 방향에서 시계 방향으로 90도 회전합니다.
  • CJK(Chinese - Japanese - Korean, 중국어·일본어·한국어)처럼 전통적으로 세로 쓰기를 사용하는 문자는 자연스러운 세로 방향으로 표시합니다.

upright

모든 문자를 회전하지 않고 세로 방향(upright)으로 표시합니다.

sideways

모든 문자를 가로 쓰기 표준 방향에서 시계 방향으로 90도 회전합니다.

예제

다음의 예제 CSS에 사용될 공통 HTML 코드입니다.

HTML 
<section>
    <h4>Heading</h4>
    <p>Text paragraph 123</p>
    <h4>제목</h4>
    <p>텍스트 문단 123</p>
    <h4>제목 Heading</h4>
    <p>텍스트 paragraph 123</p>
</section>

text-orientation: mixed

CSS 
section {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
실제 적용된 모습

text-orientation: upright

CSS 
section {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
실제 적용된 모습

text-orientation: sideways

CSS 
section {
    writing-mode: vertical-rl;
    text-orientation: sideways;
}
실제 적용된 모습

형식 정의

text-orientation 속성의 형식 정의
초깃값 mixed
적용 요소 table row groups, rows, column groups, and columns을 제외한 모든 요소
상속 예
애니메이션 아니오

브라우저 호환성

text-orientation 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-orientation 48 79 41 14

명세서

text-orientation 속성의 명세서 사양
명세서 사양
text-orientation CSS Writing Modes Level 4
#text-orientation

같이 보기