前言

如果你對(duì)許多從事網(wǎng)頁(yè)開(kāi)發(fā)的人提起打印樣式，他們第一反映會(huì)想到使用打印CSS。當(dāng)網(wǎng)頁(yè)文檔需要被打印時(shí)，我們已經(jīng)習(xí)慣于創(chuàng)建一個(gè)打印樣式表。這些樣式表確保打印版本清晰并且保證用戶不會(huì)打印出巨幅圖像。然而，CSS也被用來(lái)排版圖書，商品目錄以及宣傳冊(cè) - 這些內(nèi)容在以前可能從來(lái)沒(méi)有被設(shè)計(jì)成網(wǎng)頁(yè)。

在這篇文章里，我們將探索一些已有的CSS模塊，它們不是在網(wǎng)頁(yè)瀏覽器中使用，而是為了解決打印和分頁(yè)的問(wèn)題。我將解釋選擇器，屬性和值的作用。最后我會(huì)提供一個(gè)實(shí)際例子，你可以把它作為自己試驗(yàn)的基礎(chǔ)。對(duì)于這個(gè)例子，我們需要支持這些特殊CSS。我正在用的是Prince，它是一個(gè)商業(yè)軟件。然而，Prince有針對(duì)非商業(yè)使用的免費(fèi)版本，是實(shí)驗(yàn)這些例子的好工具。

為什么HTML和CSS對(duì)印刷有意義

非要用HTML去維護(hù)和用CSS去排版那些不是特意為網(wǎng)頁(yè)設(shè)計(jì)的內(nèi)容似乎有點(diǎn)奇怪。但是當(dāng)你意識(shí)到流行的電子閱讀格式例如EPUB和MOBI在底層是由HTML和CSS組成時(shí)就沒(méi)那么奇怪了。另外，即便手稿或目錄沒(méi)有被整個(gè)發(fā)布到網(wǎng)頁(yè)上，一些類似的東西可能會(huì)。HTML成為了一個(gè)方便的格式化標(biāo)準(zhǔn)，比起把所有東西都放在一個(gè)Word文檔或者傳統(tǒng)的桌面出版包中更容易處理。

網(wǎng)頁(yè)CSS和打印CSS的區(qū)別

最大的區(qū)別和觀念的轉(zhuǎn)變?cè)谟谟∷⑽臋n需要一個(gè)固定大小的頁(yè)面模型。在網(wǎng)頁(yè)上我們不斷被提醒我們不知道視窗尺寸，在印刷中每個(gè)固定尺寸的頁(yè)面承載了我們所有的東西。因?yàn)轫?yè)面尺寸固定，我們需要把文檔考慮成網(wǎng)頁(yè)的集合，即分頁(yè)媒體，而不是連續(xù)媒體即網(wǎng)頁(yè)。

分頁(yè)媒體的內(nèi)容在網(wǎng)頁(yè)上毫無(wú)意義。例如，你需要能生成頁(yè)碼，給章節(jié)標(biāo)題添加邊距，適當(dāng)劃分內(nèi)容并保證圖形和說(shuō)明不脫鉤。也許你要?jiǎng)?chuàng)建交叉參考和腳注，索引和文檔目錄。你可以把文檔引入桌面發(fā)布包并且手動(dòng)創(chuàng)建這些內(nèi)容，然而，當(dāng)你下次更新復(fù)本時(shí)需要重復(fù)這些工作。這時(shí)候CSS就起到作用，它的規(guī)則是為創(chuàng)建分頁(yè)媒體而設(shè)計(jì)。

因?yàn)橐?guī)則是為分頁(yè)媒體而設(shè)計(jì)，在這篇文章里我們不考慮瀏覽器兼容性 - 這沒(méi)多大意義。稍后，我們會(huì)看一個(gè)被設(shè)計(jì)成使用特定規(guī)則把HTML和CSS轉(zhuǎn)換成PDF的用戶代理。

規(guī)則

你已知的大多數(shù)CSS在印刷品排版中有效。在印刷品中比較特別的是，我們有“CSS分頁(yè)媒體模塊”和“CSS分頁(yè)媒體模塊生成內(nèi)容”規(guī)則。讓我們看一下這些規(guī)則如何生效。

