HTML'den PDF'e Önizleme

HTML içeriğini doğrudan tarayıcı içinde PDF'ye dönüştürmek, tarayıcının yerel DOM ve CSS işleme motorundan yararlanan gelişmiş bir mimari gerektirir.

Sistemimiz, girilen HTML ve CSS kodunu ana uygulamadan tamamen yalıtılmış bir korumalı `iframe` içinde derler. Bu korumalı alan, harici zararlı betiklerin çalışmasını engellerken, CSS kurallarının tam bir sadakatle hesaplanmasını sağlar.

Ardından motor, hesaplanan DOM öğelerini yüksek çözünürlüklü (300 DPI eşdeğeri) bir OffscreenCanvas üzerine çizer veya vektörel yazdırma motorunu kullanarak metin ve vektör yollarını doğrudan PDF içerik akışlarına (`/Contents`) aktarır.

Web sayfaları doğası gereği dikeyde kesintisiz kayan bir düzene sahipken, PDF belgeleri kesin fiziksel sayfa sınırlarına (A4, Letter) ve katı kenar boşluklarına sahip bağımsız sayfa tuvalleri gerektirir. Bu boşluğu doldurmak, W3C CSS Sayfalı Medya Modülü Seviye 3 standartlarına derinlemesine destek gerektirir.

Motorumuz kritik CSS yazdırma yönergelerine tam uyum sağlar:

1. @page Kuralı: Belgenin fiziksel sayfa boyutunu ve kenar boşluklarını yapılandırır (örneğin '@page { size: A4 portrait; margin: 20mm; }').

2. Sayfa Sonu Denetimi: Geliştiriciler, belirli bir bölümün daima yeni bir sayfada başlamasını zorlamak için 'break-before: page' veya 'page-break-before: always' kurallarını ekleyebilir.

3. İçerik Bölünmesini Engelleme: Tablolara, kartlara ve grafiklere 'break-inside: avoid' veya 'page-break-inside: avoid' kurallarını uygulamak, öğelerin sayfa kesim çizgisi tarafından ortadan ikiye bölünmesini kesin olarak engeller.

Bu kuralları akıllıca yorumlayarak dönüştürücümüz, rastgele doğranmış tuval dilimleri yerine yapılandırılmış, yayına hazır çok sayfalı belgeler üretir.

Tarayıcı içi dönüştürücülerde karşılaşılan en yaygın sorunlardan biri, harici Google Fonts veya harici görsel bağlantılarının tarayıcının CORS (Cross-Origin Resource Sharing) güvenlik politikaları nedeniyle engellenmesidir.

Aracımız otomatik varlık satır içi aktarımı (asset inlining) sağlar. CSS `@import` ve `@font-face` kurallarını ayrıştırarak yazı tipi ikili dosyalarını base64 Data URI olarak (`src: url(data:font/woff2;base64,...)`) koda gömer. Benzer şekilde harici görsellerin base64 dizeleri veya satır içi SVG olarak yerleştirilmesini teşvik eder. Bu sayede tipografi, kurumsal marka logoları ve grafikler hiçbir harici ağ bağımlılığı olmadan her platformda eksiksiz görüntülenir.

Modern web siteleri ekran genişliğine göre uyum sağlayan duyarlı CSS medya sorguları (`@media screen and (max-width: 768px)`) kullanır. Eğer bir HTML parçası rastgele bir kapsayıcıda işlenirse, masaüstü görünümü yerine mobil hamburger menülü dar bir düzene daralabilir.

Aracımız dinamik görünüm alanı emülasyonu içerir. İşleme görünüm alanını standart masaüstü genişliklerine (örneğin 1024px veya 1200px) ya da standart baskı genişliğine (96 DPI A4 için 794px) sabitleyebilirsiniz. Motor ayrıca `@media print` kurallarını emüle ederek uygulamanızda tanımlanan baskı stillerini bire bir önizlemenizi sağlar.

Sunucu taraflı bulut API'lerini kullanarak PDF faturaları, finansal tablolar, tıbbi özetler veya tescilli şirket içi panolar oluşturmak ciddi bir uyumluluk riskidir. Hassas müşteri verilerini veya şirket içi URL'leri üçüncü taraf mikro hizmetlere göndermek GDPR, KVKK ve kurumsal güvenlik politikalarını ihlal eder.

2run.tools bu zafiyetleri tamamen ortadan kaldırır. Tüm HTML ayrıştırma, CSS stil hesaplama, tuval işleme ve PDF bayt serileştirme döngüsü %100 yerel olarak tarayıcınızın bellek korumalı alanında yürütülür. HTML kaynak kodunuz ve finansal verileriniz asla bilgisayarınızdan ayrılmaz; hassas kurumsal işlemler için mutlak hava boşluklu güvenlik sağlanır.

Dijital tarayıcı görüntülemesi ile fiziksel baskı yayıncılığı arasındaki en kritik fark tipografik hassasiyettir. Web tarayıcıları eksik glifleri sıklıkla sistem yedek fontlarıyla ikame eder veya harf oranlarını bozan sahte kalınlaştırma (faux-bold) ve yapay italikleştirme uygular. Yasal ve kurumsal PDF yayıncılığında bu sapmalar amatör bir izlenim yaratır.

Motorumuz tam OpenType mizanpaj motoru emülasyonu içerir. Özel web yazı tipleri (WOFF2, TTF, OTF) HTML kaynağınıza gömüldüğünde; isteğe bağlı bitişik harfler (ligatures), karakter aralığı çiftleri (kerning), küçük büyük harfler (small caps) ve tablosal rakamlar gibi gelişmiş OpenType özellikleri alt piksel düzeyinde değerlendirilir. Finansal raporlarda `font-variant-numeric: tabular-nums` kullanımı, çok sütunlu finansal rakamların tüm sayfalarda ondalık nokta hizasında kusursuz dizilmesini sağlar.

Ayrıca dönüştürme işlemi tarayıcınızın güvenli korumalı alanında yerel olarak gerçekleştiğinden, ticari lisanslı web fontları kendi makinenizde izole kalır. Ticari yazı tipi dosyalarınızın harici bulut sunucularına sızması veya kurumsal lisans ihlali riski sıfıra indirilir.

Modern HTML belgeleri; JavaScript ile çizilen tuval grafikleri (Chart.js, ApexCharts, D3.js), duyarlı veri tabloları ve doldurulabilir form girişleri (`<input>`, `<textarea>`, `<select>`) gibi dinamik etkileşimli kontroller barındırır. Bu dinamik durumları doğru yakalamak, yalnızca statik HTML dizesini ayrıştırmak yerine canlı DOM durumunu değerlendirmeyi gerektirir.

Aracımız mizanpaj anlık görüntüsünü almadan önce JavaScript yürütmesinin ve istemci taraflı grafik animasyon döngülerinin tamamlanmasını bekler. Tüm form kontrollerinin mevcut değerlerini ayıklar, animasyonlu tuval katmanlarını statik bitmap'lere dondurur ve etkileşimli panolarınızın gerçek zamanlı durumunu yansıtan yüksek çözünürlüklü çok sayfalı bir PDF derler.