2018'de Baskı Stil Sayfalarının Durumuna Yönelik Bir Kılavuz

Bugün, geçmişte Smashing Magazine'de zaten işlenmiş olan bir konuya, baskı stil sayfasının konusuna geri dönmek istiyorum. Bu durumda, sayfaları doğrudan tarayıcıdan yazdırmaktan bahsediyorum. Muazzam görüntülerin (ve hatta reklamların) yazdırılmasıyla hayal kırıklığına yol açabilecek bir deneyim. Ancak bazen, minimum mürekkep ve kağıt kullanarak yazıcıdan güzel optimize edilmiş bir sayfa çıktığında ve her şeyin kolayca okunabilmesini sağladığında, biraz keyif katar.

Bu makale, bu ikinci deneyimi en iyi nasıl yaratabileceğimizi keşfedecek. Web sayfalarımıza baskı stillerini nasıl dahil etmemiz gerektiğine bir göz atacağız ve bir kez basıldığında gerçekten kendilerine gelen özelliklere bakacağız. Tarayıcı desteğinin durumu ve baskı stillerimizi en iyi nasıl test edeceğimiz hakkında bilgi edineceğiz. Ardından, yazdırma ihtiyaçlarınız için bir yazdırma stil sayfası yeterli olmadığında ne yapmanız gerektiğine dair bazı ipuçları vereceğim.

Baskı Desteği İçin Önemli Yerler

Sitenize hala herhangi bir baskı stili uygulamadıysanız, sağlam bir baskı deneyiminin kullanıcılarınıza yardımcı olacağı birkaç önemli yer vardır. Örneğin, birçok kullanıcı, ayrıntıları e-posta ile gönderecek olsanız bile, satın alma veya rezervasyon yaptıktan sonra bir işlem onay sayfası yazdırmak isteyecektir.

Ziyaretçinizin bilgisayarından uzaktayken kullanmak isteyebileceği herhangi bir bilgi, aynı zamanda bir baskı stil sayfası için iyi bir adaydır. Yazdırdığım en yaygın şey tarifler. Onları iPad'ime yükleyebilirim ama yemek pişirirken buzdolabının kapısına koymak için tarifi basitçe yazdırmak genellikle daha uygundur. Bu tür diğer örnekler yol tarifleri veya seyahat bilgileri olabilir. Yurtdışına seyahat ederken ve verilere her zaman erişemediğinizde bu çıktılar çok değerli olabilir.

Her türden referans materyali de sıklıkla basılır. Birçok insan için en iyi öğrenme şekli kağıt kopyalar üzerine not alabilmektir. Yine, bilgiye çevrimdışı bir biçimde erişilebilir olduğu anlamına gelir. İnsanların neden web sayfalarını yazdırmak istediğini merak etmek bizim için kolaydır, ancak işimiz genellikle içeriği ziyaretçilerimiz için en iyi biçimde erişilebilir kılmaktır. Eğer bu en iyi format kağıda basılırsa, o zaman biz kimiz tartışacağız?

Bu Sayfa Neden Basılacak?

