利用CSS來(lái)實(shí)現(xiàn)在線打印！

如果你提到印刷用CSS在網(wǎng)上,很多人工作?打印樣式表?是想到使用。 我們都是用來(lái)創(chuàng)建一個(gè)樣式表時(shí)要求web文檔打印出來(lái)。 這些樣式表確保打印版本是清晰的,我們不會(huì)引起用戶打印出巨大的圖像。 然而,CSS也被用于格式書(shū),目錄和小冊(cè)子,內(nèi)容可能從未被設(shè)計(jì)為一個(gè)web頁(yè)面。

在本文中,我們將看看CSS模塊創(chuàng)建了用于web瀏覽器,但處理印刷和分頁(yè)的媒體。 我將解釋如何選擇器,屬性和值,他們介紹工作。 我完成了一個(gè)工作示例,您可以使用作為一個(gè)起始點(diǎn)為自己的實(shí)驗(yàn)。 對(duì)于這個(gè)例子,我們將需要一個(gè)支持這一專(zhuān)業(yè)的用戶代理CSS。 我將使用的王子,這是一個(gè)商業(yè)產(chǎn)品。 然而,王子有一個(gè)免費(fèi)的版本,可用于非商業(yè)用途,使其很好的工具來(lái)嘗試這些例子。

為什么打印HTML和CSS有意義嗎

這看起來(lái)可能有點(diǎn)奇怪,內(nèi)容不是特別的web應(yīng)該保持HTML和CSS格式化。 這看起來(lái)就沒(méi)那么怪當(dāng)你意識(shí)到流行的電子書(shū)閱讀器格式如EPUB和手機(jī)域名是HTML和CSS。 此外,即使整個(gè)手稿或目錄不是在網(wǎng)站上發(fā)表,其中一些可能會(huì)。 HTML成為一個(gè)方便的格式標(biāo)準(zhǔn)化,更容易處理比擁有一切在Word文檔或傳統(tǒng)的桌面發(fā)布包。

CSS的網(wǎng)頁(yè)之間的差異和CSS打印

和概念轉(zhuǎn)變,最大的區(qū)別是,打印文件是指一個(gè)頁(yè)面一個(gè)固定大小的模型。 而在網(wǎng)絡(luò)上我們不斷提醒我們不知道視窗的大小,在打印每個(gè)頁(yè)面都有一個(gè)固定大小的關(guān)系,我們所做的一切。 由于這種固定的頁(yè)面大小,我們必須考慮我們的文檔頁(yè)面的集合,分頁(yè)的媒體,而非連續(xù)介質(zhì),是一個(gè)web頁(yè)面。

分頁(yè)的媒體介紹的概念,在網(wǎng)絡(luò)上沒(méi)有任何意義。 例如,您需要能夠生成頁(yè)碼,把章標(biāo)題的利潤(rùn)率,打破內(nèi)容適當(dāng),以便數(shù)據(jù)并不成為與他們分離的標(biāo)題。 您可能需要?jiǎng)?chuàng)建交叉引用和腳注,從您的文檔索引和表的內(nèi)容。 你可以將文檔導(dǎo)入一個(gè)桌面出版包和手動(dòng)創(chuàng)建所有的這一切,然而,工作就需要重做你下次更新副本。 的,這就是CSS規(guī)范被設(shè)計(jì)用于創(chuàng)建分頁(yè)的媒體。

因?yàn)榉猪?yè)的規(guī)范設(shè)計(jì)媒體,我們不會(huì)考慮瀏覽器支持本文——它不會(huì)很多的意義。 稍后,我們將看一個(gè)用戶代理設(shè)計(jì)將HTML和CSS變成一個(gè)PDF使用這些規(guī)范。

規(guī)范

CSS的你已經(jīng)知道將有用的格式打印。 專(zhuān)為打印,我們有“?CSS分頁(yè)媒體模塊?”和“?CSS生成內(nèi)容分頁(yè)媒體模塊?”規(guī)范。 讓我們來(lái)看看這是如何工作的。

@PAGE規(guī)則

的?@page 規(guī)則允許您指定一個(gè)頁(yè)框的各個(gè)方面。 例如,您需要指定頁(yè)面的尺寸。 下面的規(guī)則指定一個(gè)默認(rèn)頁(yè)面大小為5.5 - 8.5英寸。 如果你想打印一本書(shū),也許是由按需印刷服務(wù),然后發(fā)現(xiàn)大小您可以使用是很重要的。

@page?{?size:?5.5in?8.5in;?}

除了指定的大小和長(zhǎng)度值,也可以使用紙張大小關(guān)鍵字,如“A4”或“法律”。

@page?{?size:?A4;?}

你也可以使用一個(gè)關(guān)鍵字指定頁(yè)面的方向——“肖像”或“景觀”。

@page?{?size:?A4?landscape;?}

