CSS 텍스트-오리엔테이션 속성

정의와 사용법

text-orientation 속성은 문자의 방향을 지정합니다.

주의:다음 경우에만 writing-mode 수직으로 설정된 경우에만 유효합니다.

다른 <div> 요소에 텍스트 방향을 설정합니다:

div.a {
  text-orientation: mixed;
}
div.b {
  text-orientation: upright;
}

text-orientation 속성은 테이블 헤더의 방향을 변경할 수 있습니다:

th {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit;

값	설명
mixed	기본 값. 문자는 시계 방향으로 90도 회전합니다.
upright	문자는 회전하지 않고 직립됩니다.
sideways	문자의 방향은 writing-mode가 수직일 때 텍스트 행의 방향과 같습니다. 즉, 시계 방향으로 90도 회전합니다.
sideways-right	sideways 속성 값과 동일합니다. 호환성 목적으로 유지됩니다.
use-glyph-orientation	SVG 요소에 사용되어, 텍스트가 버전이 퇴출된 SVG 속성 glyph-orientation-vertical과 glyph-orientation-horizontal을 상속합니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit	부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기본 값:	mixed
상속성:	yes
애니메이션 제작:	지원하지 않습니다. 참조:애니메이션 관련 속성。
버전:	CSS3
JavaScript 문법:	object.style.textOrientation="upright"

표格에 표시된 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬	에지	파이어폭스	사파리	오페라
48.0	79.0	41.0	14.0	35.0