@PAGE 規(guī)則

@page規(guī)則允許你指定頁(yè)面盒子的許多方面。例如，你想要指定頁(yè)面尺寸。下面這條規(guī)則指定默認(rèn)頁(yè)面尺寸是5.5*8.5英尺。如果你想打印一本書，也許通過(guò)按需打印，找到可用尺寸很重要。

@page {
  size: 5.5in 8.5in;
}

除了可以用長(zhǎng)度值聲明尺寸，你還可以使用紙質(zhì)尺寸關(guān)鍵字，例如"A4"或““legal”。

@page {
  size: A4;
}

你也可以使用關(guān)鍵字來(lái)指定頁(yè)面方向 - ““portrait””或“landscape”。

@page {
  size: A4 landscape;
}

理解頁(yè)面模塊

進(jìn)一步討論前，我們需要理解分頁(yè)媒體運(yùn)行的頁(yè)面模塊，因?yàn)樗瓦\(yùn)行在屏幕上的內(nèi)容表現(xiàn)上有一些不同。

頁(yè)面模塊定義了一塊頁(yè)面區(qū)域和16個(gè)環(huán)繞的邊距盒。你可以控制頁(yè)面區(qū)域的尺寸以及頁(yè)面區(qū)域邊界與頁(yè)面自身結(jié)尾之間邊距的尺寸。規(guī)范中的表格很好得解釋了如何定義這些盒子尺寸。

頁(yè)面區(qū)域是頁(yè)面上一塊頁(yè)面內(nèi)容流動(dòng)的空間。當(dāng)超出了它的容納范圍，就會(huì)創(chuàng)建另一個(gè)頁(yè)面。邊界盒只在CSS生成的內(nèi)容上使用。

頁(yè)面左邊距和右邊距

頁(yè)面模塊的另一方面是它定義了偽類選擇器來(lái)選擇文檔的偶數(shù)或奇數(shù)頁(yè)。如果你看一下手邊的任何印刷書，你會(huì)發(fā)現(xiàn)邊距尺寸和邊距內(nèi)容在左和右邊邊距上是不一樣的。

我們可以用這些選擇器給頁(yè)面定義不同的邊距尺寸。

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

規(guī)則還定義了兩個(gè)偽類選擇器。:first選擇器選中是文檔的第一頁(yè)。

@page :first {

}

:blank偽類選擇器選中任何“故意左側(cè)留白”的頁(yè)面。要添加這樣的文字，我們可以使用目標(biāo)是邊距盒頂部中心的生成內(nèi)容。

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

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

在上個(gè)例子中，我們使用CSS生成內(nèi)容在邊距盒的頂部中心添加文字。你會(huì)發(fā)現(xiàn)，生成內(nèi)容在創(chuàng)建書的時(shí)候至關(guān)重要。這是把東西添加到邊距盒上的唯一方式。例如，如果我們想把書名添加到奇數(shù)頁(yè)邊距盒的左下角，我們會(huì)用生成內(nèi)容來(lái)實(shí)現(xiàn)。

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

分頁(yè)符

另外“頁(yè)面媒體”部分特殊之處在于如何控制分頁(yè)。像描述的那樣，一旦內(nèi)容充滿頁(yè)面區(qū)域，它會(huì)移到新頁(yè)面上。如果標(biāo)題正好才寫到頁(yè)面上，可能頁(yè)面會(huì)以標(biāo)題結(jié)束，相關(guān)內(nèi)容在下一頁(yè)開(kāi)始。在印刷書中，你會(huì)試圖避免這種情況。其他你想要避免斷開(kāi)的地方還有表格中間以及圖形和對(duì)應(yīng)的說(shuō)明間。

通常用h1標(biāo)題來(lái)開(kāi)始一本書的新章節(jié)。要強(qiáng)制標(biāo)題總是處于頁(yè)面開(kāi)頭，把page-break-before設(shè)置為always。

h1 {
  page-break-before: always;
}

為了避免標(biāo)題后立即斷頁(yè)，使用page-break-after。

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

為了避免斷開(kāi)圖像和表格，使用page-break-inside屬性

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

