Chrome 76'da kullanıma sunulması planlanan LayoutNG, yıllar süren bir çalışmanın ürünü olan yeni bir düzen motorudur. Hemen kullanabileceğiniz çeşitli iyileştirmeler var. Ayrıca, performansı artıracak ve gelişmiş düzen özellikleri sunacak yeni özellikler de yakında kullanıma sunulacak.
Yenilikler
- Performans izolasyonunu iyileştirir.
- Latin alfabesinden farklı yazım sistemleri için daha iyi destek
- Yüzen metin ve kenar boşluklarıyla ilgili birçok sorunu düzeltir.
- Çok sayıda web uyumluluğu sorununu düzeltir.
LayoutNG'nin aşamalı olarak kullanıma sunulacağını lütfen unutmayın. Chrome 76'da satır içi ve blok düzeni için LayoutNG kullanılır. Diğer düzen temel öğeleri (tablo, esnek kutu, ızgara ve blok parçalama gibi) sonraki sürümlerde değiştirilecektir.
Geliştirici tarafından görülebilen değişiklikler
Kullanıcılar tarafından görülebilecek etki minimum düzeyde olsa da LayoutNG, bazı davranışları çok ince şekillerde değiştirir, yüzlerce testi düzeltir ve diğer tarayıcılarla uyumluluğu iyileştirir. Elimizden geleni yapmamıza rağmen bu durumun bazı site ve uygulamaların biraz farklı şekilde oluşturulmasına veya davranmasına neden olması muhtemeldir.
Performans özellikleri de oldukça farklıdır. Genel olarak performans, öncekine benzer veya biraz daha iyi olsa da belirli kullanım alanlarında performansta iyileşme görülebilir. Diğer kullanım alanlarında ise en azından kısa vadede performansın biraz düşeceği beklenir.
Kayanlar
LayoutNG, yüzen öğeler (float: left; ve float: right;) için desteği yeniden uygulayarak yüzen öğelerin diğer içerikle ilgili yerleşimiyle ilgili çeşitli doğruluk sorunlarını düzeltir.
Üst üste binmiş içerik
Eski yüzen uygulama, içerikleri yüzen öğelerin etrafına yerleştirirken kenar boşluklarını doğru şekilde hesaba katmadığından, içeriklerin yüzen öğeyle kısmen veya tamamen örtüşmesine neden oluyordu. Bu hatanın en yaygın görünümü, bir resmin paragrafın yanına yerleştirildiği ve kaçınma mantığının satırın yüksekliğini hesaba katmadığı durumlarda ortaya çıkar. (Chromium hatası #861540'a bakın.)
Metin, sağdaki yüzen resimle örtüşüyor
Metin, sağdaki yüzen resmin yanında konumlandırılıyor
Aynı sorun tek bir satırda da ortaya çıkabilir. Aşağıdaki örnekte, kayan bir öğenin (#895962) ardından negatif kenar boşluğu bulunan bir blok öğesi gösterilmektedir. Metin, yüzen metinle çakışmamalıdır.
Metin, yüzen turuncu öğeyle örtüşüyor
Metin, yüzen turuncu öğenin yanında konumlandırılıyor
İçerik bağlamı konumlandırmasını biçimlendirme
Blok biçimlendirme bağlamı oluşturan bir öğe, yüzer öğelerin yanında boyutlandırıldığında eski düzen motoru, vazgeçmeden önce bloğu sabit sayıda boyutlandırmayı dener. Bu yaklaşım, öngörülemeyen ve kararsız davranışlara yol açtı ve diğer uygulamalarla eşleşmedi. LayoutNG'de blok boyutlandırılırken tüm yüzer değerler dikkate alınır. (Chromium hatası #548033'e bakın.)
Mutlak ve sabit konumlandırma artık W3C spesifikasyonlarına daha uygun ve diğer tarayıcılardaki davranışla daha uyumlu. Bu iki yöntem arasındaki farklar en çok iki durumda belirgindir:
- Satır içi birden çok satırlık kapsayıcı bloklar
Kesin konumlandırılmış bir kapsayıcı blok birden fazla satırı kapsıyorsa eski motor, kapsayıcı blok sınırlarını hesaplamak için yanlışlıkla satırların yalnızca bir alt kümesini kullanabilir. - Dikey yazma modları
Eski motor, dikey yazma modlarında akış dışı öğeleri varsayılan konuma yerleştirirken birçok sorun yaşıyordu. Geliştirilmiş yazma modu desteği hakkında daha fazla bilgi için sonraki bölüme bakın.
Sağdan sola (RTL) diller ve dikey yazma modları
LayoutNG, dikey yazma modlarını ve iki yönlü içerik dahil olmak üzere sağdan sola okunan dilleri desteklemek için sıfırdan tasarlanmıştır.
Çift yönlü metin
LayoutNG, Unicode Standardı tarafından tanımlanan en güncel iki yönlü algoritmayı destekler. Bu güncelleme, çeşitli oluşturma hatalarını düzeltmekle kalmaz, eşlenen parantez desteği gibi eksik özellikleri de içerir (Chromium hatası #302469'a bakın).
Ortogonal akışlar
LayoutNG, örneğin mutlak konumlandırılmış nesnelerin yerleştirilmesi ve ortogonal akış kutularının boyutlandırılması (özellikle yüzde kullanıldığında) dahil olmak üzere dikey akış düzeninin doğruluğunu artırır. W3C test paketlerindeki 1.258 testten eski düzen motorunda başarısız olan 103 test LayoutNG'de geçti.
Yerleşik boyutlandırma
Bir blok ortogonal yazma modunda alt öğeler içerdiğinde artık doğal boyutlar doğru şekilde hesaplanıyor.
Metin düzeni ve satır sonlandırma
Eski Chromium düzen motoru, metni öğe öğe ve satır satır düzenlerdi. Bu yaklaşım çoğu durumda iyi sonuç verdi ancak komut dosyalarını desteklemek ve iyi performans elde etmek için çok fazla ek karmaşıklık gerektiriyordu. Ayrıca, ölçüm tutarsızlıklarına da eğilimliydi. Bu durum, boyuta göre içerik kapsayıcılarının boyutunda ve içeriklerinde veya gereksiz satır aralarına yol açan küçük farklılıklara neden oluyordu.
LayoutNG'de metin paragraf düzeyinde düzenlenir ve ardından satırlara bölünür. Bu sayede daha iyi performans, daha yüksek kaliteli metin oluşturma ve daha tutarlı satır bölme elde edilir. En dikkat çekici farklılıklar aşağıda açıklanmıştır.
Öğe sınırları arasında birleştirme
Bazı komut dosyalarında, bitişik olduklarında belirli karakterler görsel olarak birleştirilebilir. Arapça'daki şu örneği inceleyin:
LayoutNG'de, karakterler farklı öğelerde olsa bile birleştirme artık çalışır. Farklı bir stil uygulandığında bile birleştirme işlemleri korunur. (Chromium hatası #6122'ye bakın.)
Grafem, bir dilin yazı sisteminin en küçük birimidir. Örneğin, İngilizce ve Latin alfabesini kullanan diğer dillerde her harf bir grafemdir.
Aşağıdaki resimlerde, eski düzen motorunda ve LayoutNG'de aşağıdaki HTML'nin oluşturulması gösterilmektedir:
<div>نسق</div>
<div>نس<span>ق</span></div>
İkinci harfin biçiminin nasıl değiştiğine dikkat edin
İki sürüm artık aynıdır
Çince, Japonca ve Korece (CJK) ligatürleri
Chromium, ligatürleri zaten destekler ve varsayılan olarak etkinleştirir ancak bazı sınırlamalar vardır: Birden fazla CJK kod noktasını içeren ligatürler, oluşturma optimizasyonu nedeniyle eski düzen motorunda desteklenmez. LayoutNG, bu kısıtlamaları kaldırır ve yazım dilinden bağımsız olarak ligatürleri destekler.
Aşağıdaki örnekte, Adobe SourceHanSansJP yazı tipi kullanılarak üç isteğe bağlı ligatürün oluşturulması gösterilmektedir:
MHz doğru şekilde ligatür oluşturuyor
ancak マンション ve 10点 oluşturmuyor
Üç grubun da ligatürleri beklendiği gibi oluşturuluyor
Boyut-içerik öğeleri
İçeriğe göre boyutlandırılan öğeler (satır içi bloklar gibi) için mevcut düzen motoru önce bloğun boyutunu hesaplar, ardından içerik üzerinde düzen oluşturur. Yazı tipi kerning'i agresif olduğunda olduğu gibi bazı durumlarda bu durum, içeriğin boyutu ile blok arasında uyuşmazlığa neden olabilir. LayoutNG'de, blok gerçek içeriğe göre boyutlandırıldığı için bu hata modu ortadan kaldırılmıştır.
Aşağıdaki örnekte, içeriğe göre boyutlandırılmış sarı bir blok gösterilmektedir. T ve - arasındaki boşluğu ayarlamak için kerning kullanan Lato yazı tipini kullanır. Sarı kutunun sınırları metnin sınırlarıyla eşleşmelidir.
Son T'den sonra gelen boşluğa dikkat edin
Kutunun sol ve sağ kenarlarının metnin sınırlarıyla nasıl eşleştiğine dikkat edin
Satır kaydırma
Yukarıda açıklanan soruna benzer şekilde, boyuta göre içerik bloğunun içeriği bloktan daha büyükse (daha genişse) içerik bazen gereksiz yere sarılabilir. Bu durum oldukça nadirdir ancak bazen karma yönlü içeriklerde yaşanır.
Gerekli olmayan satır sonuna ve sağdaki fazla alana dikkat edin
Kutunun sol ve sağ kenarlarının metnin sınırlarıyla nasıl eşleştiğine dikkat edin
Daha fazla bilgi
LayoutNG tarafından düzeltilen belirli uyumluluk sorunları ve hatalar hakkında daha ayrıntılı bilgi için lütfen yukarıda bağlantısı verilen sorunlara bakın veya Chromium hata veritabanında Fixed-In-LayoutNG (LayoutNG'de düzeltildi) olarak işaretlenmiş hataları arayın.
LayoutNG'nin bir web sitesinin bozulmasına neden olabileceğinden şüpheleniyorsanız lütfen hata raporu gönderin. Sorunu inceleriz.