Chrome'un HTML-in-Canvas origin trial'ı canlı DOM içeriğini 2D ve WebGL canvas'larına çiziyor

Chrome, canvas içindeki DOM içeriği için origin trial başlattı

Google, Chrome'da deneysel bir HTML-in-Canvas API'si için origin trial başlattı. Bu API, geliştiricilerin gerçek DOM elemanlarını doğrudan 2D bir canvas'a veya WebGL/WebGPU dokusuna çizmesini sağlıyor; içerik etkileşimli kalıyor ve normal tarayıcı davranışını koruyor. Trial'ı duyuran Chrome for Developers blog yazısına göre bu, Chrome 148'den 150'ye kadar sürüyor.

Hedeflediği ödünleşim

Blog yazısı, API'yi yıllardır web mimarisini şekillendiren bir karardan çıkış yolu olarak konumlandırıyor. DOM, kutudan çıktığı gibi metin yerleşimi, semantik yapı ve erişilebilirlik araçları, sayfada arama, çeviri, okuyucu modu, eklentiler, karanlık mod, yakınlaştırma ve otomatik doldurma gibi tarayıcı özellikleriyle derin entegrasyon sunar. Canvas, WebGL ve WebGPU ise grafik ağırlıklı uygulamaların — yazıda Google Docs ve Figma örnek veriliyor — performans için ihtiyaç duyduğu düşük düzey piksel kontrolünü sağlar. Bu kontrolün bedeli, canvas'a çizilen her şeyin opak piksellere dönüşmesidir: metin seçimi veya duyarlı metin yerleşimi gibi temel davranışların elle yeniden inşa edilmesi gerekir — yazının belirttiğine göre bu, bundle boyutunu ciddi biçimde artırabilir — ve tarayıcı entegrasyonları tamamen çalışmaz hale gelir.

API'nin koruduğu şeyler

HTML-in-Canvas ile geliştiriciler markup'ı canvas elemanının içine yerleştirir ve transform'unu senkronize tutar; böylece render edilen arayüz sıradan DOM gibi davranır. Blog, devredilen yetenekleri şöyle listeliyor:

• CSS stilleri uygulanmış çok satırlı ve çift yönlü metin dahil metin yerleşimi ve biçimlendirme
• Yerleşik, özelleştirilebilir form kontrolleri
• Metin seçimi, kopyala/yapıştır ve sağ tık bağlam menüleri
• Erişilebilirlik ağacına açıklık, böylece yardımcı teknolojiler arayüzü normal HTML olarak çözümleyebilir
• Tarayıcının eşleşmeleri WebGL dokuları içinde vurguladığı sayfada arama
• Web tarayıcı örümcekleri tarafından indekslenebilirlik ve AI ajanları tarafından okunabilirlik
• Tarayıcı eklentileriyle yerleşik entegrasyon
• DevTools incelemesi; inspector'da bir CSS stilini değiştirmek 3D dokuyu anında güncelliyor

Önerilen kullanım senaryoları arasında karmaşık arayüz bileşenlerini çalışma alanına render eden canvas odaklı büyük uygulamalar, erişilebilirliği iyileştirirken bundle ağırlığını azaltmak ve 3D sahneler sayılabilir: pazarlama siteleri, WebXR deneyimleri ve gerçekten etkileşimli DOM arayüzü gömen oyunlar — kopyala-yapıştır destekleyen oyun içi bir terminal veya gerçek metinden oluşan 3D bir kitap gibi.

Nasıl çalışıyor

Blog üç aşama tanımlıyor. Birincisi kurulum: canvas etiketine layoutsubtree özniteliği eklenir, böylece tarayıcı iç içe yerleştirilen içerikten haberdar olur ve onu erişilebilirlik ağaçlarına açabilir; ayrıca bulanık çıktıyı önlemek için canvas grid'i, ResizeObserver ve devicePixelContentBoxSize kullanılarak device pixel ratio ile eşleşecek şekilde boyutlandırılır.

İkincisi, render etme. 2D bir context, drawElementImage metodunu ortaya koyar; canvas paint event'i içinde çağrılır ve eleman her yeniden çizildiğinde — örneğin metin vurgulaması veya kullanıcı girişi sırasında — tetiklenir. WebGL, texImage2D'nin bir benzeri olan ama kaynak olarak DOM elemanı kabul eden texElementImage2D metodunu alır; WebGPU ise device queue üzerinde, copyExternalImageToTexture'a benzer copyElementImageToTexture metodunu alır.

Üçüncüsü, senkronizasyon: render çağrısı, elemanın CSS transform özelliğine uygulanması gereken bir transform döndürür. Bu, tarayıcıya elemanın ekranda fiziksel olarak tam olarak nerede durduğunu söyler; böylece tıklama ve hover gibi olaylar, render edilen çıktı içindeki doğru konuma eşlenir.

Denemek için

Trial, Chrome 148'den 150'ye kadar sürüyor. Geliştiriciler chrome://flags/#canvas-draw-element bayrağını etkinleştirerek Chrome Canary 149 veya sonrasıyla yerel olarak deneyebilir ya da API'yi sitelerindeki diğer kullanıcılar için etkinleştirmek üzere origin trial'a kaydolabilir.

Neden önemli

Canvas ağırlıklı uygulamalar, bugün web platformunun büyük bir kısmına fiilen görünmez durumda: arayüz piksellere düzleştirildiği anda ekran okuyucular, arama örümcekleri, eklentiler ve sayfada arama çalışmaz hale geliyor; editörler ve tasarım araçları gibi uygulamalar da canvas içinde metin işlemeyi yeniden inşa etmek için ciddi mühendislik emeği harcıyor. HTML-in-Canvas gönderilirse, bu yeniden uygulama kategorisini tamamen ortadan kaldırabilir ve yüksek performanslı grafik uygulamalarını varsayılan olarak erişilebilir kılabilir. Blog yazısının AI ajanlarının 2D ve 3D sahnelerde render edilen metni okuyabileceği yönündeki açık vaadi de zamanın işareti — ajan trafiği büyüdükçe yalnızca pikselden oluşan arayüz büyüyen bir yük haline geliyor. Şimdilik bu deneysel bir origin trial; bu yüzden geliştiriciler API yüzeyinin kararlı bir sürümden önce değişmesini beklemeli.