計(jì)數(shù)器

書總是跟數(shù)字相關(guān)-頁(yè)，章節(jié)，甚至圖像。我們可以通過(guò)CSS添加這些數(shù)字，避免由于我們打算在章節(jié)中添加一個(gè)新的圖像而把所有東西重新編號(hào)。我們使用CSS計(jì)數(shù)器來(lái)實(shí)現(xiàn)。

首先開(kāi)始的地方顯然是頁(yè)碼。CSS提供了預(yù)定義頁(yè)面計(jì)數(shù)器；它從1開(kāi)始并且每新的一頁(yè)加1。在你的樣式表中，你會(huì)使用這些計(jì)數(shù)作為生成內(nèi)容的值，把頁(yè)數(shù)放到邊距盒的其中之一。在下面的例子中，我們把頁(yè)碼放在奇數(shù)頁(yè)的右下角和偶數(shù)頁(yè)的左下角。

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

我們還創(chuàng)建了一個(gè)叫做pages的計(jì)數(shù)器。這個(gè)計(jì)數(shù)器的值總是文檔總頁(yè)數(shù)。如果你想輸出“120頁(yè)中的第3頁(yè)”，你可以像下面那樣做。

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

你可以創(chuàng)建自己命名的計(jì)數(shù)器和增量并且按需要重置它們。要?jiǎng)?chuàng)建一個(gè)計(jì)數(shù)器，使用counter-reset屬性，通過(guò)counter-increment增加。下面的CSS規(guī)則會(huì)為章節(jié)創(chuàng)建一個(gè)叫chapternum的計(jì)數(shù)器并且每出現(xiàn)h1增加-在這本書中作為每個(gè)章節(jié)的開(kāi)始。隨后我們使用計(jì)數(shù)器的值在生成內(nèi)容中章節(jié)的實(shí)際標(biāo)題前添加章數(shù)和時(shí)間。

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

書中圖像的計(jì)數(shù)我們也可以用同樣方法。通常給圖像計(jì)數(shù)的方法是使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅圖。在h1里，我們可以重置figurenum讓它每章都從1開(kāi)始。

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è)置字符

讓我們?cè)倏匆幌掠∷D書。當(dāng)你翻閱一章，你會(huì)看到章節(jié)標(biāo)題印在偶數(shù)或奇數(shù)頁(yè)上。也許聽(tīng)起來(lái)很奇怪，“頁(yè)面媒體生成內(nèi)容”規(guī)范讓我們通過(guò)CSS來(lái)實(shí)現(xiàn)。

我們?cè)谙胍@取內(nèi)容的選擇器中使用string-set屬性來(lái)實(shí)現(xiàn)，這將成為h1。string-set的值是你想給這段內(nèi)容取得名字然后使用content()。隨后你可以用string()作為生成內(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è)面媒體生成后，每當(dāng)出現(xiàn)h1，內(nèi)容被寫入doctitle然后輸出到右側(cè)頁(yè)的右上邊距盒中，只有當(dāng)另一個(gè)h1出現(xiàn)才發(fā)生改變。

腳注

腳注是“CSS頁(yè)面媒體模型生成內(nèi)容”規(guī)范的一部分。腳注原理是在腳注行內(nèi)添加文本，包裹在HTML標(biāo)簽中（很可能是span），用一個(gè)類定義它為腳注。當(dāng)頁(yè)面生成時(shí)，這個(gè)“腳注元素”的內(nèi)容會(huì)被移除然后轉(zhuǎn)換成腳注。

在CSS文件中，使用腳注的float屬性值來(lái)給腳注類創(chuàng)建規(guī)則。

.fn {
  float: footnote;
}

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

<p>Footnotes<span class="footnotes">Footnotes 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>著作權(quán)歸作者所有。

腳注有一個(gè)預(yù)定義計(jì)數(shù)器表現(xiàn)和頁(yè)面計(jì)數(shù)器一樣。通常，你想讓計(jì)數(shù)器每次fn類出現(xiàn)時(shí)增加1并且在每一章開(kāi)始時(shí)被重置。

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

