LayoutNG

LayoutNG เป็นเครื่องมือจัดวางรูปแบบใหม่ที่กำลังจะเปิดตัวใน Chrome 76 โดยเราพัฒนาเครื่องมือนี้มาเป็นเวลาหลายปี มีการปรับปรุงที่น่าสนใจหลายอย่างในทันที และเราจะเพิ่มประสิทธิภาพและฟีเจอร์เลย์เอาต์ขั้นสูงเพิ่มเติมในอนาคต

มีอะไรใหม่

1. ปรับปรุงการแยกประสิทธิภาพ
2. การรองรับที่ดีขึ้นสำหรับสคริปต์ที่ไม่ใช่ละติน
3. แก้ไขปัญหาต่างๆ เกี่ยวกับลอยและระยะขอบ
4. แก้ไขปัญหาความเข้ากันได้ของเว็บจํานวนมาก

โปรดทราบว่า LayoutNG จะเปิดตัวเป็นระยะ ใน Chrome 76 ระบบจะใช้ LayoutNG สำหรับเลย์เอาต์ในบรรทัดและคําสั่ง องค์ประกอบพื้นฐานอื่นๆ ของเลย์เอาต์ (เช่น ตาราง Flexbox ตารางกริด และการแยกบล็อก) จะถูกแทนที่ในรุ่นต่อๆ ไป

การเปลี่ยนแปลงที่นักพัฒนาแอปมองเห็น

แม้ว่าผลกระทบที่ผู้ใช้มองเห็นควรมีน้อยมาก แต่ LayoutNG จะเปลี่ยนลักษณะการทํางานบางอย่างในลักษณะที่แทบมองไม่เห็น แก้ไขการทดสอบหลายร้อยรายการ และปรับปรุงความเข้ากันได้กับเบราว์เซอร์อื่นๆ แม้ว่าเราจะพยายามอย่างสุดความสามารถแล้ว แต่ก็มีแนวโน้มว่าการดำเนินการนี้จะทำให้บางเว็บไซต์และแอปพลิเคชันแสดงผลหรือทำงานแตกต่างจากปกติเล็กน้อย

ลักษณะประสิทธิภาพก็แตกต่างกันมากเช่นกัน แม้ว่าประสิทธิภาพโดยรวมจะคล้ายกับหรือดีกว่าก่อนหน้านี้เล็กน้อย แต่บางกรณีการใช้งานมีแนวโน้มที่จะมีประสิทธิภาพดีขึ้น ขณะที่บางกรณีคาดว่าจะมีประสิทธิภาพลดลงบ้างอย่างน้อยในระยะสั้น

แบบลอย

LayoutNG ติดตั้งใช้งานการรองรับองค์ประกอบที่ลอยอยู่ (float: left; และ float: right;) อีกครั้งเพื่อแก้ไขปัญหาความถูกต้องหลายประการเกี่ยวกับตําแหน่งองค์ประกอบที่ลอยอยู่ซึ่งสัมพันธ์กับเนื้อหาอื่นๆ

เนื้อหาทับซ้อนกัน

