LayoutNG

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

มีอะไรใหม่

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

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

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

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

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

แบบลอย

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

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

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

Fig 1a, Legacy Layout Engine
ข้อความซ้อนทับรูปภาพแบบลอยทางด้านขวา

รูปที่ 1b, LayoutNG
ข้อความวางอยู่ถัดจากรูปภาพแบบลอยทางด้านขวา

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

Fig 2a, Legacy Layout Engine
ข้อความซ้อนทับองค์ประกอบสีส้มแบบลอย

Fig 2b, LayoutNG
ข้อความวางอยู่ด้านข้างองค์ประกอบสีส้มแบบลอย

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

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

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

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

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

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

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

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

ไหลแบบตั้งฉาก

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

การปรับขนาดภายใน

ตอนนี้ระบบจะคำนวณขนาดภายในอย่างถูกต้องเมื่อบล็อกมีเด็กอยู่ในโหมดการเขียนตามตั้งฉาก

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

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

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

การรวมข้ามขอบเขตขององค์ประกอบ

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

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

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

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

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

Fig 3a, Legacy Layout Engine
ดูว่ารูปแบบของตัวอักษรที่ 2 เปลี่ยนไปอย่างไร

Fig 3b, LayoutNG
ตอนนี้ทั้ง 2 เวอร์ชันเหมือนกันแล้ว

อักษรรวมของจีน ญี่ปุ่น และเกาหลี (CJK)

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

ตัวอย่างด้านล่างแสดงการแสดงผลการรวมกลุ่มแบบผูกมัด 3 แบบซึ่งใช้แบบอักษร Adobe SourceHanSansJP

Fig 4a, Legacy Layout Engine
MHz สร้าง Ligature อย่างถูกต้อง
แต่ マンすョン และ 10点 ไม่ทำ

Fig 4b, LayoutNG
ทั้ง 3 กลุ่มจะทำการรวมรูปแบบตามที่คาดไว้

องค์ประกอบที่กำหนดขนาดต่อเนื้อหา

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

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

Fig 5a, Legacy Layout Engine
สังเกตช่องว่างต่อท้ายหลัง T ท้ายสุด

Fig 5b, LayoutNG
ดูว่าขอบด้านซ้ายและขวาของช่องตรงกับขอบของข้อความอย่างไร

การยกบรรทัด

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

Fig 6a, Legacy Layout Engine
จดบันทึกการขึ้นบรรทัดใหม่ที่ไม่จำเป็นและพื้นที่ว่างเพิ่มเติมทางด้านขวา

Fig 6b, LayoutNG
ดูว่าขอบด้านซ้ายและขวาของช่องตรงกับขอบเขตของข้อความอย่างไร

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

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

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

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