理解頁(yè)面模型

在進(jìn)一步討論之前,我們應(yīng)該理解頁(yè)面分頁(yè)模型媒體是如何工作的,因?yàn)樗男袨橛悬c(diǎn)不同屏幕上的東西是如何工作的。

頁(yè)面模型定義了一個(gè)區(qū)域,然后16周?chē)?保證金盒子?。 您可以控制頁(yè)面的大小之間的區(qū)域和邊緣的大小頁(yè)面的邊緣區(qū)和頁(yè)面本身。 表的規(guī)范解釋很好這些箱子的大小。

(?看到大版本?)

頁(yè)面上的頁(yè)面區(qū)域空間將您的頁(yè)面內(nèi)容流。 當(dāng)它跑出房間,就會(huì)創(chuàng)建另一個(gè)頁(yè)面。 保證金框僅用于CSS-generated內(nèi)容。

左和右頁(yè)面?zhèn)鞑?/h4>

頁(yè)面模型的另一個(gè)方面是,它定義了偽類(lèi)選擇器的左和右頁(yè)的文檔。 如果你看看你手頭的任何印刷書(shū)籍,您可能會(huì)看到利潤(rùn)的規(guī)模和利潤(rùn)率的在左邊和右邊頁(yè)面內(nèi)容是不同的。

我們可以使用這些選擇器來(lái)定義不同的幅度大小對(duì)我們的頁(yè)面。

@page?:left?{?margin-left:?3cm;?}?@page?:right?{?margin-left:?4cm;?}

另外兩個(gè)偽類(lèi)選擇器定義。 的?:首先 選擇目標(biāo)文檔的第一頁(yè)。

@page?:first?{?}

的?:空白 偽類(lèi)選擇器目標(biāo)“故意留空的任何頁(yè)面。 “添加這個(gè)文本,我們可以使用生成的目標(biāo)上方邊緣框的內(nèi)容。

@page?:blank?{?@top-center?{?content:?"This?page?is?intentionally?left?blank."?}?}

生成的內(nèi)容和分頁(yè)的媒體

在最后一個(gè)示例中,我們使用CSS-generated內(nèi)容向上方邊緣添加文本框。 你會(huì)發(fā)現(xiàn),生成創(chuàng)建我們的書(shū)內(nèi)容至關(guān)重要。 這是唯一的方法可以添加到我們的保證金盒子。 例如,如果我們想要將這本書(shū)的標(biāo)題添加到左下邊緣盒右頁(yè),我們將使用生成的內(nèi)容。

@page:right{?@bottom-left?{?margin:?10pt?0?30pt?0;?border-top:?.25pt?solid?#666;?content:?"My?book";?font-size:?9pt;?color:?#333;?}?}

分頁(yè)符

還“分頁(yè)媒體”的一部分規(guī)范是如何控制分頁(yè)符的信息。 如已述,一旦頁(yè)面內(nèi)容填充區(qū)域,它將移動(dòng)到一個(gè)新的頁(yè)面。 如果一個(gè)標(biāo)題剛剛被寫(xiě)入頁(yè)面,你可能最終與一個(gè)標(biāo)題的頁(yè)面完成,相關(guān)內(nèi)容在下一頁(yè)開(kāi)始。 在印刷書(shū)籍,你會(huì)盡量避免這種情況。 其他地方你可能希望避免休息之間的中間表和圖及其說(shuō)明。

一本書(shū)的新篇章?H1 標(biāo)題是常見(jiàn)的。 迫使這個(gè)標(biāo)題的開(kāi)始頁(yè)面,設(shè)置?page-break-before 來(lái)?總是 。

h1?{?page-break-before:?always;?}

為了避免一個(gè)標(biāo)題后直接減免,使用?page-break-after 。

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

為了避免破壞數(shù)據(jù)和表,使用?page-break-inside 財(cái)產(chǎn)。

table,?figure?{?page-break-inside:?avoid;?}

計(jì)數(shù)器

書(shū)都是關(guān)于編號(hào)的東西——頁(yè)面,章節(jié),甚至數(shù)據(jù)。 我們可以通過(guò)CSS添加這些數(shù)字,拯救我們脫離不得不重編號(hào)的一切,因?yàn)槲覀儧Q定說(shuō),添加一個(gè)新的圖壯志未酬身先死一個(gè)章。 我們這樣做是使用?CSS計(jì)數(shù)器?。

最明顯的地方開(kāi)始頁(yè)碼。 CSS給了我們一個(gè)預(yù)定義的頁(yè)計(jì)數(shù)器,它始于1和增量與每一個(gè)新頁(yè)面。 在你的樣式表中,您將使用此計(jì)數(shù)器作為生成內(nèi)容的價(jià)值,把頁(yè)計(jì)數(shù)器在你的一個(gè)盒子。 在下面的示例中,我們添加頁(yè)碼右頁(yè)面的右下角,左頁(yè)的左下角。

@page:right{?@bottom-right?{?content:?counter(page);?}?}?@page:left{?@bottom-left?{?content:?counter(page);?}?}

我們還創(chuàng)建了一個(gè)計(jì)數(shù)器?頁(yè)面 。 此計(jì)數(shù)器將永遠(yuǎn)是你的文檔的總頁(yè)數(shù)。 如果你想輸出”120年第3頁(yè),“你可以。

@page:left{?@bottom-left?{?content:?"Page?"?counter(page)?"?of?"?counter(pages);?}?}

您可以創(chuàng)建自己的柜臺(tái)和增量和重置您需要。 要?jiǎng)?chuàng)建一個(gè)計(jì)數(shù)器,使用?counter-reset 財(cái)產(chǎn),增量?counter-increment 。 下面的CSS規(guī)則將創(chuàng)建一個(gè)柜臺(tái)章命名?chapternum 并與每個(gè)增量?H1 ——在這本書(shū)中一個(gè)章節(jié)的開(kāi)始。 然后,我們使用該計(jì)數(shù)器的值生成內(nèi)容添加章節(jié)號(hào)和前一段章的實(shí)際題目。

