Chrome 76'da piyasaya sürülmesi planlanan LayoutNG, yıllarca süren bir çalışmadan çıkan yeni bir düzen motorudur. Hemen birkaç heyecan verici geliştirmenin yanı sıra ek performans kazanımları ve gelişmiş düzen özellikleri de sunulacak.
Yenilikler
- Performans yalıtımını iyileştirir.
- Latin alfabesi dışındaki alfabeler için daha iyi destek.
- Kayan öğeler ve kenar boşlukları ile 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. Düzendeki diğer temel öğeler (tablo, flexbox, ı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ülebilen etkinin minimum düzeyde olması gerekse de, LayoutNG bazı davranışları çok incelikli yöntemlerle değiştirir, yüzlerce testi düzeltir ve diğer tarayıcılarla uyumluluğu artırır. Tüm çabalarımıza rağmen, bu durum bazı site ve uygulamaların biraz farklı oluşturulmasına veya davranmasına neden olabilir.
Performans özellikleri de oldukça farklıdır. Bir bütün olarak performans eskisine benzer veya biraz daha iyi olsa da, belirli kullanım alanlarında performans iyileşmeleri görülebilirken diğerlerinin en azından kısa vadede bir miktar gerilemesi beklenmektedir.
Kayanlar
LayoutNG, diğer içeriklere göre kayan öğelerin yerleşimiyle ilgili çeşitli doğruluk sorunlarını düzelten, kayan öğelere (float: left; ve float: right;) yönelik desteği yeniden uygular.
Üst üste binmiş içerik
Eski kayan reklam uygulaması, içeriği kayan bir öğenin etrafına yerleştirirken kenar boşluklarını doğru bir şekilde hesaba katmıyordu. Bu durum, içeriğin kısmen veya tamamen kayan reklam ile çakışmasına neden oluyordu. Bu hatanın en yaygın görülen oluşumu, kaçınma mantığının bir satırın yüksekliğini hesaba katamadığı bir paragrafın yanına konumlandırıldığında ortaya çıkar. (Chromium hatası no. 861540'a bakın.)
Metin, kayan resimle sağ tarafta çakışıyor
Metin, sağdaki kayan resmin yanında konumlandırılmış
Aynı sorun tek bir satırda da ortaya çıkabilir. Aşağıdaki örnekte, kayan bir öğeden sonra negatif kenar boşluğuna sahip bir blok öğesi gösterilmektedir (#895962). Metin, kayan öğe ile üst üste gelmemelidir.
Metin, kayan turuncu öğeyle çakışıyor
Metin, kayan turuncu öğenin yanına yerleştirilmiş
Biçimlendirme bağlamı konumlandırma
Blok biçimlendirme bağlamı oluşturan bir öğe, kayan öğelerin yanında boyutlandırıldığında, eski düzen motoru, vazgeçmeden önce bloku belirli sayıda boyutlandırmaya çalışırdı. Bu yaklaşım, öngörülemez ve istikrarsız davranışlara yol açtı ve diğer uygulamalara uygun değildi. LayoutNG'de bloğu boyutlandırırken tüm kaymalar dikkate alınır. (548033 numaralı Chromium hatasına bakın.)
Mutlak ve sabit konumlandırma artık W3C özellikleriyle daha uyumlu ve diğer tarayıcılardaki davranışa daha iyi uyum sağlıyor. İkisi arasındaki farklar en çok iki durumda görülür:
- Çok satırlı satır içi bloklar
Kesinlikle konumlandırılmış bir blok birden çok satıra yayılmışsa kapsayıcı blok sınırlarını hesaplamak için satırların yalnızca bir alt kümesini hatalı şekilde kullanabilir. - Dikey yazma modları
Eski motor, dikey yazma modlarında akış dışı öğeleri varsayılan konuma yerleştirirken birçok sorunla karşılaştı. Geliştirilmiş yazma modu desteği hakkında daha fazla bilgi edinmek için sonraki bölüme bakın.
Sağdan sola (RTL) diller ve dikey yazma modları
LayoutNG, iki yönlü içerik de dahil olmak üzere dikey yazma modlarını ve RTL dillerini desteklemek için sıfırdan tasarlanmıştır.
Çift yönlü metin
LayoutNG, Unicode Standardı tarafından tanımlanan en güncel çift yönlü algoritmayı destekler. Bu güncelleme, çeşitli oluşturma hatalarını düzeltmenin yanı sıra eşli ayraç desteği gibi eksik özellikleri de içerir (302469 numaralı Chromium hatası'na bakın).
Ortogonal akışlar
LayoutNG, örneğin kesinlikle konumlandırılmış nesnelerin yerleştirilmesi ve dikey akış kutularının (özellikle yüzde kullanıldığında) boyutlandırılması dahil olmak üzere dikey akış düzeninin doğruluğunu artırır. W3C test paketlerindeki 1.258 testten LayoutNG'deki eski düzen motoru kontrolünde başarısız olan 103 testten biri.
Yerleşik boyutlandırma
Bir blok, dikey yazma modunda çocuklar içerdiğinde artık içsel boyutlar doğru şekilde hesaplanmaktadır.
Metin düzeni ve satır sonu
Eski Chromium düzen motoru, metin öğelerini öğe öğe ve satır satır düzenledi. Bu yaklaşım çoğu durumda işe yaradı, ancak komut dosyalarını desteklemek ve iyi bir performans elde etmek için çok fazla karmaşıklık gerektiriyordu. Ayrıca ölçüm tutarsızlıklarına da meyilliydi. Bu da, boyut ve içerik kapsayıcılarının boyutları ve içeriklerinin veya gereksiz satır sonlarının küçük farklarına yol açıyordu.
LayoutNG'de metin paragraf düzeyinde yerleştirilir ve daha sonra satırlara bölünür. Bu, daha iyi performans, daha yüksek kaliteli metin oluşturma ve daha tutarlı satır sonları sağlar. En önemli farklılıklar aşağıda ayrıntılı olarak açıklanmıştır.
Öğe sınırları dışına birleştirme
Bazı komut dosyalarında, belirli karakterler bitişik olduğunda görsel olarak birleştirilebilir. Arapçadan alınan şu örneğe bakın:
LayoutNG'de, artık karakterler farklı öğelerde olsa bile birleştirme yapılabilir. Farklı stil uygulandığında bile birleştirmeler korunur. (Chromium hatası no. 6122'ye bakın.)
grapheme, bir dilin yazma sistemindeki en küçük birimdir. Örneğin, İngilizcede ve Latin alfabesinin kullanıldığı diğer dillerde her harf bir grafitidir.
Aşağıdaki resimlerde, sırasıyla eski düzen motorunda ve LayoutNG'de aşağıdaki HTML'nin oluşturulması gösterilmektedir:
<div>نسق</div>
<div>نس<span>ق</span></div>
İkinci harf biçiminin nasıl değiştiğine dikkat edin
İki sürüm artık aynı
Çince, Japonca ve Korece (CJK) ligatürü
Chromium zaten bağ işaretlerini desteklese ve varsayılan olarak etkinleştirse de bazı sınırlamalar vardır: Birden fazla CJK kod noktası içeren bağ işaretleri, oluşturma optimizasyonu nedeniyle eski düzen motorunda desteklenmez. LayoutNG, bu kısıtlamaları kaldırır ve komut dosyasından bağımsız olarak bağ işaretlerini 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 bağ oluşturuyor
ancak マン䃧ン ve 10点 yapmaz
Üç grup da beklendiği gibi bağ oluşturuyor
İçeriğe göre boyutlandırma öğeleri
İçeriğe göre boyutlandırılan öğeler (satır içi bloklar gibi) için geçerli düzen motoru önce bloğun boyutunu hesaplar ve ardından içerik üzerinde düzeni gerçekleştirir. Bir yazı tipinin agresif bir şekilde ayarlanması gibi bazı durumlarda bu, içerik boyutu ve blok arasında bir uyumsuzluğa neden olabilir. LayoutNG'de, bloğun boyutu gerçek içeriğe göre belirlendiğinden bu hata modu 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 aralık değerini kullanan Lato yazı tipini kullanır. Sarı kutunun sınırları, metin sınırlarıyla aynı olmalıdır.
Son T'den sonra sondaki boşluğa dikkat edin
Kutunun sol ve sağ kenarlarının metin sınırlarıyla nasıl eşleştiğine dikkat edin
Satır kaydırma
Yukarıda açıklanan soruna benzer şekilde, boyuttan içeriğe yönelik bloğun içeriği bloktan daha büyükse (daha genişse) içerik bazen gereksiz yere kaydırılabilir. Bu durum oldukça nadir görülen bir durumdur ancak bazen karma yönlü içeriklerde görülür.
Sağda gereksiz satır sonu ve fazladan boşluğa dikkat edin
Kutunun sol ve sağ kenarlarının metin sınırlarıyla nasıl eşleştiğine dikkat edin
Daha fazla bilgi
Belirli uyumluluk sorunları ve LayoutNG tarafından düzeltilen 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 işaretli hataları arayın.
LayoutNG'nin bir web sitesinin bozulmasına yol açmış olabileceğinden şüpheleniyorsanız lütfen hata raporu gönderin.