Dự kiến sẽ được phát hành trong Chrome 76, LayoutNG là một công cụ bố cục mới sau nhiều năm nỗ lực. Có một số điểm cải tiến thú vị ngay lập tức, cùng với hiệu suất tăng thêm và các tính năng bố cục nâng cao sẽ ra mắt.
Có gì mới?
- Cải thiện khả năng tách biệt hiệu suất.
- Hỗ trợ tốt hơn cho các phông chữ không phải tiếng Latinh.
- Khắc phục nhiều vấn đề liên quan đến phần nổi và lề.
- Khắc phục một số lượng lớn vấn đề về khả năng tương thích với web.
Xin lưu ý rằng LayoutNG sẽ được phát hành theo giai đoạn. Trong Chrome 76, LayoutNG được dùng cho bố cục nội tuyến và bố cục khối. Các thành phần bố cục gốc khác (chẳng hạn như bảng, flexbox, lưới và phân mảnh khối) sẽ được thay thế trong các bản phát hành tiếp theo.
Các thay đổi mà nhà phát triển có thể thấy
Mặc dù tác động mà người dùng nhìn thấy sẽ ở mức tối thiểu, nhưng LayoutNG thay đổi một số hành vi theo cách rất tinh tế, khắc phục hàng trăm thử nghiệm và cải thiện khả năng tương thích với các trình duyệt khác. Mặc dù chúng tôi đã cố gắng hết sức, nhưng việc này có thể khiến một số trang web và ứng dụng hiển thị hoặc hoạt động theo cách khác một chút.
Các đặc điểm hiệu suất cũng khá khác biệt; mặc dù hiệu suất tổng thể tương tự hoặc tốt hơn một chút so với trước đây, nhưng một số trường hợp sử dụng nhất định có thể thấy hiệu suất cải thiện, trong khi các trường hợp khác dự kiến sẽ giảm một chút, ít nhất là trong ngắn hạn.
Nổi
LayoutNG triển khai lại tính năng hỗ trợ cho các phần tử nổi (float: left; và float: right;)
khắc phục một số vấn đề về tính chính xác liên quan đến vị trí
của các phần tử nổi so với nội dung khác.
Nội dung chồng chéo
Việc triển khai tính năng nổi cũ không tính đến lề chính xác khi đặt nội dung xung quanh một phần tử nổi, dẫn đến nội dung chồng chéo một phần hoặc toàn bộ phần tử nổi. Biểu hiện phổ biến nhất của lỗi này xuất hiện khi hình ảnh được đặt bên cạnh một đoạn văn bản mà logic tránh không tính đến chiều cao của dòng. (Xem lỗi Chromium #861540.)
Văn bản chồng lên hình ảnh nổi ở bên phải
Văn bản được đặt bên cạnh hình ảnh nổi ở bên phải
Vấn đề tương tự có thể xảy ra trong một dòng. Ví dụ bên dưới cho thấy một phần tử khối có lề âm theo sau một phần tử nổi (#895962). Văn bản không được chồng lên phần nổi.
Văn bản chồng lên phần tử màu cam nổi
Văn bản được đặt bên cạnh phần tử màu cam nổi
Định vị ngữ cảnh định dạng
Khi một phần tử tạo thành ngữ cảnh định dạng khối được định cỡ bên cạnh các phần tử nổi, công cụ bố cục cũ sẽ cố gắng định cỡ khối một số lần cố định trước khi bỏ cuộc. Phương pháp này dẫn đến hành vi không thể dự đoán và không ổn định, đồng thời không khớp với các phương thức triển khai khác. Trong LayoutNG, tất cả các số thực sẽ được tính đến khi định kích thước khối. (Xem lỗi Chromium #548033.)
Vị trí tuyệt đối và cố định hiện tuân thủ hơn các thông số kỹ thuật của W3C và phù hợp hơn với hành vi trong các trình duyệt khác. Sự khác biệt giữa hai loại này rõ ràng nhất trong hai trường hợp:
- Khối chứa nội tuyến nhiều dòng
Nếu một khối chứa được định vị tuyệt đối trải dài trên nhiều dòng, thì công cụ cũ có thể chỉ sử dụng một tập hợp con của các dòng để tính toán giới hạn khối chứa một cách không chính xác. - Chế độ ghi dọc
Công cụ cũ gặp nhiều vấn đề khi đặt các phần tử nằm ngoài luồng ở vị trí mặc định trong chế độ ghi dọc. Hãy xem phần tiếp theo để biết thêm thông tin chi tiết về việc cải thiện khả năng hỗ trợ chế độ viết.
Ngôn ngữ từ phải sang trái (RTL) và chế độ viết dọc
LayoutNG được thiết kế từ đầu để hỗ trợ các chế độ viết dọc và ngôn ngữ RTL, bao gồm cả nội dung hai chiều.
Văn bản hai chiều
LayoutNG hỗ trợ thuật toán hai chiều mới nhất do Chuẩn Unicode xác định. Bản cập nhật này không chỉ khắc phục nhiều lỗi kết xuất mà còn bao gồm các tính năng bị thiếu như hỗ trợ dấu ngoặc kép ghép nối (Xem lỗi Chromium #302469.)
Luồng vuông góc
LayoutNG cải thiện độ chính xác của bố cục luồng dọc, bao gồm cả việc đặt các đối tượng được định vị tuyệt đối và định cỡ hộp luồng vuông góc (đặc biệt là khi sử dụng phần trăm). Trong số 1.258 kiểm thử trong bộ kiểm thử W3C, 103 kiểm thử không thành công trong công cụ bố cục cũ đã vượt qua trong LayoutNG.
Định cỡ nội tại
Kích thước nội tại hiện được tính toán chính xác khi một khối chứa các thành phần con trong chế độ ghi vuông góc.
Bố cục văn bản và ngắt dòng
Công cụ bố cục Chromium cũ bố trí từng phần tử văn bản và từng dòng. Phương pháp này hoạt động tốt trong hầu hết các trường hợp, nhưng cần thêm nhiều độ phức tạp để hỗ trợ tập lệnh và đạt được hiệu suất tốt. Phương thức này cũng dễ bị không nhất quán về kết quả đo lường, dẫn đến sự khác biệt nhỏ về kích thước của vùng chứa kích thước nội dung và nội dung của vùng chứa hoặc các dòng ngắt không cần thiết.
Trong LayoutNG, văn bản được bố trí ở cấp đoạn văn bản rồi chia thành các dòng. Điều này giúp cải thiện hiệu suất, chất lượng hiển thị văn bản cao hơn và ngắt dòng nhất quán hơn. Dưới đây là thông tin chi tiết về những điểm khác biệt đáng chú ý nhất.
Kết hợp trên các ranh giới phần tử
Trong một số tập lệnh, một số ký tự nhất định có thể được kết hợp trực quan khi chúng liền kề nhau. Hãy xem ví dụ sau đây bằng tiếng Ả Rập:
Trong LayoutNG, tính năng kết hợp hiện hoạt động ngay cả khi các ký tự nằm trong các phần tử khác nhau. Các mối nối thậm chí sẽ được giữ nguyên khi áp dụng kiểu khác. (Xem lỗi Chromium #6122.)
Chữ cái là đơn vị nhỏ nhất của hệ thống chữ viết của một ngôn ngữ. Ví dụ: trong tiếng Anh và các ngôn ngữ khác sử dụng bảng chữ cái Latinh, mỗi chữ cái là một ký tự.
Các hình ảnh bên dưới cho thấy kết quả kết xuất HTML sau đây trong công cụ bố cục cũ và LayoutNG tương ứng:
<div>نسق</div>
<div>نس<span>ق</span></div>
Hãy lưu ý cách hình dạng của chữ cái thứ hai thay đổi
Hai phiên bản hiện giống hệt nhau
Chữ ghép tiếng Trung, tiếng Nhật và tiếng Hàn (CJK)
Mặc dù Chromium đã hỗ trợ và bật các chữ ghép theo mặc định, nhưng có một số hạn chế: các chữ ghép liên quan đến nhiều điểm mã CJK không được hỗ trợ trong công cụ bố cục cũ do quá trình tối ưu hoá kết xuất. LayoutNG loại bỏ các hạn chế này và hỗ trợ chữ ghép bất kể kiểu chữ.
Ví dụ bên dưới cho thấy cách kết xuất ba chữ cái nối tuỳ ý bằng phông chữ Adobe SourceHanSansJP:
MHz tạo thành một chữ ghép chính xác
nhưng マンション và 10 điểm không tạo thành chữ ghép
Cả ba nhóm đều tạo thành chữ ghép như mong đợi
Phần tử kích thước nội dung
Đối với các phần tử có kích thước theo nội dung (chẳng hạn như các khối nội tuyến), trước tiên, công cụ bố cục hiện tại sẽ tính toán kích thước của khối, sau đó thực hiện bố cục trên nội dung. Trong một số trường hợp, chẳng hạn như khi phông chữ căn chỉnh quá mạnh, điều này có thể dẫn đến sự không khớp giữa kích thước của nội dung và khối. Trong LayoutNG, chế độ lỗi này đã bị loại bỏ vì khối được định cỡ dựa trên nội dung thực tế.
Ví dụ dưới đây cho thấy một khối màu vàng có kích thước phù hợp với nội dung. Ứng dụng này sử dụng phông chữ Lato sử dụng khoảng cách giữa các chữ cái để điều chỉnh khoảng cách giữa T và -. Các giới hạn của hộp màu vàng phải khớp với giới hạn của văn bản.
Lưu ý khoảng trắng ở cuối sau chữ T cuối cùng
Lưu ý cách cạnh trái và phải của hộp khớp với giới hạn của văn bản
Tự xuống dòng
Tương tự như vấn đề được mô tả ở trên, nếu nội dung của một khối kích thước theo nội dung lớn hơn (rộng hơn) khối, thì đôi khi nội dung có thể được gói không cần thiết. Trường hợp này khá hiếm nhưng đôi khi xảy ra đối với nội dung có hướng hỗn hợp.
Lưu ý dấu ngắt dòng không cần thiết và khoảng trống thừa ở bên phải
Lưu ý cách cạnh trái và phải của hộp khớp với giới hạn của văn bản
Thông tin khác
Để biết thêm thông tin chi tiết về các vấn đề về khả năng tương thích và lỗi cụ thể mà LayoutNG đã khắc phục, vui lòng xem các vấn đề được liên kết ở trên hoặc tìm kiếm cơ sở dữ liệu lỗi Chromium để tìm lỗi được đánh dấu là Fixed-In-LayoutNG (Đã khắc phục trong LayoutNG).
Nếu bạn nghi ngờ LayoutNG có thể đã khiến một trang web bị hỏng, vui lòng gửi báo cáo lỗi để chúng tôi điều tra.