body?{?counter-reset:?chapternum;?}?h1.chapter:before?{?counter-increment:?chapternum;?content:?counter(chapternum)?".?";?}

我們可以做相同的數(shù)據(jù)在書(shū)中。 數(shù)字?jǐn)?shù)據(jù)的一種常見(jiàn)方法是使用?chapternum.figurenum 。 所以,“圖3 - 2”將在第三章第二圖。 在?H1 ,我們可以重置?figurenum 為了使每一章開(kāi)始從1。

body?{?counter-reset:?chapternum?figurenum;?}?h1?{?counter-reset:?figurenum;?}?h1.title:before?{?counter-increment:?chapternum;?content:?counter(chapternum)?".?";?}?figcaption:before?{?counter-increment:?figurenum;?content:?counter(chapternum)?"-"?counter(figurenum)?".?";?}

設(shè)置字符串

再看一個(gè)印刷書(shū)籍。 當(dāng)你翻閱一章,你會(huì)看到這一章的標(biāo)題是印在左邊或者右邊頁(yè)面。 這聽(tīng)起來(lái)可能有點(diǎn)奇怪,“生成內(nèi)容分頁(yè)媒體”規(guī)范讓我們使用CSS實(shí)現(xiàn)這一目標(biāo)。

我們使用一個(gè)屬性命名?繩子 在選擇我們想要的內(nèi)容。 章的標(biāo)題,這將是?H1 。 的價(jià)值?繩子 是你想給這個(gè)內(nèi)容,然后呢?內(nèi)容() 。 然后您可以輸出,這是使用生成的內(nèi)容?字符串() 。

h1?{?string-set:?doctitle?content();?}?@page?:right?{?@top-right?{?content:?string(doctitle);?margin:?30pt?0?10pt?0;?font-size:?8pt;?}?}

當(dāng)你生成分頁(yè)的媒體,每次一個(gè)?H1 發(fā)生時(shí),寫(xiě)入的內(nèi)容?doctitle 然后在右上的保證金框中輸出的右頁(yè),只有當(dāng)另一個(gè)變化?H1 發(fā)生。

腳注

腳注的一部分”?CSS生成內(nèi)容分頁(yè)媒體模塊?”規(guī)范。 腳注的工作方式是,您將添加的文本腳注內(nèi)聯(lián),裹在HTML標(biāo)記(可能是一個(gè)跨度),與一個(gè)類(lèi)來(lái)將其識(shí)別為一個(gè)腳注。 當(dāng)頁(yè)面生成的內(nèi)容,刪除“腳注元素”,變成一個(gè)腳注。

在CSS中,使用腳注的價(jià)值?浮動(dòng) 為你的腳注類(lèi)屬性來(lái)創(chuàng)建一個(gè)規(guī)則。

.fn?{?float:?footnote;?}

在你的文檔中,使用這個(gè)類(lèi)來(lái)包裝任何腳注文本。

FootnotesFootnotes?and?notes?placed?in?the?footer?of?a?document?to?reference?the?text.?The?footnote?will?be?removed?from?the?flow?when?the?page?is?created.span>?are?useful?in?books?and?printed?documents.p>

腳注有一個(gè)預(yù)定義的計(jì)數(shù)器,以同樣的方式表現(xiàn)為頁(yè)計(jì)數(shù)器。 通常,您會(huì)希望通過(guò)1每次遞增計(jì)數(shù)器?FN 類(lèi)和重置它發(fā)生在每一章的開(kāi)始。

.fn?{?counter-increment:?footnote;?}?h1?{?counter-reset:?footnote;?}

