Dijadwalkan untuk dirilis di Chrome 76, LayoutNG adalah mesin tata letak baru yang dihasilkan dari upaya selama beberapa tahun. Ada beberapa peningkatan langsung yang menarik, dan peningkatan performa tambahan serta fitur tata letak lanjutan akan hadir.
Apa yang baru?
- Meningkatkan isolasi performa.
- Dukungan yang lebih baik untuk skrip selain untuk bahasa yang menggunakan huruf Latin.
- Memperbaiki banyak masalah seputar float dan margin.
- Memperbaiki sejumlah besar masalah kompatibilitas web.
Perhatikan bahwa LayoutNG akan diluncurkan secara bertahap. Di Chrome 76, LayoutNG digunakan untuk tata letak inline dan blok. Primitif tata letak lainnya (seperti tabel, flexbox, petak, dan fragmentasi blok) akan diganti dalam rilis berikutnya.
Perubahan yang terlihat oleh developer
Meskipun dampaknya terhadap pengguna akan minimal, LayoutNG mengubah beberapa perilaku dengan cara yang sangat halus, memperbaiki ratusan pengujian, dan meningkatkan kompatibilitas dengan browser lain. Meskipun kami sudah melakukan upaya terbaik, kemungkinan hal ini akan menyebabkan beberapa situs dan aplikasi merender atau berperilaku sedikit berbeda.
Karakteristik performanya juga cukup berbeda; meskipun performa secara keseluruhan serupa atau sedikit lebih baik dari sebelumnya, kasus penggunaan tertentu cenderung akan mengalami peningkatan performa, sementara kasus lainnya diperkirakan akan mengalami regresi, setidaknya dalam jangka pendek.
Float
LayoutNG menerapkan ulang dukungan untuk elemen mengambang (float: left; dan float: right;)
yang memperbaiki sejumlah masalah ketepatan seputar penempatan
float sehubungan dengan konten lainnya.
Konten yang tumpang tindih
Implementasi float lama tidak memperhitungkan margin dengan benar saat menempatkan konten di sekitar elemen mengambang, sehingga konten tumpang-tindih sebagian atau sepenuhnya dengan float itu sendiri. Manifestasi paling umum dari bug ini muncul saat gambar diposisikan di samping paragraf saat logika penghindaran gagal memperhitungkan tinggi baris. (Lihat bug Chromium #861540.)
Teks tumpang-tindih dengan gambar mengambang di sebelah kanan
Teks diposisikan di samping gambar mengambang di sebelah kanan
Masalah yang sama dapat terjadi dalam satu baris. Contoh di bawah menunjukkan elemen blok dengan margin negatif setelah elemen mengambang (#895962). Teks tidak boleh tumpang-tindih dengan float.
Teks tumpang-tindih dengan elemen oranye mengambang
Teks diposisikan di samping elemen oranye mengambang
Pemformatan posisi konteks
Saat elemen yang membentuk konteks pemformatan blok diukur di samping float, mesin tata letak lama akan mencoba mengukur blok beberapa kali tetap sebelum menyerah. Pendekatan ini menyebabkan perilaku yang tidak dapat diprediksi dan tidak stabil serta tidak cocok dengan implementasi lainnya. Di LayoutNG, semua float diperhitungkan saat menentukan ukuran blok. (Lihat bug Chromium #548033.)
Pemosisian mutlak dan tetap kini lebih mematuhi spesifikasi W3C dan lebih cocok dengan perilaku di browser lain. Perbedaan antara keduanya paling terlihat dalam dua kasus:
- Blok yang berisi inline multi-baris
Jika blok yang berisi dan diposisikan secara absolut mencakup beberapa baris, mesin lama mungkin salah menggunakan hanya sebagian baris untuk menghitung batas blok yang berisi. - Mode penulisan vertikal
Mesin lama memiliki banyak masalah dalam menempatkan elemen di luar alur di posisi default dalam mode penulisan vertikal. Lihat bagian berikutnya untuk mengetahui detail selengkapnya tentang dukungan mode penulisan yang ditingkatkan.
Bahasa kanan-ke-kiri (RTL) dan mode penulisan vertikal
LayoutNG dirancang dari awal untuk mendukung mode penulisan vertikal dan bahasa RTL, termasuk konten dua arah.
Teks dua arah
LayoutNG mendukung algoritma dua arah terbaru yang ditentukan oleh Standar Unicode. Update ini tidak hanya memperbaiki berbagai error rendering, tetapi juga menyertakan fitur yang tidak ada seperti dukungan tanda kurung berpasangan (Lihat bug Chromium #302469.)
Alur ortogonal
LayoutNG meningkatkan akurasi tata letak alur vertikal, termasuk, misalnya, penempatan objek yang diposisikan secara absolut dan ukuran kotak alur ortogonal (terutama saat persentase digunakan). Dari 1.258 pengujian dalam rangkaian pengujian W3C, 103 pengujian yang gagal di mesin tata letak lama lulus di LayoutNG.
Pengukuran intrinsik
Ukuran intrinsik kini dihitung dengan benar saat blok berisi turunan dalam mode penulisan ortogonal.
Tata letak teks & pemisahan baris
Mesin tata letak Chromium lama menata letak elemen teks satu per satu dan baris per baris. Pendekatan ini berfungsi dengan baik dalam sebagian besar kasus, tetapi memerlukan banyak kompleksitas tambahan untuk mendukung skrip dan mencapai performa yang baik. Hal ini juga rentan terhadap inkonsistensi pengukuran, yang menyebabkan perbedaan halus dalam ukuran penampung ukuran ke konten dan kontennya atau pemisahan baris yang tidak perlu.
Di LayoutNG, teks disusun di tingkat paragraf, lalu dibagi menjadi beberapa baris. Hal ini memungkinkan performa yang lebih baik, rendering teks berkualitas lebih tinggi, dan pemisahan baris yang lebih konsisten. Perbedaan yang paling signifikan dijelaskan di bawah ini.
Menggabungkan di seluruh batas elemen
Dalam beberapa skrip, karakter tertentu dapat digabungkan secara visual jika berdekatan. Lihat contoh ini dari bahasa Arab:
Di LayoutNG, penggabungan kini berfungsi meskipun karakter berada di elemen yang berbeda. Join bahkan akan dipertahankan saat gaya yang berbeda diterapkan. (Lihat bug Chromium #6122.)
Grafem adalah unit terkecil dari sistem penulisan bahasa. Misalnya, dalam bahasa Inggris dan bahasa lain yang menggunakan alfabet Latin, setiap huruf adalah grafem.
Gambar di bawah menunjukkan rendering HTML berikut di mesin tata letak lama dan LayoutNG:
<div>نسق</div>
<div>نس<span>ق</span></div>
Perhatikan bagaimana bentuk huruf kedua berubah
Kedua versi kini identik
Ligatur China, Jepang, dan Korea (CJK)
Meskipun Chromium sudah mendukung ligatur dan mengaktifkannya secara default, ada beberapa batasan: ligatur yang melibatkan beberapa kode titik CJK tidak didukung di mesin tata letak lama karena pengoptimalan rendering. LayoutNG menghapus batasan ini dan mendukung ligatur terlepas dari skrip.
Contoh di bawah ini menunjukkan rendering tiga ligatur opsional menggunakan font Adobe SourceHanSansJP:
MHz membentuk ligatur dengan benar
tetapi マンション dan 10点 tidak
Ketiga grup membentuk ligatur seperti yang diharapkan
Elemen ukuran ke konten
Untuk elemen yang berukuran sesuai konten (seperti blok inline), mesin tata letak saat ini akan menghitung ukuran blok terlebih dahulu, lalu melakukan tata letak pada konten. Dalam beberapa kasus, seperti saat kern font dilakukan secara agresif, hal ini dapat menyebabkan ketidakcocokan antara ukuran konten dan blok. Di LayoutNG, mode kegagalan ini telah dihilangkan karena ukuran blok didasarkan pada konten sebenarnya.
Contoh di bawah menunjukkan blok kuning yang diukur sesuai konten. Font ini menggunakan font Lato yang menggunakan kerning untuk menyesuaikan spasi antara T dan -. Batas kotak kuning harus cocok dengan batas teks.
Perhatikan spasi kosong di akhir setelah T terakhir
Perhatikan bagaimana tepi kiri dan kanan kotak cocok dengan batas teks
Penggabungan baris
Serupa dengan masalah yang dijelaskan di atas, jika konten blok ukuran-ke-konten lebih besar (lebih lebar) dari blok, konten terkadang dapat digabungkan tanpa perlu. Hal ini cukup jarang terjadi, tetapi terkadang terjadi untuk konten dengan arah campuran.
Perhatikan pemisah baris yang tidak perlu dan ruang tambahan di sebelah kanan
Perhatikan bagaimana tepi kiri dan kanan kotak cocok dengan batas teks
Informasi lebih lanjut
Untuk informasi yang lebih mendetail tentang masalah kompatibilitas dan bug tertentu yang diperbaiki oleh LayoutNG, lihat masalah yang ditautkan di atas atau telusuri database bug Chromium untuk bug yang ditandai Fixed-In-LayoutNG.
Jika Anda menduga bahwa LayoutNG mungkin telah menyebabkan situs rusak, harap ajukan laporan bug, dan kami akan menyelidikinya.