การใช้องค์ประกอบลอยแบบเดิมไม่ได้คำนึงถึงระยะขอบอย่างถูกต้องเมื่อวางเนื้อหารอบๆ องค์ประกอบที่ลอยอยู่ ส่งผลให้เนื้อหาทับซ้อนกับองค์ประกอบลอยบางส่วนหรือทั้งหมด การแสดงผลที่พบบ่อยที่สุดของข้อบกพร่องนี้เกิดขึ้นเมื่อวางรูปภาพไว้ข้างย่อหน้า โดยที่ตรรกะการหลีกเลี่ยงไม่คำนึงถึงความสูงของบรรทัด (ดูข้อบกพร่องของ Chromium #861540)

ปัญหาเดียวกันอาจเกิดขึ้นภายในบรรทัดเดียว ตัวอย่างด้านล่างแสดงองค์ประกอบบล็อกที่มีระยะลบตามหลังองค์ประกอบที่ลอยอยู่ (#895962) ข้อความไม่ควรทับซ้อนกับส่วนลอย

การจัดรูปแบบตำแหน่งบริบท

เมื่อองค์ประกอบที่ก่อให้เกิดบริบทการจัดรูปแบบบล็อกมีการปรับขนาดอยู่ข้างองค์ประกอบลอย ระบบจะพยายามปรับขนาดบล็อกตามจำนวนครั้งที่กำหนดไว้ก่อนที่จะหยุด แนวทางนี้ทําให้ลักษณะการทํางานไม่แน่นอนและไม่เสถียร รวมถึงไม่ตรงกับการใช้งานอื่นๆ ใน LayoutNG ระบบจะพิจารณาค่าลอยทั้งหมดเมื่อปรับขนาดบล็อก (ดูข้อบกพร่องของ Chromium #548033)

ตอนนี้การวางตำแหน่งแบบสัมบูรณ์และแบบคงที่เป็นไปตามข้อกําหนดของ W3C มากขึ้นและสอดคล้องกับลักษณะการทํางานในเบราว์เซอร์อื่นๆ มากขึ้น ความแตกต่างระหว่าง 2 รูปแบบจะสังเกตเห็นได้ชัดเจนที่สุดในกรณีต่อไปนี้

• บล็อกที่มีเนื้อหาแบบหลายบรรทัดในบรรทัด
  หากบล็อกที่มีเนื้อหาซึ่งวางตำแหน่งแบบสัมบูรณ์ครอบคลุมหลายบรรทัด เครื่องมือรุ่นเดิมอาจใช้เฉพาะชุดย่อยของบรรทัดเพื่อคํานวณขอบเขตของบล็อกที่มีเนื้อหาอย่างไม่ถูกต้อง
• โหมดการเขียนแนวตั้ง
  เครื่องมือรุ่นเดิมมีปัญหามากมายในการวางองค์ประกอบที่อยู่นอกโฟลว์ในตำแหน่งเริ่มต้นในโหมดการเขียนแนวตั้ง ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรองรับโหมดการเขียนที่ปรับปรุงแล้วได้ในส่วนถัดไป

ภาษาที่อ่านจากขวาไปซ้าย (RTL) และโหมดการเขียนแนวตั้ง

LayoutNG ได้รับการออกแบบตั้งแต่ต้นเพื่อให้รองรับโหมดการเขียนแนวตั้งและภาษา RTL รวมถึงเนื้อหาแบบ 2 ทิศทาง

ข้อความแบบ 2 ทิศทาง

LayoutNG รองรับอัลกอริทึมแบบ 2 ทิศทางล่าสุดที่กําหนดโดยมาตรฐาน Unicode การอัปเดตนี้ไม่เพียงแก้ไขข้อผิดพลาดในการเรนเดอร์ต่างๆ เท่านั้น แต่ยังเพิ่มฟีเจอร์ที่ขาดหายไป เช่น การรองรับวงเล็บคู่ (ดูข้อบกพร่อง Chromium #302469)

ขั้นตอนที่ตัดกัน

LayoutNG เพิ่มความแม่นยำของเลย์เอาต์แนวตั้ง เช่น ตำแหน่งของออบเจ็กต์ที่วางตำแหน่งแบบสัมบูรณ์และการปรับขนาดของกล่องโฟลว์แนวตั้ง (โดยเฉพาะเมื่อใช้เปอร์เซ็นต์) จากการทดสอบ 1,258 รายการในชุดทดสอบ W3C นั้น การทดสอบ 103 รายการที่ดำเนินการในโปรแกรมแสดงผลแบบเก่าไม่ผ่านใน LayoutNG

การปรับขนาดตามเนื้อหา

ตอนนี้ระบบจะคํานวณขนาดโดยประมาณอย่างถูกต้องเมื่อบล็อกมีองค์ประกอบย่อยในโหมดการเขียนแบบออร์โธโกแนล

เลย์เอาต์ข้อความและการแบ่งบรรทัด

เครื่องมือวางเลย์เอาต์ Chromium รุ่นเดิมจะวางองค์ประกอบข้อความทีละองค์ประกอบและทีละบรรทัด แนวทางนี้ได้ผลดีในหลายกรณี แต่มีความซับซ้อนมากในการรองรับสคริปต์และเพื่อให้ได้ประสิทธิภาพที่ดี นอกจากนี้ ยังอาจทำให้เกิดความคลาดเคลื่อนในการวัดผล ซึ่งส่งผลให้ขนาดของคอนเทนเนอร์ที่ปรับขนาดตามเนื้อหาและเนื้อหาของคอนเทนเนอร์หรือการแบ่งบรรทัดที่ไม่จำเป็นมีความแตกต่างเล็กน้อย

ใน LayoutNG ระบบจะจัดวางข้อความที่ระดับย่อหน้า แล้วแบ่งออกเป็นบรรทัด ซึ่งจะช่วยให้ประสิทธิภาพดีขึ้น การแสดงผลข้อความมีคุณภาพสูงขึ้น และการแบ่งบรรทัดมีความสอดคล้องกันมากขึ้น ความแตกต่างที่เห็นได้ชัดที่สุดมีรายละเอียดด้านล่าง

การต่อเชื่อมข้ามขอบเขตองค์ประกอบ

ในสคริปต์บางรายการ อักขระบางตัวอาจดูเชื่อมกันเมื่ออยู่ติดกัน ดูตัวอย่างนี้จากภาษาอาหรับ

ใน LayoutNG ตอนนี้การรวมจะทำงานได้แม้ว่าอักขระจะอยู่ในองค์ประกอบที่แตกต่างกันก็ตาม แม้แต่การรวมจะยังคงอยู่เมื่อใช้การจัดสไตล์อื่น (ดูข้อบกพร่อง Chromium #6122)

กราเฟมคือหน่วยที่เล็กที่สุดของระบบการเขียนภาษา ตัวอย่างเช่น ในภาษาอังกฤษและภาษาอื่นๆ ที่ใช้ตัวอักษรละติน ตัวอักษรแต่ละตัวจะเป็นกราเฟม

รูปภาพด้านล่างแสดงการแสดงผล HTML ต่อไปนี้ในเครื่องมือวางเลย์เอาต์เดิมและ LayoutNG ตามลำดับ

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>

ตัวยึดของจีน ญี่ปุ่น และเกาหลี (CJK)

แม้ว่า Chromium จะรองรับและเปิดใช้ตัวยึดอักขระอยู่แล้วโดยค่าเริ่มต้น แต่ก็มีข้อจำกัดบางอย่าง เช่น เครื่องมือจัดวางเดิมไม่รองรับตัวยึดอักขระที่เกี่ยวข้องกับโค้ด CJK หลายรายการเนื่องจากการเพิ่มประสิทธิภาพการแสดงผล LayoutNG จะนําข้อจํากัดเหล่านี้ออกและรองรับการรวมอักขระเข้าด้วยกันโดยไม่คำนึงถึงสคริปต์

ตัวอย่างด้านล่างแสดงการแสดงผลของแบบตัวเชื่อมทางเลือก 3 แบบโดยใช้แบบอักษร Adobe SourceHanSansJP

องค์ประกอบขนาดกับเนื้อหา

สำหรับองค์ประกอบที่มีขนาดตามเนื้อหา (เช่น บล็อกในบรรทัด) เครื่องมือการจัดวางปัจจุบันจะคำนวณขนาดของบล็อกก่อน แล้วจึงจัดวางเนื้อหา ในบางกรณี เช่น เมื่อแบบอักษรจัดเรียงระยะห่างระหว่างอักขระอย่างหนัก อาจส่งผลให้ขนาดของเนื้อหาและบล็อกไม่ตรงกัน ใน LayoutNG ระบบได้กำจัดโหมดการทำงานที่ไม่ถูกต้องนี้เนื่องจากบล็อกมีการปรับขนาดตามเนื้อหาจริง

ตัวอย่างด้านล่างแสดงบล็อกสีเหลืองที่มีขนาดเท่ากับเนื้อหา โดยใช้แบบอักษร Lato ซึ่งใช้การปรับระยะห่างระหว่างตัว T กับเครื่องหมาย - ขอบเขตของกล่องสีเหลืองควรตรงกับขอบเขตของข้อความ

การตัดบรรทัด

คล้ายกับปัญหาที่อธิบายไว้ข้างต้น หากเนื้อหาของบล็อกขนาดตามเนื้อหามีขนาดใหญ่กว่า (กว้างกว่า) บล็อก บางครั้งเนื้อหาอาจตัดขึ้นบรรทัดใหม่โดยไม่จำเป็น กรณีนี้เกิดขึ้นไม่บ่อยนัก แต่บางครั้งก็เกิดขึ้นกับเนื้อหาที่มีทิศทางผสม

ข้อมูลเพิ่มเติม

• LayoutNG README
• เอกสารการออกแบบ LayoutNG
• ข้อบกพร่องการติดตามหลัก

ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับปัญหาความเข้ากันได้และข้อบกพร่องที่ LayoutNG แก้ไขปัญหาแล้วได้ที่ปัญหาที่ลิงก์ไว้ด้านบน หรือค้นหาฐานข้อมูลข้อบกพร่องของ Chromium เพื่อหาข้อบกพร่องที่มีการทำเครื่องหมายว่าแก้ไขแล้วใน LayoutNG

หากคุณสงสัยว่า LayoutNG อาจทําให้เว็บไซต์ใช้งานไม่ได้ โปรดส่งรายงานข้อบกพร่อง แล้วเราจะตรวจสอบ