腳注的不同部分可以用CSS偽元素來(lái)選中。footnote-call是文本中指示腳注的數(shù)值錨。它使用腳注計(jì)數(shù)器的值作為生成的內(nèi)容。

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

footnote-marker是放置在文檔底部腳注前的一個(gè)數(shù)值標(biāo)記。原理和CSS中生成有序列表的數(shù)值類似。

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

腳注處于邊界內(nèi)，在頁(yè)面中一塊特殊區(qū)域叫做@footnotes。你可以用下面的方式選中并給這塊區(qū)域賦予樣式。

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

交叉引用

在我們繼續(xù)談?wù)摪盐覀兯鶎W(xué)運(yùn)用其中的例子之前，讓我們看一下交叉引用。在網(wǎng)頁(yè)中，我們通過(guò)添加鏈接交叉引用。在書和其他打印文檔中，通常依靠頁(yè)碼尋找引用。因?yàn)轫?yè)碼也許會(huì)隨著書的不同版本打印形式的變化而改變 - 通過(guò)CSS實(shí)現(xiàn)讓我們不需要檢查和改變所有數(shù)字。

我們用另一個(gè)新屬性，target-counter，添加這些數(shù)字。在文檔中創(chuàng)建鏈接時(shí)，賦予它們href，值為你想要標(biāo)記的文檔中的元素的ID。此外，增加一個(gè)類來(lái)識(shí)別它們是交叉引用，而不是一個(gè)外部鏈接；我用xref。

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>著作權(quán)歸作者所有。

然后，在這個(gè)鏈接后，再一次使用生成內(nèi)容輸出(page x)，x是ID在書中位置的數(shù)值。

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

當(dāng)我們?yōu)閷?shí)際例子創(chuàng)建目錄時(shí)會(huì)在實(shí)踐中查看這個(gè)技術(shù)。

將他們放在一起：一本樣書

我們分別看了很多不同的屬性。一旦你通過(guò)創(chuàng)建一本書把它們放到一起時(shí)它們會(huì)更有意義。

真正用CSS來(lái)創(chuàng)建一本書，你需要一個(gè)支持的用戶代理。現(xiàn)在，很少有東西很好得實(shí)現(xiàn)這些規(guī)范；目前最好用的是Prince。Prince的獨(dú)立商業(yè)許可很貴，但是你可以在非商業(yè)項(xiàng)目中免費(fèi)使用Prince。這意味著如果你只是想嘗試這些技術(shù)，你可以用。另外，如果你確實(shí)有使用這項(xiàng)技術(shù)的非商業(yè)需求，你也許可以用Prince來(lái)排版這些書。

騰堡項(xiàng)目里找到我最喜歡的書，Harrison Weri的Our Cats中提取了一些段落，我選這本書因?yàn)槲蚁矚g貓并且它有圖片和腳注可以用來(lái)驗(yàn)證排版。

你可以在GitHub上找到我用的文件，加上一份生成的PDF。如果你想用CSS實(shí)驗(yàn)并且自己編譯這本書，你需要下載和安裝Prince。Prince是Mac下的命令行工具，雖然也有Windows GUI，我使用命令行因?yàn)樗娴暮芎?jiǎn)單。

使用命令窗口，切換到你書的目錄或者你從GitHub上下載文件的路徑。

cd /Users/username/smashing-css-books

現(xiàn)在，運(yùn)行Prince：

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

這會(huì)在builds目錄下創(chuàng)建一個(gè)叫book.pdf的PDF文件?，F(xiàn)在，如果你對(duì)CSS或HTML做了任何更改，你可以運(yùn)行Prince來(lái)看一下發(fā)生了什么變化。

HTML文檔

我整本“書”是在一個(gè)HTML文檔中編譯的。在Prince中編譯文檔是可能的，但我發(fā)現(xiàn)只有在處理一個(gè)比較大的文檔時(shí)才比較方便。在每個(gè)由h1開(kāi)始的章節(jié)前，我都放了一個(gè)div包含了封面圖，然后是書的目錄。

