- Şirkette, HTML kullanarak kağıt/Excel üzerinde elle doldurulan formları web tabanlı bir araçla yeniden oluşturup değiştirme işi yapıldığı için bunun bir özeti hazırlanmış.
- Bir web sayfası yazdırıldığında nasıl görüneceğini kontrol etmeye yönelik temel CSS bilgileri ile bazı ipuçları ve püf noktaları anlatılıyor.
@page
@page, web sitesinin yazdırma ayarlarını tarayıcıya bildiren bir CSS kuralıdır.@page, DOM'u kapsar; web'de <html> öğesi ekran kenarlarıyla sınırlıyken, yazdırmada @page tarafından sınırlandırılır.@page ayarları, Ctrl+P'ye basıldığında tarayıcının yazdırma iletişim kutusunda görülen ayarlarla kabaca örtüşür.
@media print
- Yalnızca yazdırma sırasında uygulanan stiller yazmak için
print medya sorgusu vardır.
- Baskıda görünmemesi gereken başlık, seçenekler, kullanıcı yardım metinleri gibi öğelere
display:none eklenir.
Genişlik, yükseklik, kenar boşluğu, iç boşluk
- Kutu modelini anlamak gerekir; @page için
margin: 0 ayarlanmasının nedeni, kenar boşluklarını DOM öğelerinde yönetmeyi tercih etmektir.
<html> öğesinin tüm fiziksel kağıdı kapladığını ve kenar boşluklarının DOM içinde bulunduğunu hatırlamak daha kolaydır.
Öğe konumlandırma
- Belge tasarlanırken öğeler uygun HTML/CSS kullanılarak yerleştirilir.
- Belirli boyuttaki etiket kağıdına uyacak dikdörtgenler oluşturmak ya da özel etiketli kağıda veri yazdırmak gerektiğinde mutlak konumlandırma da kullanılabilir.
Çok sayfalı belgeler ve yinelenen öğeler
- Fatura gibi tablo verileri içeren bir yazdırma üreticisi yazarken,
<table> ikinci sayfaya taştığında tarayıcı otomatik olarak <thead> öğesini her sayfanın üst kısmına kopyalar.
- JavaScript kullanılarak tablo birkaç küçük tabloya bölünür ve böylece sayfalar oluşturulur.
Dikey/yatay mod
- Kullanıcı isterse @page kuralını geçersiz kılabilir.
- Dikey ve yatay modlar için ayrı
<style> öğeleri oluşturulup JavaScript ile aralarında geçiş yapılabilir.
Veri kaynağı
- Veriyi sayfaya getirmek için birkaç yöntem vardır; tüm veriler URL parametrelerine paketlenebilir ya da JavaScript kullanılarak API üzerinden veritabanı kayıtları alınabilir.
- Kullanıcının yazdırmadan önce küçük değişiklikler yapabilmesi için
contenteditable ayarlanabilir.
GN⁺ görüşü
- Bu yazı, web geliştiricilere yazdırma amaçlı CSS yazma konusunda faydalı bir rehber sunuyor. Özellikle web sayfalarını fiziksel belgelere dönüştürme işiyle uğraşan geliştiriciler için yararlı olacaktır.
- Yazdırma için CSS çoğu zaman göz ardı edilen bir konu olsa da, birçok şirkette hâlâ önemli belgelerin yazdırılması gerekiyor; bu yüzden bu bilgi değerlidir.
- Yazıda sunulan teknik yaklaşımın gerçek iş ortamlarında test edilip doğrulanmış olduğu anlaşılıyor ve gerçek sorunları çözmek için pratik çözümler sunuyor.
- CSS
@page kuralı ve @media print sorgusunun kullanımı, web sayfaları yazdırılırken kağıt boyutunu ve kenar boşluklarını kontrol etmek açısından önemlidir; bu, web geliştiricilerin mutlaka bilmesi gereken bir konudur.
- Yazı, yazdırma için CSS'e dair temel anlayışın ötesine geçip bunun pratikte nasıl uygulandığına ilişkin somut örnekler ve ipuçları vererek teori ile pratik arasındaki boşluğu kapatmaya yardımcı oluyor.
2 yorum
Bir dahaki sefere bununla bir oyuncak proje yapmak istiyorum.
Hacker News görüşleri
Kişisel bir web sitesinde tercih edilen baskı stillerine dair açıklama:
Pagedjs.org kullanarak kitap dizme deneyimi:
Baskı amaçlı CSS için tarayıcı desteğinin sorunları:
CSS ile baskı almanın kolaylığı:
Baskı için tarayıcı desteğinin o kadar kötü olması ki yerel uygulama yapmak gerekmesi:
CSS'in tarihi ve mevcut durumuna dair düşünceler:
HTML & CSS kullanarak fatura ve bazı e-kitaplar hazırlama yöntemi:
Tarayıcı üzerinden PDF üretmek için kullanılan paper-css'e değinme.
HTML/CSS kullanarak basılı materyal üretmenin avantajları:
CSS becerilerini kullanarak bir sosyal ağın profillerini basılı formatta sunma deneyimi: