Chrome 119에서 123으로 출시되는 것은 CSS의 새로운 국제 CSS 기능입니다. 쓰기 모드 레벨 4 카테고리 양식 컨트롤 요소의 쓰기 모드는 이러한 요소가 세로 쓰기 모드로 표시됩니다. 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를 사용하여 <range>만 세로로 렌더링할 수 있었습니다.
모양 값이 slider-vertical입니다. 이제 세 가지 요소를 모두 수직으로
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.