Web sitenizi CSS ile yazdırmak için nasıl şekillendirirsiniz?

Yayınlanan: 2015-08-28

Baskının web ile ne ilgisi var?

Çoğumuz çevrimiçi yaşıyoruz ve tüm bilgilerimizi web'den alıyoruz. Her gün birçok cihazdan tüm gün bağlantıdayız. Baskının öldüğünü duymuş olabilirsiniz, ancak aslında bu kesinlikle doğru değil! Eskisi kadar sık ​​baskı yapamayabiliriz, ancak bir cihazda içerik görüntülemenin, bakmak için basılı bir kopyaya sahip olmanın yerini tutmadığı durumlar vardır. Değerli nasıl yapılır içeriğiniz, kullanılabilir kuponlarınız, yol tarifleriniz, portföy örnekleriniz veya kullanıcıların basılı olarak görmeyi tercih edeceği başka herhangi bir şey var mı? Öyleyse, web sitenizde özel yazdırma kuralları oluşturmak, kullanıcılarınızın deneyimini şekillendirmeye kesinlikle yardımcı olacaktır.

ofis yazıcısı

Baskı için tasarım nasıl yapılır

Tüm sihir, baskıya özel stiller tanımlayarak CSS'de bulunur. Diğer tüm stillerinizden ayrı olması için ayrı bir print.css stil sayfası oluşturmayı yararlı bulabilirsiniz. Tüm sitelerin bir baskı stil sayfası olmadığını unutmayın; bu, geliştirme sürecindeki ek bir özellik ve adımdır. Herhangi bir yazdırma stili belirtilmemişse, yazdırma için varsayılan stiller kullanılır. Baskı için işleri daha verimli hale getirmek için stiller tanımlayacağız, bu da tüm varsayılanları geçersiz kılacaktır.

Unutmayın: Canlı bir sitede asla değişiklik yapmamalısınız. Ücretsiz yerel geliştirme uygulamamız Local, iş akışınızı basitleştirmenize ve sitenizi güvenle denemenize yardımcı olacaktır. Bugün deneyin!

Adlandırma kuralı ve belirli stiller, kendi projenizin stil sayfasına özgü olacaktır, ancak bu kavramlar geçerli olacaktır. Temel bilgiler eklendikten sonra, web sitenizin varsayılan stil sayfasını gözden geçirin ve en iyi baskı deneyimini sağlamak için baskı stillerine ihtiyaç duyan benzersiz durumları arayın.

Renk ve düzen konuları

Çoğu insan, renkli mürekkebin maliyeti nedeniyle siyah beyaz yazdırmayı tercih eder. Ayrıca, metin siyah olduğunda ve beyaz kağıda yazdırıldığında daha yüksek bir kontrast vardır. Modern, duyarlı web tasarımında kritik oldukları için medya sorgularına muhtemelen aşinasınızdır. Baskı stilleri oluşturmak için medya sorguları da gereklidir.

Gövdedeki metni siyah yapacak ve en iyi yazdırma için herhangi bir arka plan renginden kurtulacak olan budur:

@media print {
body {
color: #000;
background: #fff;
}
}




Muhtemelen metin Times New Roman ile basılacaktır. Bunda yanlış bir şey yok, ama ya farklı bir yazı tipi belirtmek isterseniz? Varsayılan stillerinizde yaptığınız gibi, bu da basılı olarak yapılabilir. Hazır buradayken, satır yüksekliğini unutmayalım.


body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}




Gereksiz öğeleri gizleme


Muhtemelen display: none minimumda tutmak için şartlandırıldınız, ancak bu, baskı stilleriniz için tamamen uygun. Bazı öğeleri gizleyerek, kullanıcılarınıza yazdırmak için daha iyi bir yol veriyor ve basılı kopyadan gereksiz her şeyi uzak tutuyorsunuz. Amaç, tam web sayfasını değil, en önemli içeriği etkili bir şekilde yazdırmalarını sağlamaktır.
		




Gezinme, altbilgi, kenar çubuğu ve arka plan resimleri gibi gerekli olmayan sayfa öğeleri vardır, bu yüzden ekranımız burada display: none kullanışlı olmayacaktır.


@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}




Makaleler genellikle yazdırılır, bu nedenle her makalenin ayrı bir sayfada başlaması harikadır. Anahtar bilgiler birlikte gruplandırılırsa ve birden çok sayfaya yayılmazsa, kullanıcının çıktılarını düzenlemesi çok daha kolaydır.


Bunu baskı stil sayfanıza ekleyerek makaleler her zaman yeni bir sayfada başlayacaktır:
		




article {
page-break-before: always;
}




Sırasız listeleri aynı sayfada bir arada tutmak da harika bir fikirdir:


ul {
page-break-inside: avoid;
}




Bir adım daha ileri gidelim ve aynısını başlıklar, resimler, kısa alıntılar, tablolar ve diğer liste öğeleri için yapalım:


h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}




Çıktılar için aralığın gerçekten ince ayarlanabileceği yer burasıdır. Web tasarımında santimetreyi çok sık görmezsiniz, ancak sayfadaki sınırları belirlemek amacıyla harika çalışır. @page kuralı, aralığı nasıl hedefleyeceğimizdir. Bu örnek, tüm sınırların etrafında 2 cm'ye izin verecektir. Bu ölçüm, daha fazla veya daha az alana izin verecek şekilde özelleştirilebilir. Örneğin, kullanıcılarınız not almak isteyebilir ve daha büyük bir marj bırakmak yardımcı olabilir.
		




@page {
margin: 2cm;
}




Sayfaların yazdırılması ve bir klasöre yerleştirilmesi amaçlanıyorsa, diğer her sayfa için kenar boşluklarını ayarlama seçeneğinin olduğunu unutmayın. Soldaki sayfa 1, 3, 5…. sayfalar ve sağdaki sayfa 2, 4, 6…. sayfalar içindir.


@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}




İlk sayfa özelleştirmesi, belirli durumlarda işe yarar. :first page sözde sınıfını kullanarak, ilk yazdırılan sayfanın stili belirlenebilir:


@page :first {
margin: 1cm 2cm;
}




baskı-styling-02


Baskı sizi strese sokuyor mu? Projenizi bir profesyonel gibi yazdırmanız için birkaç ipucu.
		




Resim ve giriş metni fikirleri


Bunlar siteniz için geçerli olabilir veya olmayabilir, ancak yine de not etmekte fayda var.


Görüntülerin kesilmesini ve yazdırılan sayfanın kenarından taşmasını önlemek için, maksimum genişlikte bir bildirim eklemek bunu önleyecektir.


img {
max-width: 100% !important;
}




Güzel bir karşılama mesajı harika bir ektir. Basılı içerik bir süre daha buralarda olacak, bu nedenle dostça bir mesaj veya hatırlatıcı eklemek her zaman güzeldir.


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}




Artık baskıyla ilgili bazı temel bilgileri ele aldığımıza göre, bu fikirleri baskı stil sayfanıza dahil etmek çok kolay. Baskı, web'i kullandığımızda nihai olarak düşündüğümüz şey olmasa da, içeriğe nasıl erişirlerse erişsinler, kullanıcılarınıza aynı harika deneyimi sağlamanın harika bir yoludur.