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