LayoutNG เป็นเครื่องมือวางเลย์เอาต์ใหม่ที่กำลังจะเปิดตัวใน Chrome 76 โดยเราพัฒนาเครื่องมือนี้มาเป็นเวลาหลายปี มีการปรับปรุงที่น่าสนใจหลายอย่างในทันที และเรากำลังเพิ่มประสิทธิภาพและฟีเจอร์เลย์เอาต์ขั้นสูงเพิ่มเติม
มีอะไรใหม่
- ปรับปรุงการแยกประสิทธิภาพ
- การรองรับที่ดีขึ้นสำหรับสคริปต์ที่ไม่ใช่ละติน
- แก้ไขปัญหาต่างๆ เกี่ยวกับลอยและระยะขอบ
- แก้ไขปัญหาความเข้ากันได้ของเว็บจํานวนมาก
โปรดทราบว่า LayoutNG จะเปิดตัวเป็นระยะ ใน Chrome 76 ระบบจะใช้ LayoutNG สำหรับเลย์เอาต์ในบรรทัดและคําสั่ง องค์ประกอบพื้นฐานอื่นๆ ของเลย์เอาต์ (เช่น ตาราง Flexbox ตารางกริด และการแยกบล็อก) จะถูกแทนที่ในรุ่นต่อๆ ไป
การเปลี่ยนแปลงที่นักพัฒนาแอปมองเห็น
แม้ว่าผลกระทบที่ผู้ใช้มองเห็นควรมีน้อยมาก แต่ LayoutNG จะเปลี่ยนลักษณะการทํางานบางอย่างในลักษณะที่แทบมองไม่เห็น แก้ไขการทดสอบหลายร้อยรายการ และปรับปรุงความเข้ากันได้กับเบราว์เซอร์อื่นๆ แม้ว่าเราจะพยายามอย่างสุดความสามารถแล้ว แต่ก็มีแนวโน้มว่าการดำเนินการนี้จะทำให้บางเว็บไซต์และแอปพลิเคชันแสดงผลหรือทำงานแตกต่างจากปกติเล็กน้อย
ลักษณะประสิทธิภาพก็แตกต่างกันมากเช่นกัน แม้ว่าประสิทธิภาพโดยรวมจะคล้ายกับหรือดีกว่าก่อนหน้านี้เล็กน้อย แต่บางกรณีการใช้งานมีแนวโน้มที่จะมีประสิทธิภาพดีขึ้น ขณะที่บางกรณีคาดว่าจะมีประสิทธิภาพลดลงบ้างอย่างน้อยในระยะสั้น
แบบลอย
LayoutNG ติดตั้งใช้งานการรองรับองค์ประกอบที่ลอยอยู่ (float: left; และ float: right;) อีกครั้งเพื่อแก้ไขปัญหาความถูกต้องหลายประการเกี่ยวกับตําแหน่งองค์ประกอบที่ลอยอยู่ซึ่งสัมพันธ์กับเนื้อหาอื่นๆ
เนื้อหาทับซ้อนกัน
การใช้องค์ประกอบลอยแบบเดิมไม่ได้คำนึงถึงระยะขอบอย่างถูกต้องเมื่อวางเนื้อหารอบๆ องค์ประกอบที่ลอยอยู่ ส่งผลให้เนื้อหาซ้อนทับองค์ประกอบลอยบางส่วนหรือทั้งหมด การแสดงผลที่พบบ่อยที่สุดของข้อบกพร่องนี้เกิดขึ้นเมื่อวางรูปภาพไว้ข้างย่อหน้า โดยที่ตรรกะการหลีกเลี่ยงไม่คำนึงถึงความสูงของบรรทัด (ดูข้อบกพร่องของ Chromium #861540)
ข้อความวางซ้อนกับรูปภาพที่ลอยอยู่ทางด้านขวา
ข้อความอยู่ด้านข้างรูปภาพที่ลอยอยู่ทางด้านขวา
ปัญหาเดียวกันอาจเกิดขึ้นภายในบรรทัดเดียว ตัวอย่างด้านล่างแสดงองค์ประกอบบล็อกที่มีระยะลบตามหลังองค์ประกอบที่ลอยอยู่ (#895962) ข้อความไม่ควรทับซ้อนกับส่วนลอย
ข้อความซ้อนทับองค์ประกอบสีส้มที่ลอยอยู่
ข้อความอยู่ข้างองค์ประกอบสีส้มที่ลอยอยู่
การจัดตำแหน่งบริบทการจัดรูปแบบ
เมื่อองค์ประกอบที่ก่อให้เกิดบริบทการจัดรูปแบบบล็อกมีการปรับขนาดอยู่ข้างองค์ประกอบลอย ระบบจะพยายามปรับขนาดบล็อกตามจำนวนครั้งที่กำหนดไว้ก่อนที่จะหยุด แนวทางนี้ทําให้ลักษณะการทํางานไม่แน่นอนและไม่เสถียร รวมถึงไม่ตรงกับการใช้งานอื่นๆ ใน LayoutNG ระบบจะพิจารณาค่าลอยทั้งหมดเมื่อปรับขนาดบล็อก (ดูข้อบกพร่องของ Chromium #548033)
ตอนนี้การวางตำแหน่งแบบสัมบูรณ์และแบบคงที่เป็นไปตามข้อกำหนดของ W3C มากขึ้นและสอดคล้องกับลักษณะการทำงานในเบราว์เซอร์อื่นๆ มากขึ้น ความแตกต่างระหว่าง 2 รูปแบบนี้เห็นได้ชัดที่สุดในกรณี 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>نسق</div>
<div>نس<span>ق</span></div>
สังเกตการเปลี่ยนแปลงรูปแบบของตัวอักษรตัวที่ 2
ตอนนี้ทั้ง 2 เวอร์ชันเหมือนกันแล้ว
ตัวยึดของภาษาจีน ญี่ปุ่น และเกาหลี (CJK)
แม้ว่า Chromium จะรองรับและเปิดใช้ตัวยึดอักขระอยู่แล้วโดยค่าเริ่มต้น แต่ก็มีข้อจำกัดบางอย่าง เช่น เครื่องมือจัดวางเดิมไม่รองรับตัวยึดอักขระที่เกี่ยวข้องกับโค้ด CJK หลายรายการเนื่องจากการเพิ่มประสิทธิภาพการแสดงผล LayoutNG จะนําข้อจํากัดเหล่านี้ออกและรองรับการรวมอักขระเข้าด้วยกันโดยไม่คำนึงถึงสคริปต์
ตัวอย่างด้านล่างแสดงการแสดงผลของแบบอักษรตัวห้อยแบบไม่บังคับ 3 แบบโดยใช้แบบอักษร Adobe SourceHanSansJP
MHz เป็นตัวยึดอักขระอย่างถูกต้อง
แต่ マンション และ 10点 ไม่ได้เป็นตัวยึดอักขระ
ทั้ง 3 กลุ่มเป็นตัวยึดอักขระตามที่คาดไว้
องค์ประกอบขนาดกับเนื้อหา
สำหรับองค์ประกอบที่มีขนาดตามเนื้อหา (เช่น บล็อกในบรรทัด) เครื่องมือการจัดวางปัจจุบันจะคำนวณขนาดของบล็อกก่อน แล้วจึงจัดวางเนื้อหา ในบางกรณี เช่น เมื่อแบบอักษรจัดเรียงระยะห่างระหว่างอักขระอย่างหนัก อาจส่งผลให้ขนาดของเนื้อหาและบล็อกไม่ตรงกัน ใน LayoutNG ระบบได้กำจัดโหมดการทำงานที่ไม่ถูกต้องนี้เนื่องจากบล็อกมีการปรับขนาดตามเนื้อหาจริง
ตัวอย่างด้านล่างแสดงบล็อกสีเหลืองที่มีขนาดเท่ากับเนื้อหา โดยใช้แบบอักษร Lato ซึ่งใช้การปรับระยะห่างระหว่างตัว T กับเครื่องหมาย - ขอบเขตของกล่องสีเหลืองควรตรงกับขอบเขตของข้อความ
สังเกตการเว้นวรรคหลัง T ตัวสุดท้าย
สังเกตว่าขอบซ้ายและขวาของกล่องตรงกับขอบเขตของข้อความอย่างไร
การตัดบรรทัด
คล้ายกับปัญหาที่อธิบายไว้ข้างต้น หากเนื้อหาของบล็อกขนาดตามเนื้อหามีขนาดใหญ่กว่า (กว้างกว่า) บล็อก บางครั้งเนื้อหาอาจตัดขึ้นบรรทัดใหม่โดยไม่จำเป็น กรณีนี้เกิดขึ้นไม่บ่อยนัก แต่บางครั้งก็เกิดขึ้นกับเนื้อหาที่มีทิศทางผสม
สังเกตการแบ่งบรรทัดที่ไม่จำเป็นและพื้นที่ว่างเพิ่มเติมทางด้านขวา
สังเกตว่าขอบซ้ายและขวาของกล่องตรงกับขอบเขตของข้อความอย่างไร
ข้อมูลเพิ่มเติม
ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับปัญหาความเข้ากันได้และข้อบกพร่องที่ LayoutNG แก้ไขปัญหาแล้วได้ที่ปัญหาที่ลิงก์ไว้ด้านบน หรือค้นหาฐานข้อมูลข้อบกพร่องของ Chromium เพื่อหาข้อบกพร่องที่มีการทำเครื่องหมายว่าแก้ไขแล้วใน LayoutNG
หากคุณสงสัยว่า LayoutNG อาจทําให้เว็บไซต์ใช้งานไม่ได้ โปรดส่งรายงานข้อบกพร่อง แล้วเราจะตรวจสอบ