利用CSS來實現(xiàn)在線打??！

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

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

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

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

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

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

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

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

規(guī)范

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

@PAGE規(guī)則

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

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

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

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

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

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

理解頁面模型

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

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

(?看到大版本?)

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

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

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

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

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

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

@page?:first?{?}

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

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

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

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

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

分頁符

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

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

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

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

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

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

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

計數(shù)器

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

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

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

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

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

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

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

我們可以做相同的數(shù)據(jù)在書中。 數(shù)字數(shù)據(jù)的一種常見方法是使用?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)?".?";?}

設(shè)置字符串

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

我們使用一個屬性命名?繩子 在選擇我們想要的內(nèi)容。 章的標題,這將是?H1 。 的價值?繩子 是你想給這個內(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)你生成分頁的媒體,每次一個?H1 發(fā)生時,寫入的內(nèi)容?doctitle 然后在右上的保證金框中輸出的右頁,只有當(dāng)另一個變化?H1 發(fā)生。

腳注

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

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

.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>

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

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

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

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

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

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

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

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

交叉引用

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

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

Chapter?1a>

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML文檔

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

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

????