利用CSS來實(shí)現(xiàn)在線打?。?/h1>

2015/4/8 0:00:00 · 稿源：傳誠信

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

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

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

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

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

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

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

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

規(guī)范

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

@PAGE規(guī)則

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

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

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

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

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

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

理解頁面模型

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

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

(?看到大版本?)

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

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

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

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

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

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

@page?:first?{?}

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

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

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

在最后一個(gè)示例中,我們使用CSS-generated內(nèi)容向上方邊緣添加文本框。 你會發(fā)現(xiàn),生成創(chuàng)建我們的書內(nèi)容至關(guān)重要。 這是唯一的方法可以添加到我們的保證金盒子。 例如,如果我們想要將這本書的標(biāo)題添加到左下邊緣盒右頁,我們將使用生成的內(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ū)域,它將移動到一個(gè)新的頁面。 如果一個(gè)標(biāo)題剛剛被寫入頁面,你可能最終與一個(gè)標(biāo)題的頁面完成,相關(guān)內(nèi)容在下一頁開始。 在印刷書籍,你會盡量避免這種情況。 其他地方你可能希望避免休息之間的中間表和圖及其說明。

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

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ù)器

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

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

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

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

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

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

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

我們可以做相同的數(shù)據(jù)在書中。 數(shù)字?jǐn)?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è)置字符串

再看一個(gè)印刷書籍。 當(dāng)你翻閱一章,你會看到這一章的標(biāo)題是印在左邊或者右邊頁面。 這聽起來可能有點(diǎn)奇怪,“生成內(nèi)容分頁媒體”規(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)你生成分頁的媒體,每次一個(gè)?H1 發(fā)生時(shí),寫入的內(nèi)容?doctitle 然后在右上的保證金框中輸出的右頁,只有當(dāng)另一個(gè)變化?H1 發(fā)生。

腳注

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

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

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

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

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)為頁計(jì)數(shù)器。 通常,您會希望通過1每次遞增計(jì)數(shù)器?FN 類和重置它發(fā)生在每一章的開始。

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

腳注的各個(gè)部分可以有針對性的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)記放置在腳注文本文檔的頁腳。 這些行為以類似的方式有序列表的數(shù)據(jù)生成CSS。

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

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

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

交叉引用

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

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

Chapter?1a>

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

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

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

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

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

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

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

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

使用一個(gè)終端窗口,切換到你的書的目錄或從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è)編譯“書”在一個(gè)HTML文檔。 編譯文件王子是可能的,但我發(fā)現(xiàn)它更簡單的只是處理一個(gè)大文檔。 之前的章節(jié),從一開始?H1 ,我有一個(gè)div,包含封面圖像,然后對書的目錄。

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

????