目錄鏈接到每個(gè)章節(jié)h1標(biāo)題的ID。

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
  <meta charset="utf-8" />
  <title>Our Cats and All About Them</title>
  <meta name="author" content="Harrison Weir"/>
  <meta name="subject" content="Cats. Their Varieties, Habits and Management; and for show, the Standard of Excellence and Beauty"/>
  <meta name="keywords" content="cats,feline"/>
  <meta name="date" content="2014-12-05"/>
  </head>
  <body>
    <div class="frontcover">
    </div>
    <div class="contents">
      <h1>Extracts from Our Cats and All About Them by Harrison Weir</h1>
        <ul class="toc">
          <li><a href="#ch1">The First Cat Show</a></li>
          <li><a href="#ch2">Trained Cats</a></li>
          <li><a href="#ch3">General Management</a></li>
          <li><a href="#ch4">Superstition and Witchcraft</a></li>
        </ul>
    </div>
    <h1 id="ch1" class="chapter">The First Cat Show</h1>
      <p>… </p>
    <h1 id="ch2" class="chapter">Trained Cats</h1>
      <p>… </p>
    <h1 id="ch3" class="chapter">General Management</h1>
      <p>… </p>
    <h1 id="ch4" class="chapter">Superstition and Witchcraft</h1>
      <p>… </p>
  </body>
</html>

接下來(lái)的CSS中使用了我們目前為止討論的所有東西。一開(kāi)始，我們需要用@page規(guī)則設(shè)定書的尺寸。然后使用:first偽類選擇器來(lái)移除第1頁(yè)的邊距，因?yàn)檫@一頁(yè)會(huì)有封面圖。

@page {
  size: 5.5in 8.5in;  
  margin: 70pt 60pt 70pt;
}
@page:first {
  size: 5.5in 8.5in;  
  margin: 0;
}

然后我們處理封面的圖片，確保它覆蓋了整個(gè)頁(yè)面區(qū)域。

div.frontcover { 
  page: cover; 
  content: url("images/cover.png");
  width: 100%;
  height: 100%; 
}

下一步，我們處理偶數(shù)和奇數(shù)頁(yè)的細(xì)節(jié)，使用:right和:left傳遞偽類選擇器。

奇數(shù)傳遞會(huì)讓書的標(biāo)題處于邊框盒左下方，頁(yè)數(shù)在右下方，章節(jié)標(biāo)題在右上方。章節(jié)標(biāo)題隨后在樣式表中用string-set設(shè)置。

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }
  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }
  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

偶數(shù)傳遞讓書的標(biāo)題處于右下方以及頁(yè)數(shù)處于左下方。

@page:left {
  @bottom-right {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }
  @bottom-left { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }
}

對(duì)于第一頁(yè)，包含了封面圖，我們通過(guò)設(shè)置為normal來(lái)確保沒(méi)有生成內(nèi)容。

@page:first {
  @bottom-right {
    content: normal;
    margin: 0;
  }
  @bottom-left {
    content: normal;
    margin: 0;
  }
}

樣式表接下來(lái)的一部分處理計(jì)數(shù)器。除了預(yù)設(shè)頁(yè)面計(jì)數(shù)器外，我們給章節(jié)和圖解定義計(jì)數(shù)器。

/* Reset chapter and figure counters on the body */
body {
  counter-reset: chapternum figurenum;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  line-height: 1.5;
  font-size: 11pt;
}
/* Get the title of the current chapter, which will be the content of the h1.
Reset figure counter because figures start from 1 in each chapter. */
h1 {
  string-set: doctitle content();
  page-break-before: always;
  counter-reset: figurenum;
  counter-reset: footnote;
  line-height: 1.3;
}
/* Increment chapter counter */
h1.chapter:before {
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}
/* Increment and display figure counter */
figcaption:before {
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";
}

現(xiàn)在在標(biāo)題后章節(jié)有了自己的數(shù)字。圖解也顯示出它們的數(shù)字。

我們像之前解釋的那樣創(chuàng)建腳注，給腳注引用添加上標(biāo)。

.fn {
  float: footnote;
}
.fn {
  counter-increment: footnote;
}
.fn::footnote-call {
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;
}
.fn::footnote-marker {
  font-weight: bold;
}
@page {
  @footnotes {
    border-top: 0.6pt solid black;
    padding-top: 8pt;
  }
}

