LayoutNG yang dijadwalkan akan dirilis pada Chrome 76, adalah mesin tata letak baru yang keluar dari upaya multi-tahun. Ada beberapa peningkatan langsung yang menarik, dan peningkatan performa serta fitur tata letak lanjutan akan segera hadir.
Apa yang baru?
- Meningkatkan isolasi performa.
- Dukungan yang lebih baik untuk skrip selain bahasa Latin.
- Memperbaiki banyak masalah terkait 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 dampak yang terlihat bagi pengguna seharusnya minimal, LayoutNG mengubah beberapa perilaku dengan cara yang sangat halus, memperbaiki ratusan pengujian, dan meningkatkan kompatibilitas dengan browser lain. Meskipun kami sudah berupaya sebaik mungkin, kemungkinan hal ini akan menyebabkan beberapa situs dan aplikasi merender atau berperilaku sedikit berbeda.
Karakteristik performa juga sangat berbeda; meskipun performa secara keseluruhan mirip atau sedikit lebih baik dari sebelumnya, kasus penggunaan tertentu cenderung mengalami peningkatan performa, sedangkan kasus penggunaan yang lain diperkirakan akan mengalami regresi, setidaknya dalam jangka pendek.
Float
LayoutNG mengimplementasikan 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. Manifes paling umum dari bug ini muncul saat gambar diposisikan di samping paragraf dengan logika pencegahan gagal memperhitungkan tinggi garis. (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 {i>float<i}.
Teks tumpang-tindih dengan elemen oranye mengambang
Teks diposisikan di samping elemen oranye mengambang
Memformat penempatan konteks
Jika elemen yang membentuk konteks pemformatan blok berukuran di samping float, mesin tata letak lama akan mencoba mengukur blok beberapa kali sebelum menyerah. Pendekatan ini menyebabkan perilaku yang tidak dapat diprediksi dan tidak stabil serta tidak sesuai dengan implementasi lain. Dalam LayoutNG, semua float diperhitungkan saat mengubah ukuran blok. (Lihat bug Chromium #548033).
Pemosisian absolut dan tetap kini lebih sesuai dengan spesifikasi W3C dan lebih cocok dengan perilaku di browser lain. Perbedaan antara keduanya paling terlihat dalam dua kasus:
- Inline multibaris yang berisi blok
Jika blok penampung yang diposisikan secara mutlak membentang beberapa baris, mesin lama mungkin hanya menggunakan subset baris yang salah untuk menghitung batas blok yang memuatnya. - Mode penulisan vertikal
Mesin lama mengalami banyak masalah dalam menempatkan elemen out-of-flow 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 mencakup fitur yang tidak ada seperti dukungan tanda kurung pasangan (Lihat bug Chromium #302469).
Aliran ortogonal
LayoutNG meningkatkan akurasi tata letak flow vertikal, termasuk, misalnya, penempatan objek yang benar-benar diposisikan dan ukuran kotak flow ortogonal (terutama ketika persen digunakan). Dari 1.258 pengujian dalam rangkaian pengujian W3C, 103 pengujian yang gagal di mesin tata letak lama lulus di LayoutNG.
Ukuran intrinsik
Ukuran intrinsik kini dihitung dengan benar jika blok berisi turunan dalam mode penulisan ortogonal.
Tata letak teks & jeda baris
Mesin tata letak Chromium lama menata teks elemen demi elemen dan baris demi baris. Pendekatan ini berfungsi dengan baik dalam sebagian besar kasus, tetapi memerlukan banyak kerumitan tambahan untuk mendukung skrip dan mencapai performa yang baik. Hal ini juga rentan terhadap inkonsistensi pengukuran, yang menyebabkan perbedaan kecil dalam ukuran penampung ukuran ke konten dan kontennya atau jeda baris yang tidak perlu.
Di LayoutNG, teks ditata di tingkat paragraf lalu dibagi menjadi beberapa baris. Hal ini memungkinkan performa yang lebih baik, rendering teks berkualitas lebih tinggi, dan jeda baris yang lebih konsisten. Perbedaan yang paling signifikan dijelaskan di bawah ini.
Bergabung melintasi batas elemen
Dalam beberapa skrip, karakter tertentu dapat digabungkan secara visual jika berdekatan. Lihat contoh dari bahasa Arab ini:
Di LayoutNG, penggabungan kini berfungsi meskipun karakter berada dalam elemen yang berbeda. Gabungan 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 ini 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 sekarang identik
Ligatur China, Jepang, dan Korea (CJK)
Meskipun Chromium sudah mendukung ligatur dan mengaktifkannya secara default, ada beberapa batasan: ligatur yang melibatkan beberapa titik kode CJK tidak didukung di mesin tata letak lama karena adanya pengoptimalan rendering. LayoutNG menghapus pembatasan ini dan mendukung ligatur, terlepas dari skripnya.
Contoh di bawah ini menunjukkan rendering tiga ligatur diskresi menggunakan font Adobe SourceHanSansJP:
MHz akan membentuk ligatur dengan benar
tetapi マンテョン dan 10点 tidak
Ketiga kelompok membentuk ligatur seperti yang diharapkan
Elemen menyesuaikan ukuran terhadap konten
Untuk elemen yang menyesuaikan ukuran dengan 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 ketika font diubah secara agresif, hal ini dapat mengakibatkan ketidakcocokan antara ukuran konten dan blok. Di LayoutNG, mode kegagalan ini telah dihilangkan karena blok diukur berdasarkan konten sebenarnya.
Contoh di bawah ini menunjukkan blok kuning yang berukuran sesuai konten. Kode ini menggunakan font Lato yang menggunakan kerning untuk menyesuaikan spasi antara T dan -. Batas kotak kuning harus sesuai 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) daripada blok, konten terkadang dapat digabungkan secara tidak perlu. Hal ini cukup jarang terjadi, tetapi kadang-kadang terjadi untuk konten arah campuran.
Perhatikan jeda baris yang tidak perlu dan ruang ekstra di sebelah kanan
Perhatikan bagaimana tepi kiri dan kanan kotak cocok dengan batas teks
Informasi lebih lanjut
Untuk informasi selengkapnya tentang masalah kompatibilitas tertentu dan bug yang diperbaiki oleh LayoutNG, lihat masalah yang ditautkan di atas atau telusuri database bug Chromium untuk menemukan bug yang ditandai LayoutNG yang Diperbaiki.
Jika Anda mencurigai bahwa LayoutNG mungkin telah menyebabkan situs rusak, harap ajukan laporan bug, dan kami akan menyelidikinya.