ฟีเจอร์ CSS ใหม่ 4 รายการสำหรับภาษาต่างประเทศจาก CSS Text Module ระดับ 4 กำลังจะเปิดตัวใน Chrome โพสต์นี้จะอธิบายสิ่งที่จัดส่งไปแล้วและสิ่งที่กำลังจะเปิดตัวเร็วๆ นี้
- จาก Chrome 119: การแบ่งบรรทัดของวลีภาษาญี่ปุ่นด้วย
word-break: auto-phrase
- เบื้องหลัง Flag จาก Chrome 120: ระยะห่างระหว่างสคริปต์ด้วยพร็อพเพอร์ตี้
text-autospace
- อยู่ระหว่างการพัฒนา: การแยกระยะเครื่องหมายวรรคตอนของภาษาจีน ญี่ปุ่น และเกาหลี (CJK) ด้วยพร็อพเพอร์ตี้
text-spacing-trim
- ขนาดแบบอักษรขั้นต่ำที่สอดคล้องกันในทุกภาษา
การแบ่งบรรทัดของวลีภาษาญี่ปุ่น: word-break: auto-phrase
ฟีเจอร์นี้ช่วยปรับปรุงความอ่านง่ายของข้อความภาษาญี่ปุ่น และพร้อมให้ใช้งานใน Chrome 119
ภาษาเอเชียตะวันออกบางภาษา เช่น จีนหรือญี่ปุ่น จะไม่ใช้การเว้นวรรคเพื่อแยกคำ และบรรทัดจะตัดขึ้นบรรทัดใหม่ได้ทุกอักขระ แม้ว่าจะอยู่กลางคำก็ตาม นี่เป็นลักษณะการแบ่งบรรทัดปกติของภาษาเหล่านี้ แต่สำหรับข้อความสั้นๆ เช่น หัวเรื่องหรือบทกวี เราขอแนะนำให้แบ่งบรรทัดตรงขอบเขตของวลีตามปกติ (ในภาษาญี่ปุ่น ขอบเขตนี้เรียกว่า "Bunsetsu")
ฟีเจอร์ CSS ใหม่ word-break: auto-phrase
ระบุว่าการขึ้นบรรทัดใหม่ควรเกิดขึ้นที่ขอบเขตดังกล่าว
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>

word-break: auto-phrase
ตัดบรรทัดตรงขอบวลีที่เป็นธรรมชาติ
การตรวจหาขอบเขตจะดำเนินการโดยเครื่องมือแมชชีนเลิร์นนิง จึงอาจให้ผลลัพธ์ไม่ตรงกับที่คุณตั้งใจไว้ ในกรณีนี้ คุณสามารถปรับจุดพักโฆษณาด้วยตนเองได้ แท็ก <wbr>
หรือการเว้นวรรคที่มีความกว้างเป็นศูนย์ (​
) จะบังคับให้แบ่งบรรทัด และตัวเชื่อมที่มีความกว้างเป็นศูนย์ (‍
) จะป้องกันไม่ให้แบ่งบรรทัด
窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース
ปัจจุบัน Chrome รองรับฟีเจอร์นี้สำหรับภาษาญี่ปุ่นเท่านั้นโดยใช้พอร์ต BudouX C++ ที่ใช้เทคโนโลยี ML ของ AdaBoost อ่านเพิ่มเติมได้ใน Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器
เราวางแผนที่จะรองรับภาษาเกาหลีและจีนใน Chrome เวอร์ชันในอนาคต
ระยะห่างระหว่างสคริปต์: text-autospace
ขณะนี้ฟีเจอร์ต่อไปนี้อยู่เบื้องหลัง Flag ใน Chrome หากต้องการทดสอบ ให้เปิดใช้ Flag ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง (ดูได้ที่ chrome://flags/#enable-experimental-web-platform-features
) ใน Chrome 120 ขึ้นไป
ภาษาจีนและญี่ปุ่นใช้อักขระหลายแบบผสมกัน ได้แก่ อักขระฮั่น ละติน และตัวเลข ASCII รวมถึงฮิรางานะและคาตาคานะสำหรับภาษาญี่ปุ่น การเว้นวรรคเล็กน้อยเมื่อสลับจากและไปยังอักษรรูปภาพแบบไม่ใช้อักษรฮั่นมักจะช่วยให้อ่านได้ง่ายขึ้น
Chrome กำลังวางแผนที่จะเริ่มแทรกการเว้นวรรคระหว่างสคริปต์โดยค่าเริ่มต้น ฟีเจอร์นี้นำแนวทางปฏิบัติทั่วไปที่ใช้กันอย่างแพร่หลายในสื่อสิ่งพิมพ์เพื่อปรับปรุงความง่ายในการอ่านมาสู่เว็บ

