Chrome 119부터 123까지는 CSS 쓰기 모드 레벨 4에 도입된 새로운 국제 CSS 기능입니다. 양식 컨트롤 요소의 세로 쓰기 모드는 이러한 요소를 세로 쓰기 모드로 표시할 수 있음을 의미합니다. Chrome 123부터 모든 사용자가 이 기능을 사용할 수 있게 되며 이 게시물에서는 이 기능을 설명합니다.
텍스트 기반 양식 컨트롤 요소의 세로 쓰기 모드
이 기능이 완전히 사용 설정되면 버튼, 선택 목록, 진행률 요소와 같은 양식 컨트롤 요소에 세로 쓰기 모드를 사용할 수 있습니다. 이 기능을 사용하려면 왼쪽에서 오른쪽 블록 흐름 방향의 경우 CSS 속성 쓰기 모드를 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에서 문제를 신고하세요.