Bu makale 2020'de CSS baskı stilindeki en son en iyi uygulamaları yansıtacak şekilde güncellendi.
Bu yazıda, CSS ile yazıcı dostu web sayfaları oluşturma sanatını gözden geçiriyoruz.
"Web sayfalarını kim yazdırıyor?" Ağladığını duyuyorum! Nispeten birkaç sayfa kağıt üzerinde çoğaltılacaktır. Ancak şunu düşünün:
- seyahat veya konser biletleri basımı
- rota yönlerini veya zaman çizelgelerini çoğaltma
- çevrimdışı okuma için bir kopyasını kaydetme
- Bağlantının zayıf olduğu bir bölgedeki bilgilere erişim
- verileri tehlikeli veya kirli koşullarda kullanmak - örneğin bir mutfak veya fabrika
- Yazılı açıklamalar için taslak içerik çıktısı alma
- defter tutma amacıyla web makbuzlarının yazdırılması
- ekranı kullanmakta zorlanan engelli kişilere belgeler sağlamak
- bu yeni çıkıntıyı kullanmayı reddeden meslektaşınız için bir sayfa yazdırmak t'internet saçmalık.
Maalesef, sayfaları yazdırmak sinir bozucu bir deneyim olabilir:
- metin çok küçük, çok büyük veya çok soluk olabilir
- sütunlar çok dar, çok geniş veya sayfa kenar boşluklarını taşıyor olabilir
- bölümler kırpılabilir veya tamamen kaybolabilir
- gereksiz renkli arka planlara ve görüntülere mürekkep harcanır
- bağlantı URL'leri görülemiyor
- simgeler, menüler ve reklamlar asla tıklanamayacak şekilde basılır!
Birçok geliştirici web erişilebilirliğini savunur, ancak çok azı basılı web'i erişilebilir kılmayı hatırlar!
Duyarlı, sürekli medyayı herhangi bir boyut ve yöndeki sayfalı kağıda dönüştürmek zor olabilir. Bununla birlikte, CSS baskı kontrolü uzun yıllardır mümkün olmuştur ve temel bir stil sayfası saatler içinde tamamlanabilir. Aşağıdaki bölümler, sayfalarınızı yazıcı dostu hale getirmek için iyi desteklenen ve pratik seçenekleri açıklamaktadır.
Stil Sayfalarını Yazdır
CSS'yi yazdır şunlardan biri olabilir:
- Ekran stiline ek olarak uygulanır. Ekran stillerinizi temel alarak, yazıcı stilleri gerektiğinde bu varsayılanları geçersiz kılar.
- Ayrı stiller olarak uygulanır. Ekran ve baskı stilleri tamamen ayrıdır; her ikisi de tarayıcının varsayılan stillerinden başlar.
Seçim sitenize / uygulamanıza bağlı olacaktır. Şahsen ben çoğu zaman baskı temeli olarak ekran stillerini kullanırım. Ancak, radikal olarak farklı çıktılara sahip uygulamalar için ayrı stil sayfaları kullandım - örneğin ekranda bir zaman çizelgesi kılavuzu, ancak kağıt üzerinde kronolojik bir çizelge gösteren bir konferans oturumu rezervasyon sistemi.
HTML'ye bir baskı stil sayfası eklenebilir <head> standart stil sayfasından sonra:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
The print.css stiller uygulanacak ilave sayfa yazdırıldığında stillerin ekranına.
Ekranı ve yazdırma ortamını ayırmak için, main.css yalnızca ekranı hedeflemelidir:
<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
Alternatif olarak, baskı stilleri mevcut bir CSS dosyasına dahil edilebilir. @media kurallar. Örneğin:
/* main.css */
body { margin: 2em; color: #fff; background-color: #000;
} /* override styles when printing */
@media print { body { margin: 0; color: #000; background-color: #fff; } }
Herhangi bir sayıda @media print kurallar eklenebilir, bu nedenle ilişkili stilleri bir arada tutmak için bu pratik olabilir. Ekran ve yazdırma kuralları da gerekirse ayrılabilir:
/* main.css */ /* on-screen styles */
@media screen { body { margin: 2em; color: #fff; background-color: #000; } } /* print styles */
@media print { body { margin: 0; color: #000; background-color: #fff; } }
Yazıcı Çıktısının Test Edilmesi
Baskı düzeninizi her test etmek istediğinizde ağaçları öldürmek ve aşırı derecede pahalı mürekkep kullanmak gerekli değildir! Aşağıdaki seçenekler ekrandaki baskı stillerini kopyalar.
Baskı Önizleme
En güvenilir seçenek, tarayıcınızdaki baskı önizleme seçeneğidir. Bu, varsayılan kağıt boyutunuz kullanılarak sayfa sonlarının nasıl işleneceğini gösterir.
Alternatif olarak, sayfayı bir PDF'ye dışa aktararak kaydedebilir veya önizleyebilirsiniz.
Geliştirici Araçları
DevTools (F12 or Cmd / Ctrl + vardiya + I) baskı stillerini taklit edebilir, ancak sayfa sonları gösterilmez.
Chrome'da, Geliştirici Araçlarını açın ve Diğer Araçlar, Daha sonra rendering sağ üstteki üç nokta simgeli menüden. Değiştir CSS Ortamını Taklit Et için baskı o panelin altında.
Firefox'ta, Geliştirici Araçlarını açın ve Baskı ortamı simülasyonunu aç / kapat üstünde simgesi Müfettiş sekmenin stil bölmesi:
Medya Özelliğinizi Hackleyin
Varsayalım ki bir <link> yazıcı CSS'sini yüklemek için etiketini geçici olarak değiştirebilirsiniz. media özniteliğini screen:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="screen" href="print.css" />
Yine, bu sayfa sonlarını göstermez. Özniteliği geri yüklemeyi unutmayın media="print" testi bitirdikten sonra.
Gereksiz Bölümleri Kaldır
Başka bir şey yapmadan önce, gereksiz içeriği kaldırın ve daraltın. display: none;. Kağıt üzerindeki tipik gereksiz bölümler arasında gezinme menüleri, kahraman görüntüleri, üstbilgiler, altbilgiler, formlar, kenar çubukları, sosyal medya araçları ve reklam blokları (genellikle bir iframe):
/* print.css */
header, footer, aside, nav, form, iframe, .menu, .hero, .adslot { display: none;
}
Kullanmak gerekli olabilir display: none !important; CSS veya JavaScript işlevselliği öğeleri belirli UI durumlarına göre gösteriyorsa. Kullanma !important normalde tavsiye edilmez, ancak ekran varsayılanlarını geçersiz kılan temel bir yazıcı stili setinde kullanımını haklı gösterebiliriz.
Düzeni Doğrusallaştırın
Bunu söylemek bana acı veriyor ama Flexbox ve Grid, yazıcı düzenleriyle nadiren iyi çalışır herhangi bir tarayıcıda. Sorunla karşılaşırsanız, kullanmayı düşünün display: block; veya benzerini yerleşim kutularında kullanın ve boyutları gerektiği gibi ayarlayın. Örneğin, ayarlayın width: 100%; tam sayfa genişliğine yaymak için.
Yazıcı Şekillendirme
Yazıcı dostu stil artık uygulanabilir. Öneriler:
- beyaz bir arka plan üzerinde koyu metin kullandığınızdan emin olun
- okunması daha kolay olabilecek bir serif yazı tipi kullanmayı düşünün
- metin boyutunu şu şekilde ayarla:
12ptveya daha yüksek - gerektiğinde dolguları ve kenar boşluklarını değiştirin. Standart
cm,mmya dainbirimler daha pratik olabilir.
Diğer öneriler şunları içerir:
CSS Sütunlarını benimseyin
Standart A4 ve US Letter kağıt, daha uzun ve daha az okunabilir metin satırlarına neden olabilir. Kullanmayı düşünün CSS sütunları baskı düzenlerinde. Örneğin:
/* print.css */
article { column-width: 17em; column-gap: 3em;
}
Bu örnekte, en azından sütunlar oluşturulacaktır. 37em yatay boşluk. Medya sorguları ayarlamaya gerek yoktur; daha geniş kağıda ek sütunlar eklenecektir.
Arka Plan Renkleri Yerine Kenarlıklar Kullanın
Şablonunuzda daha koyu veya ters renk şemaları ile gösterilen bölümler veya açıklama kutuları olabilir:
Bu öğeleri bir kenarlıkla temsil ederek mürekkepten tasarruf edin:
Görüntüleri Kaldır veya Ters Çevir
Kullanıcılar dekoratif ve gerekli olmayan resimler ve arka planlar basmak istemeyecekler. Tüm görüntülerin gizli olduğu bir varsayılanı düşünebilirsiniz. print sınıf:
/* print.css */
* { background-image: none !important;
} img, svg { display: none !important;
} img.print, svg.print { display: block; max-width: 100%;
}
İdeal olarak, yazdırılan görüntülerde açık arka plan üzerinde koyu renkler kullanılmalıdır. CSS'de HTML gömülü SVG renklerini değiştirmek mümkün olabilir, ancak daha koyu bitmap'lere sahip olduğunuz durumlar olacaktır:
A CSS filtresi baskı stili sayfasındaki renkleri ters çevirmek ve ayarlamak için kullanılabilir. Örneğin:
/* print.css */
img.dark { filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%);
}
Sonuç:
Tamamlayıcı İçerik Ekleyin
Basılı medya genellikle ekranda gerekli olmayan ek bilgiler gerektirir. CSS content özellik, metin eklemek için kullanılabilir ::before ve ::after sözde öğeler. Örneğin, bir bağlantının URL'sini metinden sonra köşeli parantez içinde görüntüleyin:
/* print.css */
a::after { content: " (" attr(href) ")";
}
Veya yalnızca yazdırılan mesajlar ekleyebilirsiniz:
/* print.css */
main::after { content: "Copyright site.com"; display: block; text-align: center;
}
Daha karmaşık durumlar için, aşağıdaki gibi bir sınıf kullanmayı düşünün print yalnızca yazdırıldığında görünür olması gereken öğeler üzerinde. Örneğin:
<p class="print">Article printed at 1:23pm 5 September 2020. Please see https://site.com/page for the latest version.</p>
CSS:
/* hidden on-screen */
.print { display: none;
} @media print { /* visible when printed */ .print { display: block; } }
Not: Çoğu tarayıcı, yazdırılan sayfanın üstbilgisinde ve / veya altbilgisinde URL'yi ve geçerli tarihi / saati görüntüler, bu nedenle bu bilgiyi kodda oluşturmaya nadiren ihtiyaç duyulur.
Sayfa Sonları
CSS3 özellikleri break-before ve break-after bir öğeden önce ve sonra sayfa, sütun veya bölge sonlarının nasıl davranacağını kontrol etmenize olanak tanır. Destek mükemmel, ancak daha eski tarayıcılar benzerini kullanabilir page-break-before ve page-break-after özellikleri.
Aşağıdaki break-before ve break-after değerler kullanılabilir:
auto: varsayılan - bir kesmeye izin verilir ancak zorunlu değildiravoid: sayfada, sütunda veya bölgede kesintiden kaçınınavoid-page: sayfa sonundan kaçınmapage: sayfa sonunu zorlamaalways: takma adıpageleft: sayfa sonlarını zorla böylece sonraki bir sol sayfa olurright: sayfa sonlarını zorla, böylece sonraki doğru sayfa olur
Örnek: herhangi bir <h1> başlığı:
/* print.css */
h1 { break-before: always;
}
Not: sayfa sonlarını aşırı kullanma konusunda dikkatli olun. İdeal olarak, yazıcı çıktısının mümkün olduğunca az sayfa kullanması gerekir.
The break-inside (Ve daha yaşlı page-break-inside) özelliği, bir öğe içinde sayfa sonuna izin verilip verilmediğini belirtir. Yaygın olarak desteklenen değerler:
auto: varsayılan - bir kesmeye izin verilir ancak zorunlu değildiravoid: mümkünse iç kırılmadan kaçınınavoid-page: mümkünse iç sayfa sonundan kaçının
Tablolar veya resimler gibi gruplanmış verilerde sayfa sonlarından kaçınırken mümkün olduğunca az kağıt kullanabileceğiniz için bu, sayfa sonlarını belirtmeye tercih edilebilir:
/* print.css */
table, img, svg { break-inside: avoid;
}
The widows özelliği, bir blokta gösterilmesi gereken minimum satır sayısını belirtir. üst bir sayfanın. Beş satırlık metin içeren bir blok hayal edin. Tarayıcı, dördüncü satırdan sonra son satırın sonraki sayfanın en üstünde görünmesi için bir sayfa sonu yapmak ister. Ayar widows: 3; ikinci satırda veya öncesinde kesilir, böylece en az üç satır sonraki sayfaya taşınır.
The orphans mülkiyet benzer widows gösterilecek minimum satır sayısını kontrol etmesi dışında alt bir sayfanın.
The box-decoration-break özellik sayfalar arasında öğe kenarlıklarını kontrol eder. Kenarlıklı bir öğenin iç sayfa sonu olduğunda:
slice: varsayılan, düzeni böler. Üst kenarlık ilk sayfada ve alt kenarlık ikinci sayfada gösterilir.clone: kenar boşluğunu, dolguyu ve kenarlığı kopyalar. Dört kenarlığın tamamı her iki sayfada da gösterilir.
En sonunda, CSS Sayfalı Ortam (@page) vardır sınırlı tarayıcı desteği ancak belirli sayfaları hedeflemek için bir yol sağlar, böylece alternatif kenar boşlukları veya kesmeler tanımlanabilir:
/* print.css */ /* target all pages */
@page { margin: 2cm;
} /* target the first page only */
@page :first { margin-top: 6cm;
} /* target left (even-numbered) pages only */
@page :left { margin-right: 4cm;
} /* target right (odd-numbered) pages only */
@page :right { margin-left: 4cm;
}
CSS sayfa sonu özellikleri, sayfanızın içine yerleştirilebilir. screen or print stilleri sadece yazdırmayı etkiledikleri için, ancak açıklık için bunları baskı CSS'de kullanmanızı öneririm.
Sayfa sonu kontrolünün tarayıcıya bir öneriden biraz daha fazlası olduğunu unutmayın. Düzen kağıdın sınırları ile sınırlı olduğu için bir kesintinin zorlanacağı veya engelleneceği garanti edilemez.
Baskı Ağrıları
Web medyası yazdırma üzerindeki kontrol her zaman sınırlı olacaktır ve sonuçlar tarayıcılar arasında farklılık gösterebilir. Bahsedilen:
- yazıcı dostu stil sayfaları, herhangi bir siteye sonradan takılabilir
- çoğu yazıcı stili tarayıcıların çoğunda çalışır
- baskı stilleri mevcut işlevselliği etkilemeyecek veya bozmayacaktır
- geliştirme maliyetleri minimumdur.
Birkaç sayfa sonu eklemek ve gereksiz bölümleri kaldırmak, kullanıcıları memnun edecek ve sitenizi rakiplerinin üstüne çıkaracaktır. Bunu yapılacaklar listenize ekleyin!
Daha gelişmiş CSS bilgisi için kitabımızı okuyun, CSS Master, 2. Baskı.
Kaynak: https://www.sitepoint.com/css-printer-friendly-pages/?utm_source=rss
