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

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

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

這看起來可能有點奇怪,內容不是特別的web應該保持HTML和CSS格式化。 這看起來就沒那么怪當你意識到流行的電子書閱讀器格式如EPUB和手機域名是HTML和CSS。 此外,即使整個手稿或目錄不是在網站上發表,其中一些可能會。 HTML成為一個方便的格式標準化,更容易處理比擁有一切在Word文檔或傳統的桌面發布包。

CSS的網頁之間的差異和CSS打印

和概念轉變,最大的區別是,打印文件是指一個頁面一個固定大小的模型。 而在網絡上我們不斷提醒我們不知道視窗的大小,在打印每個頁面都有一個固定大小的關系,我們所做的一切。 由于這種固定的頁面大小,我們必須考慮我們的文檔頁面的集合,分頁的媒體,而非連續介質,是一個web頁面。

分頁的媒體介紹的概念,在網絡上沒有任何意義。 例如,您需要能夠生成頁碼,把章標題的利潤率,打破內容適當,以便數據并不成為與他們分離的標題。 您可能需要創建交叉引用和腳注,從您的文檔索引和表的內容。 你可以將文檔導入一個桌面出版包和手動創建所有的這一切,然而,工作就需要重做你下次更新副本。 的,這就是CSS規范被設計用于創建分頁的媒體。

因為分頁的規范設計媒體,我們不會考慮瀏覽器支持本文——它不會很多的意義。 稍后,我們將看一個用戶代理設計將HTML和CSS變成一個PDF使用這些規范。

規范

CSS的你已經知道將有用的格式打印。 專為打印,我們有“?CSS分頁媒體模塊?”和“?CSS生成內容分頁媒體模塊?”規范。 讓我們來看看這是如何工作的。

@PAGE規則

的?@page 規則允許您指定一個頁框的各個方面。 例如,您需要指定頁面的尺寸。 下面的規則指定一個默認頁面大小為5.5 - 8.5英寸。 如果你想打印一本書,也許是由按需印刷服務,然后發現大小您可以使用是很重要的。

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

除了指定的大小和長度值,也可以使用紙張大小關鍵字,如“A4”或“法律”。

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

你也可以使用一個關鍵字指定頁面的方向——“肖像”或“景觀”。

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

理解頁面模型

在進一步討論之前,我們應該理解頁面分頁模型媒體是如何工作的,因為它的行為有點不同屏幕上的東西是如何工作的。

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

(?看到大版本?)

頁面上的頁面區域空間將您的頁面內容流。 當它跑出房間,就會創建另一個頁面。 保證金框僅用于CSS-generated內容。

左和右頁面傳播

頁面模型的另一個方面是,它定義了偽類選擇器的左和右頁的文檔。 如果你看看你手頭的任何印刷書籍,您可能會看到利潤的規模和利潤率的在左邊和右邊頁面內容是不同的。

我們可以使用這些選擇器來定義不同的幅度大小對我們的頁面。

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

另外兩個偽類選擇器定義。 的?:首先 選擇目標文檔的第一頁。

@page?:first?{?}

的?:空白 偽類選擇器目標“故意留空的任何頁面。 “添加這個文本,我們可以使用生成的目標上方邊緣框的內容。

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

生成的內容和分頁的媒體

在最后一個示例中,我們使用CSS-generated內容向上方邊緣添加文本框。 你會發現,生成創建我們的書內容至關重要。 這是唯一的方法可以添加到我們的保證金盒子。 例如,如果我們想要將這本書的標題添加到左下邊緣盒右頁,我們將使用生成的內容。

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

分頁符

還“分頁媒體”的一部分規范是如何控制分頁符的信息。 如已述,一旦頁面內容填充區域,它將移動到一個新的頁面。 如果一個標題剛剛被寫入頁面,你可能最終與一個標題的頁面完成,相關內容在下一頁開始。 在印刷書籍,你會盡量避免這種情況。 其他地方你可能希望避免休息之間的中間表和圖及其說明。

一本書的新篇章?H1 標題是常見的。 迫使這個標題的開始頁面,設置?page-break-before 來?總是 。

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

為了避免一個標題后直接減免,使用?page-break-after 。

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

為了避免破壞數據和表,使用?page-break-inside 財產。

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

計數器

書都是關于編號的東西——頁面,章節,甚至數據。 我們可以通過CSS添加這些數字,拯救我們脫離不得不重編號的一切,因為我們決定說,添加一個新的圖壯志未酬身先死一個章。 我們這樣做是使用?CSS計數器?。

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

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

