การเปิดตัวจาก 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>
ทํา
ก่อนหน้านี้มีเพียง <range>
เท่านั้นที่แสดงผลในแนวตั้งได้โดยใช้ค่าลักษณะที่ปรากฏของ CSS slider-vertical
ที่ไม่เป็นไปตามมาตรฐาน ตอนนี้ทั้ง 3 รายการจะแสดงในแนวตั้งได้โดยใช้พร็อพเพอร์ตี้ 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