Chrome 119에서 123으로 출시되는 새로운 국제 CSS 기능은 CSS 쓰기 모드 4단계에 포함되어 있습니다. 양식 컨트롤 요소의 세로 쓰기 모드는 이러한 요소를 세로 쓰기 모드로 표시할 수 있다는 것을 의미합니다. Chrome 123부터 이 기능이 모든 사용자에게 사용 설정됩니다. 이 게시물에서는 이 기능을 설명합니다.
텍스트 기반 양식 컨트롤 요소의 세로 쓰기 모드
이 기능이 완전히 사용 설정되면 버튼, 선택 목록, 진행률 요소와 같은 양식 컨트롤 요소에 세로 쓰기 모드를 사용할 수 있습니다. 이를 사용하려면 CSS 속성 writing-mode를 왼쪽에서 오른쪽 블록 흐름 방향의 경우 vertical-lr로, 오른쪽에서 왼쪽 블록 흐름 방향의 경우 vertical-rl로 설정합니다.
이는 전통적으로 쓰기에 세로 스크립트를 사용해 온 많은 동아시아 언어에 유용합니다. 예를 들어 전통 일본어는 오른쪽에서 왼쪽으로 세로로 쓰는 경우가 많습니다.
다음은 세로 양식 컨트롤의 다국어화된 예입니다.
버튼
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> 요소
<select> 요소가 모든 텍스트를 세로로 표시하도록 지정할 수 있습니다.
select {
writing-mode: vertical-lr;
}
<select multiple>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
<select>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
현재 구현에서는 여전히 팝업 창의 옵션이 가로로 표시됩니다.
텍스트 기반 입력
이제 대부분의 텍스트 입력 기반 양식 컨트롤에서 텍스트를 입력할 때 세로 쓰기 모드를 사용할 수 있습니다.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
슬라이더
양식 요소의 값을 시각적으로 표시하는 것도 유용할 수 있습니다. <meter>, <progress>, <input type=range>와 같은 슬라이더가 하는 역할이 바로 이것입니다.
이전에는 비표준 CSS 모양 값 slider-vertical를 사용하여 <range>만 세로로 렌더링할 수 있었습니다. 이제 CSS writing-mode 속성을 사용하여 세 개 모두 세로로 표시할 수 있습니다.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
기본적으로 CSS 방향은 ltr로 설정됩니다. 즉, 값이 위에서 아래로 렌더링됩니다. 방향을 rtl로 설정하여 값의 방향을 아래에서 위로 지정할 수 있습니다.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Chrome 122에서는 값 방향을 변경하는 실험이 진행 중입니다. 의견이 있으면 알려주세요.
참여 및 의견 공유
이러한 기능에 관한 의견을 공유하려면 crbug.com에서 문제를 제출하세요.