我們還創建了一個計數器?頁面 。 此計數器將永遠是你的文檔的總頁數。 如果你想輸出”120年第3頁,“你可以。

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

您可以創建自己的柜臺和增量和重置您需要。 要創建一個計數器,使用?counter-reset 財產,增量?counter-increment 。 下面的CSS規則將創建一個柜臺章命名?chapternum 并與每個增量?H1 ——在這本書中一個章節的開始。 然后,我們使用該計數器的值生成內容添加章節號和前一段章的實際題目。

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

我們可以做相同的數據在書中。 數字數據的一種常見方法是使用?chapternum.figurenum 。 所以,“圖3 - 2”將在第三章第二圖。 在?H1 ,我們可以重置?figurenum 為了使每一章開始從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)?".?";?}

設置字符串

再看一個印刷書籍。 當你翻閱一章,你會看到這一章的標題是印在左邊或者右邊頁面。 這聽起來可能有點奇怪,“生成內容分頁媒體”規范讓我們使用CSS實現這一目標。

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

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

當你生成分頁的媒體,每次一個?H1 發生時,寫入的內容?doctitle 然后在右上的保證金框中輸出的右頁,只有當另一個變化?H1 發生。

腳注

腳注的一部分”?CSS生成內容分頁媒體模塊?”規范。 腳注的工作方式是,您將添加的文本腳注內聯,裹在HTML標記(可能是一個跨度),與一個類來將其識別為一個腳注。 當頁面生成的內容,刪除“腳注元素”,變成一個腳注。

在CSS中,使用腳注的價值?浮動 為你的腳注類屬性來創建一個規則。

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

在你的文檔中,使用這個類來包裝任何腳注文本。

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>

腳注有一個預定義的計數器,以同樣的方式表現為頁計數器。 通常,您會希望通過1每次遞增計數器?FN 類和重置它發生在每一章的開始。

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

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

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

的?腳注標記 是前面的數字標記放置在腳注文本文檔的頁腳。 這些行為以類似的方式有序列表的數據生成CSS。

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

腳注本身被放置在頁邊,在一個特殊區域頁面的命名?@footnotes 。 你將目標和風格,面積如下。

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

交叉引用

在繼續工作之前我們學到的一切的例子,讓我們看看交叉引用。 在網絡上,我們通過添加鏈接交叉引用的東西。 在書中或其他印刷文檔,您通常會參考引用的頁碼的地方被發現。 因為頁碼可能會改變根據這本書是印刷的格式和版本之間用CSS這樣為我們省去了經歷和改變所有的數字。

我們使用另一個新屬性,?target-counter 添加這些數字。 首先創建鏈接在你的文檔中,給他們一個?href ,這是在文檔中元素的ID,您想要的目標。 同時,添加一個類來識別它們交叉引用,而不是外部鏈接,我使用?xref 。

Chapter?1a>

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

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

我們會看這種技術在實踐中當我們創建一個工作示例的目錄。

把它放在一起:一個例子的書

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

實際使用這個CSS創建一本書,你需要一個支持它的用戶代理。 目前,很少有事情實現這個規范;是最容易的一個?王子?。 一個獨立的商業許可王子是昂貴的,但是,您可以使用王子為非商業項目免費。 這意味著,如果你只是想嘗試這些技術,你可以。 另外,如果你有非商業使用這種技術,你可以用王子那些書格式。

我已經提取通道古登堡計劃從我最喜歡的一本書,?我們的貓?由哈里森堰?。 我選擇這本書是因為我喜歡貓,因為它有圖片和腳注,我可以使用它來證明格式。

你可以找到我的文件使用,再加上一個生成的PDF,結束了?GitHub上?。 如果你想嘗試CSS和構建這本書你自己,那么你將需要下載并安裝?王子?。 王子是一個命令行工具在Mac上,雖然有一個Windows的GUI,我將使用命令行,因為它真的是非常簡單的。

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

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

現在,運行王子:

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

這將創建一個PDF中?構建 文件夾命名?book.pdf 。 現在,如果你進行任何更改CSS和HTML,您可以運行看看王子是不同的。

HTML文檔

我的整個編譯“書”在一個HTML文檔。 編譯文件王子是可能的,但我發現它更簡單的只是處理一個大文檔。 之前的章節,從一開始?H1 ,我有一個div,包含封面圖像,然后對書的目錄。

目錄鏈接id章節的?H1 標題。

????