前言

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

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

為什么HTML和CSS對印刷有意義

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

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

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

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

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

規(guī)則

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

@PAGE 規(guī)則

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

@page {
  size: 5.5in 8.5in;
}

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

@page {
  size: A4;
}

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

@page {
  size: A4 landscape;
}

理解頁面模塊

進一步討論前，我們需要理解分頁媒體運行的頁面模塊，因為它和運行在屏幕上的內(nèi)容表現(xiàn)上有一些不同。

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

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

頁面左邊距和右邊距

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

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

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

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

@page :first {

}

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

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

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

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

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

分頁符

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

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

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;
}

計數(shù)器

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

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

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

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

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

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

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

書中圖像的計數(shù)我們也可以用同樣方法。通常給圖像計數(shù)的方法是使用chapternum.figurenum。所以“Figure 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)你翻閱一章，你會看到章節(jié)標題印在偶數(shù)或奇數(shù)頁上。也許聽起來很奇怪，“頁面媒體生成內(nèi)容”規(guī)范讓我們通過CSS來實現(xiàn)。

我們在想要獲取內(nèi)容的選擇器中使用string-set屬性來實現(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)你的頁面媒體生成后，每當(dāng)出現(xiàn)h1，內(nèi)容被寫入doctitle然后輸出到右側(cè)頁的右上邊距盒中，只有當(dāng)另一個h1出現(xiàn)才發(fā)生改變。

腳注

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

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

.fn {
  float: footnote;
}

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

<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)歸作者所有。

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

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

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

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

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

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

交叉引用

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

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

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

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

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

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

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

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

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

騰堡項目里找到我最喜歡的書，Harrison Weri的Our Cats中提取了一些段落，我選這本書因為我喜歡貓并且它有圖片和腳注可以用來驗證排版。

你可以在GitHub上找到我用的文件，加上一份生成的PDF。如果你想用CSS實驗并且自己編譯這本書，你需要下載和安裝Prince。Prince是Mac下的命令行工具，雖然也有Windows GUI，我使用命令行因為它真的很簡單。

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

cd /Users/username/smashing-css-books

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

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

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

HTML文檔

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

目錄鏈接到每個章節(jié)h1標題的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>

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

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

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

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

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

奇數(shù)傳遞會讓書的標題處于邊框盒左下方，頁數(shù)在右下方，章節(jié)標題在右上方。章節(jié)標題隨后在樣式表中用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ù)傳遞讓書的標題處于右下方以及頁數(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;
  }
}

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

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

樣式表接下來的一部分處理計數(shù)器。除了預(yù)設(shè)頁面計數(shù)器外，我們給章節(jié)和圖解定義計數(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)在在標題后章節(jié)有了自己的數(shù)字。圖解也顯示出它們的數(shù)字。

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

.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ī)則來控制頁面的中斷。你需要非常小心避免過度。如果你的書有許多表格和圖像，添加許多細節(jié)規(guī)則可能導(dǎo)致書中有許多缺口。實驗和測試會表明你可以怎樣用程序控制中斷。我總結(jié)了下面規(guī)則作為一個良好的開端。

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

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)描述交叉引用時，我解釋了如何使用target-counter來顯示帶ID的頁碼。這也是我們要對我們的目錄做的。下面的規(guī)則在目錄的每一章的鏈接后放置頁碼。

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

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

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

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

不僅僅是書！

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

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

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

資源和擴展閱讀

• 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è)計的文章就介紹到這了,更多相關(guān)css打印樣式設(shè)計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論