腳注的各個(gè)部分可以有針對(duì)性的CSS偽元素。 的?footnote-call 是數(shù)字的錨文本,顯示有一個(gè)腳注。 這使用腳注計(jì)數(shù)器的值作為生成的內(nèi)容。

.fn::footnote-call?{?content:?counter(footnote);?font-size:?9pt;?vertical-align:?super;?line-height:?none;?}

的?腳注標(biāo)記 是前面的數(shù)字標(biāo)記放置在腳注文本文檔的頁(yè)腳。 這些行為以類(lèi)似的方式有序列表的數(shù)據(jù)生成CSS。

.fn::footnote-marker?{?font-weight:?bold;?}

腳注本身被放置在頁(yè)邊,在一個(gè)特殊區(qū)域頁(yè)面的命名?@footnotes 。 你將目標(biāo)和風(fēng)格,面積如下。

@page?{?@footnotes?{?border-top:?1pt?solid?black;?}?}

交叉引用

在繼續(xù)工作之前我們學(xué)到的一切的例子,讓我們看看交叉引用。 在網(wǎng)絡(luò)上,我們通過(guò)添加鏈接交叉引用的東西。 在書(shū)中或其他印刷文檔,您通常會(huì)參考引用的頁(yè)碼的地方被發(fā)現(xiàn)。 因?yàn)轫?yè)碼可能會(huì)改變根據(jù)這本書(shū)是印刷的格式和版本之間用CSS這樣為我們省去了經(jīng)歷和改變所有的數(shù)字。

我們使用另一個(gè)新屬性,?target-counter 添加這些數(shù)字。 首先創(chuàng)建鏈接在你的文檔中,給他們一個(gè)?href ,這是在文檔中元素的ID,您想要的目標(biāo)。 同時(shí),添加一個(gè)類(lèi)來(lái)識(shí)別它們交叉引用,而不是外部鏈接,我使用?xref 。

Chapter?1a>

鏈接之后,再次使用生成的內(nèi)容輸出?(x)頁(yè) ,在那里?X 是書(shū)中的位置的數(shù)量,可以找到ID。

a.xref:after?{?content:?"?(page?"?target-counter(attr(href,?url),?page)?")";?}

我們會(huì)看這種技術(shù)在實(shí)踐中當(dāng)我們創(chuàng)建一個(gè)工作示例的目錄。

把它放在一起:一個(gè)例子的書(shū)

我們看了很多不同的屬性在隔離。 他們更有意義,一旦你把它們使用通過(guò)構(gòu)建一本書(shū)。

實(shí)際使用這個(gè)CSS創(chuàng)建一本書(shū),你需要一個(gè)支持它的用戶代理。 目前,很少有事情實(shí)現(xiàn)這個(gè)規(guī)范;是最容易的一個(gè)?王子?。 一個(gè)獨(dú)立的商業(yè)許可王子是昂貴的,但是,您可以使用王子為非商業(yè)項(xiàng)目免費(fèi)。 這意味著,如果你只是想嘗試這些技術(shù),你可以。 另外,如果你有非商業(yè)使用這種技術(shù),你可以用王子那些書(shū)格式。

我已經(jīng)提取通道古登堡計(jì)劃從我最喜歡的一本書(shū),?我們的貓?由哈里森堰?。 我選擇這本書(shū)是因?yàn)槲蚁矚g貓,因?yàn)樗袌D片和腳注,我可以使用它來(lái)證明格式。

你可以找到我的文件使用,再加上一個(gè)生成的PDF,結(jié)束了?GitHub上?。 如果你想嘗試CSS和構(gòu)建這本書(shū)你自己,那么你將需要下載并安裝?王子?。 王子是一個(gè)命令行工具在Mac上,雖然有一個(gè)Windows的GUI,我將使用命令行,因?yàn)樗娴氖欠浅：?jiǎn)單的。

使用一個(gè)終端窗口,切換到你的書(shū)的目錄或從GitHub的位置你下載我的文件。

cd?/Users/username/smashing-css-books

現(xiàn)在,運(yùn)行王子:

prince?-s?pdf-styles.css?book.html?builds/book.pdf

這將創(chuàng)建一個(gè)PDF中?構(gòu)建 文件夾命名?book.pdf 。 現(xiàn)在,如果你進(jìn)行任何更改CSS和HTML,您可以運(yùn)行看看王子是不同的。

HTML文檔

我的整個(gè)編譯“書(shū)”在一個(gè)HTML文檔。 編譯文件王子是可能的,但我發(fā)現(xiàn)它更簡(jiǎn)單的只是處理一個(gè)大文檔。 之前的章節(jié),從一開(kāi)始?H1 ,我有一個(gè)div,包含封面圖像,然后對(duì)書(shū)的目錄。

目錄鏈接id章節(jié)的?H1 標(biāo)題。

????