Yazdırma stil sayfasına dahil edilecek veya gizlenecek içeriğe karar verirken sorulacak iyi bir soru, "Kullanıcı bu sayfayı neden yazdırıyor?" Belki mutfakta yemek pişirirken uygulamak isteyecekleri ya da alışveriş yaparken yanlarına alıp malzeme almak isteyecekleri bir tarif vardır. Veya rezervasyon kanıtı olarak bir bilet satın aldıktan sonra bir onay sayfası yazdırmak isterler. Ya da belki bir makbuz veya faturanın yazdırılmasını (veya PDF'ye yazdırılmasını) isterlerse kağıt olarak veya elektronik olarak hesaplarında saklansınlar.

Basılı belgenin kullanımını göz önünde bulundurmak, içeriğinizin, kullanıcının bu çıktıya atıfta bulunduğunda içinde bulunduğu bağlamda en yararlı olan basılı bir sürümünü oluşturmanıza yardımcı olabilir.

iş akışı

Baskı stillerini CSS'imize dahil etmeye karar verdikten sonra, düzende değişiklik yaptığımızda bu değişiklikleri baskı sürümüne de dahil ettiğimizden emin olmak için bunları iş akışımıza eklememiz gerekir.

Bir Sayfaya Baskı Stilleri Ekleme

"Stil sayfasını yazdır"ı etkinleştirmek için yaptığımız şey, tarayıcıya belge yazdırıldığında bu CSS kurallarının ne için olduğunu söylemektir. Bunu yapmanın bir yöntemi, <link> öğesini kullanarak ek bir stil sayfası bağlamaktır.

 <link rel="stylesheet" media="print" href="print.css">

Bu yöntem, baskı stillerinizi daha düzenli olduğunu düşündüğünüz her şeyden ayrı tutar, ancak bunun dezavantajları vardır.

Bağlantılı stil sayfası, sunucuya ek bir istek oluşturur. Ek olarak, baskı stillerinin diğer stillerden bu güzel ve düzgün şekilde ayrılmasının bir dezavantajı olabilir. Canlı yayına geçmeden önce ayrı stilleri güncellemeye özen gösterebilirsiniz, ancak stil sayfası gözden uzak olduğu ve dolayısıyla akıldan çıktığı için acı çekebilir - siteye özellikler eklendikçe ancak baskı stillerine yansıtılmadığından sonuç olarak işe yaramaz hale gelebilir.

Baskı stillerini dahil etmenin alternatif yöntemi, duyarlı tasarımınızdaki belirli kesme noktaları için CSS'yi dahil ettiğiniz şekilde @media kullanmaktır. Bu yöntem, bir özellik için tüm CSS'yi bir arada tutar. Dar ve geniş kesme noktaları için stiller ve baskı için stiller. @supports ile Özellik Sorgularının yanı sıra, bu, bir tasarım özelliği için tüm CSS'nin bir arada tutulmasını ve sürdürülmesini sağlayan bir geliştirme yolunu teşvik eder.

 @media print { }

Ekran CSS'sinin Üzerine Yazma veya Ayrı Kurallar Oluşturma

Çoğu zaman, ekran görüntüsü için kullandığınız CSS'nin birkaç küçük ayarlamayla yazdırma için çalıştığını fark edeceksiniz. Bu nedenle, bu temel CSS'deki değişiklikler için yalnızca yazdırma için CSS yazmanız gerekir. Bir yazı tipi boyutunun veya ailesinin üzerine yazabilir, ancak diğer öğeleri CSS'de yalnız bırakabilirsiniz.

Baskı için gerçekten tamamen ayrı stiller elde etmek ve boş bir sayfa ile başlamak istiyorsanız, site stillerinizin geri kalanını screen anahtar kelimesiyle bir Medya Sorgusuna sarmanız gerekir.

 @media screen { }

Bu notta, Duyarlı Tasarımınız için Medya Sorguları kullanıyorsanız, bunları ekran için yazmış olabilirsiniz.

 @media screen and (min-width: 500px) { }

Bu stillerin yazdırırken kullanılmasını istiyorsanız, screen anahtar sözcüğünü kaldırmalısınız. Ancak pratikte, "önce mobil" çalışırsam, tek sütunlu mobil yerleşim düzeninin baskı düzenim için gerçekten iyi bir başlangıç ​​noktası olduğunu sık sık görüyorum. Yalnızca ekran için daha karmaşık düzenleri getiren medya sorgularına sahip olarak, yazdırma için yapılacak stillerin üzerine çok daha az yazmam var.

Baskı Stillerinizi Desen Kitaplıklarınıza ve Stil Kılavuzlarınıza Ekleyin

Baskı stillerinizin site tasarımının ayrılmaz bir parçası olarak görülmesine yardımcı olmak için bunları stil kılavuzunuza veya varsa site için desen kitaplığınıza ekleyin. Bu şekilde, her zaman baskı stillerinin var olduğu ve oluşturulan herhangi bir yeni desenin eşdeğer bir baskı sürümüne sahip olması gerektiği hatırlatılır. Bu şekilde, tasarım sisteminizin birinci sınıf bir vatandaşı olarak baskı stillerine görünürlük kazandırıyorsunuz.

Baskı İçin CSS'nin Temelleri

Baskı için CSS oluşturmaya gelince, muhtemelen kendinizi yaparken bulacağınız üç şey var. Yazdırıldığında alakasız olan içeriği gizlemek ve görüntülememek isteyeceksiniz. Basılı bir sürümü daha kullanışlı hale getirmek için içerik eklemek de isteyebilirsiniz. Ayrıca, yazdırma için optimize etmek üzere sayfanızın yazı tiplerini veya diğer öğelerini ayarlamak isteyebilirsiniz. Gelin bu tekniklere bir göz atalım.

İçeriği Gizleme

CSS'de içeriği gizleme ve ayrıca kutu oluşumunu önleme yöntemi, display özelliğini none değeriyle kullanmaktır.

 .box { display: none; }

display: none kullanılması, öğeyi ve tüm alt öğelerini daraltmaz. Bu nedenle, liste olarak işaretlenmiş bir resim galeriniz varsa, yazdırıldığında bunu gizlemek için yapmanız gereken tek şey ul üzerinde display: none ayarlamaktır.

Gizlemek isteyebileceğiniz şeyler, yazdırıldığında gereksiz olacak resimler, gezinme, reklam panelleri ve sayfanın ilgili içeriğe bağlantılar gösteren alanları vb. Bir kullanıcının sayfayı neden yazdırabileceğine geri dönmek, neyi kaldıracağınıza karar vermenize yardımcı olabilir.

İçerik Ekleme

Sayfa yazdırıldığında görüntülenmesi anlamlı olan bazı içerikler olabilir. Bir ekran stil sayfasında display: none şekilde ayarlanmış bazı içeriğiniz olabilir ve bunu yazdırma stil sayfanızda gösterebilirsiniz. Buna ek olarak, normalde ekrana çıkmayan içeriği ortaya çıkarmak için CSS'yi kullanabilirsiniz. Buna iyi bir örnek, belgedeki bir bağlantının URL'sidir. Ekran belgenizde, bir bağlantı normalde bağlantı metnini gösterir ve daha sonra bu yeni sayfayı veya harici web sitesini ziyaret etmek için tıklanabilir. Basılı bağlantılar izlenemediğinde, okuyucunun bağlantıyı daha sonra ziyaret etmek istemesi durumunda URL'yi görebilmesi yararlı olabilir.

Bunu CSS Tarafından Oluşturulan İçerik kullanarak başarıyoruz. Oluşturulan İçerik, belgenize CSS aracılığıyla içerik eklemenin bir yolunu sunar. Yazdırırken, bu çok kullanışlı olur.

Belgenize basit bir metin dizesi ekleyebilirsiniz. Sonraki örnek, bir wrapper sınıfıyla öğeyi hedefler ve önüne "Bu bilgilerin en son sürümü için lütfen www.mysite.com'a bakın" dizesini ekler.

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

Belgede zaten var olan şeyleri ekleyebilirsiniz, ancak buna bir örnek href bağlantısının içeriği olabilir. Üretilmiş İçeriği, href özniteliğine sahip her a örneğinden sonra ekleriz ve eklediğimiz içerik, bağlantı olacak olan href özniteliğinin değeridir.

 a[href]:after { content: " (" attr(href) ")"; }

İsterseniz dahili bağlantıları hariç tutmak için daha yeni CSS :not seçicisini kullanabilirsiniz.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Manuel Matuzovic tarafından yazılan “Baskı Stil Sayfalarını Tamamen Unuttum” makalesinde buna benzer başka faydalı ipuçları da var.

Gelişmiş Baskı Stili

Basılı sürümünüz bir sayfaya düzgün bir şekilde sığıyorsa, son bölümdeki teknikleri kullanarak nispeten basit bir şekilde bir baskı stil sayfası oluşturabilmelisiniz. Ancak, birden fazla sayfaya yazdırılan bir şeye sahip olduğunuzda (ve özellikle tablo veya şekil gibi öğeler içeriyorsa), öğelerin yeni sayfalara yetersiz bir şekilde ayrıldığını görebilirsiniz. Ayrıca sayfanın kendisiyle ilgili şeyleri de kontrol etmek isteyebilirsiniz, örneğin kenar boşluğu boyutunu değiştirmek.

CSS'nin bunları yapmanın bir yolu var, ancak göreceğimiz gibi, tarayıcı desteği düzensiz.

Sayfalı Medya

CSS Sayfalanmış Medya Belirtimi, rolünün aşağıdaki açıklamasıyla açılır.

“Bu CSS modülü, sayfalı bir sunumda parçalanmış içeriği tutmak için sayfaların nasıl oluşturulacağını ve düzenlendiğini belirtir. Sayfa kenar boşluklarını, sayfa boyutunu ve yönünü ve üstbilgileri ve altbilgileri kontrol etmek için işlevsellik ekler ve oluşturulan içeriği sayfa numaralandırmayı ve üstbilgileri/altbilgileri çalıştırmayı etkinleştirmek için genişletir."

Ekran sürekli medyadır ; daha fazla içerik varsa, onu görmek için kaydırıyoruz. Tek tek sayfalara bölündüğüne dair bir kavram yoktur. Yazdırmaya başlar başlamaz, spesifikasyonda sayfalı ortam olarak tanımlanan sabit boyutlu bir sayfa çıktısı alırız. Sayfalı Medya özelliği, içeriğin sayfalar arasında nasıl parçalandığı ile ilgilenmez, buna daha sonra geleceğiz. Bunun yerine, sayfaların özelliklerine bakar.

Tek bir sayfayı hedeflemenin bir yoluna ihtiyacımız var ve bunu @page kuralını kullanarak yapıyoruz. Bu, normal bir seçiciye çok benzer şekilde kullanılır, burada @page hedeflenir ve ardından sayfa tarafından kullanılacak CSS yazılır. Basit bir örnek, belgenizi yazdırırken oluşturulan tüm sayfalardaki kenar boşluğunu değiştirmek olabilir.

 @page { margin: 20px; }

Belirli sayfaları :left ve :right yayılmış sözde sınıf seçicilerle hedefleyebilirsiniz. İlk sayfa :first sözde sınıf seçici ile hedeflenebilir ve sayfa sonlarının neden olduğu boş sayfalar :blank ile seçilebilir. Örneğin, yalnızca ilk sayfada bir üst kenar boşluğu ayarlamak için:

 @page :first { margin-top: 250pt; }

Sol sayfanın sağ tarafında ve sağ sayfanın sol tarafında daha büyük bir kenar boşluğu ayarlamak için:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

Spesifikasyon, oluşturulan kenar boşluklarına içerik ekleyebilmeyi tanımlar, ancak bu özelliği destekleyen hiçbir tarayıcı görünmüyor. Bunu, baskıya özel kullanıcı aracılarıyla kullanım için stil sayfaları oluşturma hakkındaki makalemde, CSS ile Baskı İçin Tasarlama adlı makalemde açıklıyorum.

CSS Parçalama

Sayfalı Medya modülünün sayfa kutularının kendisiyle ilgilenirken, CSS Parçalama Modülü, içeriğin parçalayıcılar arasında nasıl bölündüğünü ayrıntılarıyla anlatır. Parçalayıcı (veya parça kabı ), parçalanmış bir akışın bir bölümünü içeren bir kaptır. Bu, taşacağı bir noktaya geldiğinde yeni bir kaba giren bir akıştır.

Parçalanmayla karşılaşacağınız bağlamlar şu anda disk belleği ortamındadır, bu nedenle yazdırırken ve ayrıca Çoklu sütun düzenini kullanırken ve içeriğiniz sütun kutuları arasında bölünür. Parçalanma spesifikasyonu, bu bağlamlarda içeriğin yeni parçalara nasıl bölündüğü konusunda size biraz kontrol sağlayan CSS özelliklerini kırmak için çeşitli kurallar tanımlar. Ayrıca, şu anda tarayıcılar arası kullanılabilir bir şey olmasa da, CSS Bölgeleri spesifikasyonunda içeriğin nasıl bozulduğunu da tanımlar.

Ve tarayıcılardan bahsetmişken, parçalanma şu anda destek açısından biraz karışık. MDN'deki her bir özellik için tarayıcı uyumluluk tabloları, desteklemek için doğru görünmektedir, ancak bu özelliklerin kullanımının dikkatli bir şekilde test edilmesi gerekecektir.

CSS2'den Daha Eski Özellikler

CSS Fragmentation Level 3'teki break-* özelliklerine ek olarak, CSS2'den gelen page-break-* özelliklerine de sahibiz. Spesifik terimlerle, daha genel oldukları ve kırılmanın gerçekleştiği farklı bağlamlarda kullanılabildikleri için, bunların yerini daha yeni break-* özellikleri almıştır. Bir sayfa ile çoklu sütun sonu arasında pek bir fark yoktur. Ancak, tarayıcı desteği açısından, eski özellikler için daha iyi tarayıcı desteği vardır. Bu, kırılmayı kontrol etmek için şu anda bunları kullanmanız gerekebileceği anlamına gelir. Daha yeni özellikleri uygulayan tarayıcılar, onları bırakmak yerine eskileri takmak için kullanılır.

Aşağıdaki örneklerde hem yeni mülkü hem de eski mülkü nerede olduğunu göstereceğim.

break-before ve break-after

Bu özellikler, kutular arasındaki boşluklarla ilgilenir ve başlangıç ​​değeri otomatik olacak şekilde aşağıdaki değerleri kabul eder. Son dört değer, çoklu sütun ve bölgeler için olmak yerine, disk belleği medyası için geçerli değildir.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

page-break-before ve page-break-after sonu özelliklerinin eski özellikleri daha küçük bir değer aralığını kabul eder.

• auto
• always
• avoid
• left
• right
• inherit

Her zaman bir h2 öğesinden önce bir sayfa kesmesine neden olmak için aşağıdakileri kullanırsınız:

 h2 { break-before: page; }

Bir paragrafın kendisinden hemen önceki başlıktan ayrılmasını önlemek için:

 h2, h3 { break-after: avoid-page; }

Daha eski page-break-* özelliği, her zaman bir h2 'den önce sayfa kesilmesine neden olur:

 h2 { page-break-before: always; }

Bir paragrafın kendisinden hemen önceki başlıktan ayrılmasını önlemek için:

 h2, h3{ page-break-after: avoid; }

MDN'de, özellikler için bilgi ve kullanım örnekleri bulun:

• mola öncesi
• ara vermek
• sayfa sonu öncesi
• sayfa sonu

break-inside

Bu özellik, kutuların içindeki sonları kontrol eder ve değerleri kabul eder:

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

Önceki iki özellikte olduğu gibi, CSS2'de değerleri kabul eden takma adlı bir page-break-inside vardır:

• auto
• avoid
• inherit

Örneğin, belki bir figure veya table var ve yarısının bir sayfada, diğer yarısının başka bir sayfada bitmesini istemiyorsunuz.

 figure { break-inside: avoid; }

Ve eski özelliği kullanırken:

 figure { page-break-inside: avoid; }

MDN'de:

• zorla içeri girmek
• sayfa sonu

Yetimler ve Dullar

Parçalanma belirtimi, orphans ve widows özelliklerini de tanımlar. orphans özelliği, paragraf gibi bir içerik iki sayfa arasında bölündüğünde ilk sayfanın alt kısmında kaç satır bırakılabileceğini tanımlar. widows özelliği, ikinci sayfanın en üstünde kaç satır bırakılabileceğini tanımlar.

Bu nedenle, bir sayfanın sonunda tek satır ve bir sonraki sayfanın başında tek satır olmasını önlemek için aşağıdakileri kullanabilirsiniz:

 p { orphans: 2; widows: 2; }

widows ve orphans özellikleri iyi desteklenir (eksik tarayıcı uygulaması Firefox'tur).

MDN'de:

• dullar
• kimsesiz çocuklar

box-decoration-break

Fragmentation modülünde tanımlanan son özellik box-decoration-break . Bu özellik, kenarlıklar, kenar boşlukları ve dolgunun içeriği kesmesi veya sarmalaması ile ilgilenir. Kabul ettiği değerler şunlardır:

• slice
• clone

Örneğin, içerik alanımda 10 piksel gri kenarlık varsa ve içeriği yazdırırsam, bunun yazdırılmasının varsayılan yolu kenarlığın her sayfada devam etmesidir, ancak yalnızca içeriğin sonuna sarılır . Bu yüzden bir sonraki sayfaya geçmeden ve devam etmeden önce bir ara veriyoruz.

box-decoration-break: clone kullanırsam, kenarlık ve herhangi bir dolgu ve kenar boşluğu her sayfada tamamlanacak ve böylece her sayfaya gri bir kenarlık verilecektir.

Şu anda, bu yalnızca Firefox'ta Sayfalı Ortam için geçerlidir ve MDN'de kutu-dekorasyon-kırılması hakkında daha fazla bilgi edinebilirsiniz.

Tarayıcı Desteği

Daha önce de belirtildiği gibi, tarayıcı desteği Paged Media ve Fragmentation için düzensizdir. Parçalanma söz konusu olduğunda, ek bir konu da, her yerleşim yöntemi için kırılmanın belirtilmesi ve uygulanması gerektiğidir. Yazdırma stil sayfalarında Flexbox veya CSS Grid kullanmayı umuyorsanız, muhtemelen hayal kırıklığına uğrayacaksınız. Flexbox ve Grid için Chrome hatalarını inceleyebilirsiniz.

Şu anda verebileceğim en iyi öneri, baskı stil sayfalarınızı oldukça basit tutmaktır. Hem eski page-break-* özellikleri hem de yeni özellikler dahil olmak üzere parçalanma özellikleri ekleyin. Ancak, bunların tüm tarayıcılarda çalışmayabileceğini kabul edin. Ayrıca, tarayıcı desteği eksikliğini can sıkıcı buluyorsanız, bu sorunları tarayıcılarda dile getirin veya daha önce dile getirilen sorunlara oy verin. Parçalanma, desteklense bile, özellikle bir komuttan ziyade bir öneri olarak ele alınmalıdır. Bir şeylerin nerede ve ne zaman kırılmasını istediğiniz konusunda o kadar net olmak mümkün ki, sayfaları düzenlemek neredeyse imkansız. Bazen yetersiz kırılma alabileceğinizi varsaymalısınız.

Yazdırma Stil Sayfalarını Test Etme

Baskı stil sayfalarını test etmek sıkıcı olabilir, tipik olarak baskı önizlemeyi kullanmayı veya tekrar tekrar bir PDF'ye yazdırmayı gerektirir. Ancak, tarayıcı DevTools bunu bizim için biraz daha kolaylaştırdı. Hem Chrome hem de Firefox, yalnızca yazdırma stillerini görüntülemenin bir yoluna sahiptir.

Firefox

Geliştirici Araç Çubuğunu açın ve komut istemine media emulate print yazın.

Krom

DevTools'u açın, üç nokta simgesine tıklayın ve ardından "Diğer Araçlar" ve "Oluşturma"yı seçin. Ardından CSS Ortamını Taklit Et altında yazdırmayı seçebilirsiniz.

Bu, yalnızca CSS mizanpajındaki, gizli veya oluşturulan içerikteki değişiklikleri test etmede yardımcı olacaktır. Parçalanma konusunda size yardımcı olamaz - bunun için yazdırmanız veya PDF'ye yazdırmanız gerekir. Bununla birlikte, yazıcıya birkaç gidiş dönüş yapmanızı sağlar ve sitenin hala sakladığınız ve doğru şeyleri gösterdiğiniz yeni bölümlerini geliştirirken kontrol etmenize yardımcı olabilir.

Yazdırma Stil Sayfası Yeterli Olmadığında Ne Yapmalı?

İdeal bir dünyada, tarayıcılar doğrudan tarayıcıdan yazdırırken Sayfalı Ortam özelliğinden daha fazlasını uygulardı ve parçalama tutarlı bir şekilde daha kapsamlı bir şekilde uygulanırdı. İlgili tarayıcılarla tarayıcıdan yazdırırken bulduğunuz hataları artırmaya kesinlikle değer. Bu şeylerin düzeltilmesini talep etmezsek, düzeltilmesi düşük önceliğe sahip olacaklardır.

Yüksek düzeyde yazdırma desteğine ihtiyacınız varsa ve CSS kullanmak istiyorsanız, şu anda Prince gibi yazdırmaya özel bir Kullanıcı Aracısı kullanmanız gerekir. Prince'e çıktı alırken kitapları biçimlendirmek için CSS'yi nasıl kullanabileceğinizi "CSS ile Baskı İçin Tasarlama" makalemde ayrıntılarıyla anlatıyorum.

Prince, web üzerinde CSS kullanarak güzel basılmış belgeler oluşturmak için sunucunuza da yüklenebilir, ancak fiyatı yüksek. Bir alternatif, Prince işleme motorunun üzerinde bir API sunan DocRaptor gibi bir sunucudur.

wkhtmltopdf gibi açık kaynaklı HTML ve CSS'den PDF'ye oluşturucular vardır, ancak çoğu yazdırma çıktısını oluşturmak için tarayıcı oluşturma motorlarını kullanır ve bu nedenle Sayfalı Ortam ve Parçalama teknik özelliklerini uygulamak söz konusu olduğunda tarayıcılarla aynı sınırlamalara sahiptir. Bir istisna, kendi uygulamasına sahip gibi görünen ve biraz farklı özellikleri destekleyen, ancak hiçbir şekilde Prince gibi tam özellikli olmasa da WeasyPrint'tir.

print-css.rocks sitesinde yazdırma için kullanıcı aracıları hakkında daha fazla bilgi bulabilirsiniz.

Diğer kaynaklar

CSS'den yazdırmanın son birkaç yılda gerçekten çok az ilerlemesi nedeniyle, Smashing Magazine ve başka yerlerdeki birçok eski kaynak hala geçerli. Bazı ek ipuçları ve püf noktaları aşağıdaki kaynaklarda bulunabilir. Yararlı bir yazdırma iş akışı veya teknik ipucu keşfettiyseniz, bunu aşağıdaki yorumlara ekleyin.

• UX Collective'den Manuel Matuzovic, "Baskı Stil Sayfalarını Tamamen Unuttum"
• "Stil Sayfası Yaklaşımlarını Yazdır: Kara Listeye Karşı Beyaz Liste", Chris Coyier, CSS-Tricks
• “Mükemmel Baskı Stil Sayfası,” Andreas Hecht, Noupe
• Smashing Magazine, Christian Krammer, “Bir Baskı Stil Sayfası Nasıl Kurulur”
• Dudley Storey, Smashing Magazine “Baskı Stil Sayfaları İçin 5 Güçlü İpucu ve Püf Noktası”