writing-mode 속성 사용법

writing-mode 속성은
텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다.

CSS에서 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타내는데,
writing-mode 속성을 사용하면 일반적인 가로로 표시하는 텍스트를 세로로 표시하는 모드로 변경할 수 있습니다.

아래의 예시에 writing-mode: vertical-lr;를 사용해서 세로로 표시되는 제목이 있습니다.

실제 적용된 모습 텍스트를 드레그해 보면 세로로 표시하는 모드가 적용되어 있다는것을 쉽게 파악할 수 있습니다.
CSS 
h1 {
    writing-mode: vertical-lr;
}
HTML <h1>~<h6>(제목) 태그
HTML 
<h1>세로로 표시되는 제목</h1>

writing-mode 속성의 형식은 다음과 같습니다.

구문

CSS 
selector {
    writing-mode: /* value */
}

정의

writing-mode 속성의 정의
초깃값 horizontal-tb
적용 요소 테이블 행 그룹, 테이블 열 그룹, 테이블 행, 테이블 열, Ruby 기본 컨테이너, Ruby 주석 컨테이너를 제외한 모든 요소
상속 예
애니메이션 아니오

값

writing-mode 속성의 값
horizontal-tb 초깃값임.
블록 컨테이너의 표시 방향은 위에서 아래 입니다. 텍스트는 가로로 표시됩니다.
vertical-rl 블록 컨테이너의 표시 방향은 오른쪽에서 왼쪽입니다. 텍스트는 세로로 표시됩니다.
vertical-lr 블록 컨테이너의 표시 방향은 왼쪽에서 오른쪽입니다. 텍스트는 세로로 표시됩니다.
CSS writing-mode 속성 값 예시 
/* 키워드 값 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* 글로벌 값 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

vertical-rl과 vertical-lr 값 예제

다음의 데모 예제를 보면 텍스트를 세로로 표시하는 모드의 블록 컨테이너 표시 방향에 대해 더 명확히 이해할 수 있습니다.

예제에서는 제목과 단락을 포함하는 두 개의 블록 컨테이가 있습니다.

HTML 데모 
<div class="container">
    <h1>샘플 제목</h1>
    <p>텍스트를 세로로 표시하는 문단</p>
</div>

아래 CSS 데모 버튼을 클릭해서 제목과 단락을 감싸는 .container에 writing-mode 값으로 vertical-rl과 vertical-lr을 각각 적용해 보세요.

CSS 데모 데모 버튼을 클릭해 보세요!
블록 컨테이너의 표시 방향
  • vertical-lr의 경우 블록 컨테이너의 표시 방향은 왼쪽에서 오른쪽입니다.
  • vertical-rl의 경우 블록 컨테이너의 표시 방향은 오른쪽에서 왼쪽입니다.
블록 컨테이너의 시작 방향
  • vertical-lr의 경우 블록 컨테이너의 시작 방향은 왼쪽입니다. .container의 콘텐츠가 왼쪽 정렬됩니다.
  • vertical-rl의 경우 블록 컨테이너의 시작 방향은 오른쪽입니다. .container의 콘텐츠가 오른쪽 정렬됩니다.

writing-mode와 text-align 속성 같이 사용하기

writing-mode와 text-align 속성 같이 사용할 때 text-align 속성의 값이 어떻게 적용되는지를 알아보겠습니다.

CSS text-align 속성

다음의 데모는 writing-mode가 vertical-lr으로 설정되어 있는 제목 요소에 text-align 속성의 값을 적용한 예제입니다.

CSS 데모 데모 버튼을 클릭해 보세요!

text-align 속성은 텍스트 등 인라인(Inline) 콘텐츠 가로 정렬을 설정하는 속성입니다.

위 데모 예시를 보면 text-align 속성으로 정렬을 지정하면 가로 정렬이 설정되는 것이 아니라 세로 정렬되는 것을 알 수 있습니다. text-align: left;의 경우 왼쪽 정렬이 아니라 위쪽 정렬이 되고, text-align: right;의 경우에는 아래쪽 정렬이 됩니다.

이 데모 예제에서도 알 수 있듯이 writing-mode가 세로로 표시하는 모드일 경우 블록 컨테이너의 표시 방향은 가로로 인라인(Inline) 콘텐츠 방향은 세로로 모두 바뀝니다.

브라우저 호환성

writing-mode 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
writing-mode 48 12 41 10.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

writing-mode 속성의 명세서 사양
명세서 사양
writing-mode CSS Writing Modes Level 4
#block-flow

참고문헌

같이 보기