我們添加一些規(guī)則來(lái)控制頁(yè)面的中斷。你需要非常小心避免過(guò)度。如果你的書有許多表格和圖像，添加許多細(xì)節(jié)規(guī)則可能導(dǎo)致書中有許多缺口。實(shí)驗(yàn)和測(cè)試會(huì)表明你可以怎樣用程序控制中斷。我總結(jié)了下面規(guī)則作為一個(gè)良好的開(kāi)端。

記住這只是用戶代理的建議。在有些情況，如果表格不適應(yīng)頁(yè)面要保持表格不中斷是不可能的！

h1, h2, h3, h4, h5 {
  font-weight: bold;
  page-break-after: avoid;
  page-break-inside:avoid;
}
h1+p, h2+p, h3+p {
  page-break-before: avoid;
}
table, figure {
  page-break-inside: avoid;
}

最后，我們給目錄賦予樣式，這里我們使用有趣的竅門。當(dāng)描述交叉引用時(shí)，我解釋了如何使用target-counter來(lái)顯示帶ID的頁(yè)碼。這也是我們要對(duì)我們的目錄做的。下面的規(guī)則在目錄的每一章的鏈接后放置頁(yè)碼。

ul.toc a::after {
  content: target-counter(attr(href), page);
}

然而，通常在書中，你會(huì)使用前導(dǎo)字符點(diǎn)（.）來(lái)組織所有的頁(yè)碼的右邊距。讓人驚訝的是，CSS提供了我們一個(gè)方式來(lái)實(shí)現(xiàn)這個(gè)，通過(guò)在生成內(nèi)容中數(shù)字前添加leader()。

ul.toc a::after {
  content: leader('.') target-counter(attr(href), page);
}

現(xiàn)在我們有了一個(gè)完整的樣式表來(lái)構(gòu)建我們的書。我避免花費(fèi)很多時(shí)間在排版上，集中精力在創(chuàng)作書的細(xì)節(jié)上。然而，從這個(gè)角度看，你可以實(shí)驗(yàn)并且添加你自己的樣式來(lái)創(chuàng)建獨(dú)特的書籍設(shè)計(jì)。

不僅僅是書！

記住這些技術(shù)不僅僅是為了書。你可以用它們從已經(jīng)給顧客開(kāi)發(fā)的網(wǎng)站的HTML中生成打印和PDF版本產(chǎn)品目錄。或者你可以從網(wǎng)頁(yè)內(nèi)容中創(chuàng)建傳單和小冊(cè)子。

如果你想用Prince從網(wǎng)頁(yè)中創(chuàng)建PDF文檔，DocRaptor是一個(gè)好選擇。這項(xiàng)服務(wù)通過(guò)API調(diào)用Prince。你可以通過(guò)API發(fā)送文檔并且接收PDF-允許用戶轉(zhuǎn)換成PDF下載內(nèi)容。所有我們?cè)谶@篇文章中討論的東西通過(guò)DocRaptor整合的API已經(jīng)都可以實(shí)現(xiàn)。

即使你現(xiàn)在沒(méi)有生成PDF的需求，這仍然是CSS中一個(gè)迷人的領(lǐng)域 - 這是一個(gè)隱秘的實(shí)用技能，當(dāng)需求出現(xiàn)時(shí)你知道這是可以實(shí)現(xiàn)的。

資源和擴(kuò)展閱讀

• CSS Paged Media Module Level 3, W3C
• CSS Generated Content for Paged Media Module, W3C
• Using CSS Counters, Mozilla Developer Network
• CSS Books: Living Standard, WHATWG
• User Guide for Prince 9.0 A lot of simple examples that work in Prince
• How to Write a Book,Jonathan Snook, 24 Ways
• Building Books With CSS3,Nellie McKesson, A List Apart
• Printing a Book With CSS: Boom!,Bert Bos and Håkon Wium Lie, A List Apart
• HTML, EPUB, MOBI, PDF, WTF: Creating an Ebook, Rachel Andrew

總結(jié)

到此這篇關(guān)于css打印樣式設(shè)計(jì)的文章就介紹到這了,更多相關(guān)css打印樣式設(shè)計(jì)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論