- Web deneyiminin temelindeki duyarlı tasarım, yalnızca cihazları değil çıktı (baskı) ortamını desteklemeyi de hesaba katmalıdır
- Erişilebilirlik, yasal gereklilikler, seyahat gibi çeşitli nedenlerle web sayfalarının baskı kalitesi ve kullanılabilirliği hâlâ önemlidir
- CSS’in @media print, @page, mutlak birimler, page-break gibi baskıya özel özellikleriyle temiz bir düzen, uygun sayfa bölünmesi ve verimli baskı uygulanabilir
- Gezinme, alt bilgi gibi gereksiz öğeler gizlenmeli, bağlantılar ve kısaltmalar gibi unsurlar için kağıda uygun bilgi tamamlaması yapılmalıdır
- Siyah-beyaz baskı, mürekkep tasarrufu ve okunabilirlik gözetilerek renk ve arka plan kullanımı en aza indirilmeli; baskı ile ekran birbirini tamamlayacak şekilde iyileştirilmelidir
Baskı için web tasarımına neden ihtiyaç var
- Erişilebilirlik açısından, uzun süre ekrana bakamayan kişiler de basılı içerik üzerinden bilgiye ulaşabilir
- Seyahat sırasında internete erişim olmaması, kurum içi yasal ve politik saklama yükümlülükleri gibi nedenlerle, basılı materyallerin kullanım senaryoları hâlâ çeşitlidir
- EPUB gibi dijital yayın formatlarıyla da birçok ortak nokta bulunduğundan, baskı stili deneyimi yüksek ölçeklenebilirliğe sahip bir tekniktir
- İnsanlar web sitelerini gerçekten yazdırıp kullandığı için, baskı desteği genel kullanıcı deneyimi kalitesinin artmasına katkı sağlar
Print stilini uygulama yöntemleri
- CSS’te
@media print kullanılarak yalnızca baskıya özel stiller tanımlanabilir
<link rel="stylesheet" media="print">, @import url("...") print, dahili CSS içindeki @media print { ... } gibi çeşitli yöntemler vardır- Yalnızca ekran için
@media screen kullanılır
Print stilini test etme
- Edge, Chrome, Firefox, Safari gibi tarayıcılarda baskı medyası simülasyonu özelliği sunulur
- Simülasyon sonuçlarıyla gerçek baskı çıktısı farklı olabilir; çoğu tarayıcı arka planı devre dışı bırakmayı (mürekkep tasarrufu) varsayılan olarak kullanır
- Gerçek baskı ortamı dikkate alınarak test yapılması önerilir
Mutlak birimler ve @page kuralı
- CSS; cm, mm, in, pt, px gibi çeşitli mutlak birimler sunar ve bunlar gerçek baskıda hassas boyut ayarlamaları için faydalıdır
@page kuralı ile kağıt boyutu (A4, A5 vb.), kenar boşlukları, yön gibi ayarlar yapılabilir- Yazıcının baskı alanı sınırları ve tarayıcının otomatik eklediği alt bilgi/üst bilgi gibi unsurlar da dikkate alınmalıdır
Sayfa bölme ve paragraf yönetimi
- Uzun içeriklerde sayfa bölme zorunludur; break-before, break-after, break-inside özellikleriyle uygun konumlar kontrol edilebilir
- Eski sözdizimi olan
page-break-* de hâlâ uyumluluk sunar
- orphans ve widows özellikleri ile paragraf başında/sonunda tek başına kalan satırlar azaltılabilir, ancak bazı tarayıcılar bunu desteklemez
- box-decoration-break ile sayfa bölünmesi sırasında kenarlık gibi arayüz öğelerinde tutarlılık sağlanabilir
Etkileşimli öğelerin baskıya uyarlanması
- Kağıtta bağlantılar ve kısaltmalar etkileşimli olmadığından,
a[href]:after, abbr[title]:after gibi yöntemlerle URL ve ek bilgiler çıktıya eklenebilir
- Form öğeleri baskıya uygun giriş alanları olarak düzenlenmeli, kaydırma kapsayıcıları gibi yapılar
overflow: visible vb. ile genişletilmelidir
- Gezinme, alt bilgi gibi gereksiz öğeler
display: none ile kaldırılmalı ve yalnızca main bölümünün yazdırılması kontrol edilmelidir
Renk, mürekkep ve okunabilirlik
- Siyah-beyaz baskı ve mürekkep tasarrufu temel varsayım alınmalı; görsel vurgu için arka plan rengi yerine kenarlık gibi alternatifler kullanılmalıdır
print-color-adjust: exact ile yalnızca belirli öğelerde rengin korunması zorlanabilir; bu özellik yalnızca gerektiğinde kullanılmalıdır- Görseller minimum düzeyde tutulmalı; reklam gibi mürekkep tüketimi yüksek öğelerin kaldırılması önerilir
Sonuç
- Web yalnızca ekranda değil, fiziksel dünyada (kağıtta) da var olur
- CSS baskı stilleri, erişilebilirliği ve kullanıcı deneyiminin bütünlüğünü artıran temel unsurlardan biridir
- Tüm kullanıcıların içeriği farklı şekillerde tüketebilmesi için baskı desteği, modern web geliştirmede mutlaka dikkat edilmesi gereken temel bir yetkinliktir
2 yorum
Bu arada, ilgili gönderinin kendisi baskı dostu değil.
COPY TO CLIPBOARD gibi yazdırıldığında işe yaramayan arayüz öğeleri de basılıyor,
kod parçacıkları kesiliyor ve yatay kaydırma çubuğu yazdırılıyor.
Daha önce paylaşılan kağıda yazdırmak için CSS özeti yazısına da göz atın.
Bir web sayfasını kağıda yazdırmakla PDF olarak dışa aktarmak da farklı şeylerdir (mürekkep derdi olmadan renk kullanmak ya da hiperlinklerden yararlanabilmek gibi); bununla ilgili kütüphaneler arasında
paged.jsgibi seçenekler var.Kılavuz, eğitim materyali ve çalışma sayfası sayfaları hazırlarken göz önünde bulundurmak faydalı olabilir!