text-autospace
หากต้องการปิดใช้ลักษณะการทำงานนี้ พร็อพเพอร์ตี้ text-autospace
จะช่วยให้คุณควบคุมการแทรกการเว้นวรรคได้
text-autospace: no-autospace;
การแยกเครื่องหมายวรรคตอน CJK: text-spacing-trim
ฟีเจอร์ต่อไปนี้อยู่ระหว่างการพัฒนา โดยมีเป้าหมายที่จะเปิดใช้ใน Chrome โดยค่าเริ่มต้น
ในภาษาจีน ญี่ปุ่น และเกาหลี การใช้การแยกอักขระระหว่างเครื่องหมายวรรคตอนจะช่วยปรับปรุงความง่ายในการอ่านและทำให้แบบอักษรดูน่าดึงดูดยิ่งขึ้น สื่อสิ่งพิมพ์และโปรแกรมประมวลผลคำส่วนใหญ่ใช้การเว้นวรรคนี้ในปัจจุบัน
ตัวอย่างเช่น เครื่องหมายวรรคตอน CJK และวงเล็บปิด CJK มักจะออกแบบให้มีระยะห่างภายในแบบอักษรในส่วนครึ่งขวาของระยะห่างแบบอักษร เพื่อให้แต่ละอักขระมีการเลื่อนไปข้างหน้าอย่างสม่ำเสมอ
แต่เมื่อเครื่องหมายวรรคตอนเหล่านี้ปรากฏเป็นแถว ระยะห่างภายในอักขระก็จะมากเกินไป ในตัวอย่าง 2 รายการต่อไปนี้ ตัวอย่างที่ 2 เป็นการจัดรูปแบบที่ถูกต้อง คุณควรนำเครื่องหมายวรรคตอน CJK ครึ่งขวาออก

ลักษณะการทำงานเริ่มต้นจะให้ผลลัพธ์ที่ดีโดยทั่วไป แต่นักพัฒนาซอฟต์แวร์สามารถใช้พร็อพเพอร์ตี้ text-spacing-trim เพื่อเลือกรูปแบบอื่นหรือปิดใช้ในบางกรณี
ขนาดแบบอักษรขั้นต่ำที่สอดคล้องกันในทุกภาษา
ก่อน Chrome 118 ระบบจะไม่แสดงผลแบบอักษรที่มีขนาดน้อยกว่า 10 พิกเซลตามที่ระบุ แต่ระบบจะปัดเศษขึ้นหากเป็นภาษาอาหรับ เปอร์เซีย ญี่ปุ่น เกาหลี ไทย จีนตัวย่อ หรือจีนตัวเต็ม นักพัฒนาซอฟต์แวร์ต้องใช้วิธีแก้ปัญหาชั่วคราวเพื่อแสดงผลข้อความขนาดเล็ก เช่น โดยใช้พร็อพเพอร์ตี้ transform
ตั้งแต่ Chrome 118 เป็นต้นไป เราจะยกเลิกขีดจำกัดนี้สำหรับทุกภาษา ทำให้ทั้ง 7 ภาษามีขีดจำกัดเดียวกันกับภาษาอื่นๆ การเปลี่ยนแปลงนี้ช่วยปรับปรุงความสามารถในการทำงานร่วมกันกับเบราว์เซอร์อื่นๆ

มีส่วนร่วมและแชร์ความคิดเห็น
หากมีความคิดเห็นเกี่ยวกับฟีเจอร์เหล่านี้ โปรดรายงานปัญหาที่ crbug.com