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

Di Zhang
Di Zhang

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