Web sayfası yazıcı çıktıları için ince ayarlar ve faydalı bilgiler
Programlama Yorum yapılmadı »Konu Başlıkları: Web pages print-out tips & tricks, Web printing problems, CSS print-out attributes, CSS paged media
Uğraşanlar bilirler web sayfalarının yazıcı çıktıları oldukça baş ağrıtan ve detaylı bir konudur. Tarayıcıların uyumsuzluğu, görsel öğelerin kağıda dökülmesindeki problemler, sayfa ayarları ve benzeri birçok sorun vardır. Peki bu sorunları nasıl aşabiliriz kısaca bunlardan bahsetmek istiyorum.
-
Eğer web sayfanızın kullanıcılar tarafından çıktı alma amacıyla kullanılacağını düşünüyorsanız sayfaya “Yazıcıya Gönder” şeklinde bir düğme yada ibare koyarak salt çıktıya yönelik içeriğin oluşturulması için bir sayfa tasarlayabilirsiniz bu işinizi kolaylaştıracaktır.
- Web sayfanıza CSS print stilleri belirlemelisiniz. Mesela sayfanıza aşağıdaki şekilde 2 adet stil dosyası eklenmiş olsun:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Language” content=”tr” />
<title>Yazıcı Çıktıları Deneme</title>
<link href=”/styles/styles.css” rel=”stylesheet”
type=”text/css” media=”screen” />
<link href=”/styles/styles-print.css” rel=”stylesheet”
type=”text/css” media=”print” />
</head>
<body>
<div class=”utilityPanel”>
<span>Bu bölüm yazıcı çıktısında görünmeyecek.</span>
</div>
<span>Bu bölüm yazıcı çıktısında görünecek.</span>
</body>
</html>
styles.css dosyasında aşağıdaki şekilde belirtilen utilityPanel sınıfı,
.utilityPanel
{
border:solid 1px black;
display:inline;
margin:5px;
font-size:9pt;
}
styles-print.css dosyasında aşağıdaki şekilde belirtilmiştir,
.utilityPanel { display:none; }
Bu durumda yazıcı çıktınızda utilityPanel stil sınıfının tanımlandığı kontroller görüntülenmeyecektir. Bu CSS sayfanız web sayfanıza link komutuyla eklenirken media seçeneği ile belirlenmektedir. media seçeneğini daha birçok öğe için kullanabilirsiniz (örneğin: all, aural, braille, handheld, print, projection, screen, tty ,tv).
-
Web sayfasınızdaki html kontrolleri için farklı stiller belirleyebilirsiniz. Örneğin web sayfasındaki bir resim A4 çıktısına sığamayacak kadar büyük ise buna uygun bir stil ile resminizi çıktılarınızda A4 boyutuna indirgeyebilirsiniz.
#resim
{
margin:1cm;
width:27cm;
height:19cm;
}
Bu ve benzer konularda daha detaylı bilgiyi W3 CSS2 Paged Media referans bilgileri bölümünde bulabilirsiniz.
-
Web sayfanızın çıktısını alırken sayfa sonu ve başları için aşağıdaki stilleri kullanabilirsiniz.
page-break-after:always | auto | avoid | left | right;
page-break-before:always | auto | avoid | left | right;
page-break-inside:auto | avoid;
-
Yazıcı çıktılarınız için görsel öğeleri ve gereksiz arkaplan renklendirmelerini kaldırın. Sayfaya obje olarak eklenmiş Java, Flash ve diğer uygulamaların; hareketli gif resimlerinin ve buna benzer görsel öğelerin kağıda olduğu gibi dökülemeyeceğini unutmayın.
-
Javascript ile otomatik yazdırma işlemini window.print() komuduyla yapabilirsiniz.
-
Farklı tarayıcıların (msie, mozilla, opera, safari) farklı sürümlerinde yazıcı çıktılarınızın sorunsuz ve benzer olması için kontrollerinizi yapın. Çünkü birçok tarayıcı yazıcı çıktısı bir yana web sayfasını görüntülerken bile farklı sonuçlar verebilmektedir.

Son Yorumlar