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