โหมดการเขียนแนวตั้ง CSS สำหรับองค์ประกอบการควบคุมแบบฟอร์ม

Di Zhang
Di Zhang

การเปิดตัวใน 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