Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Designing For Print With CSS

If you mention printing with CSS to many people who work on the web, print style sheets are the use that comes to mind. We are all well used to creating a style sheet that is called upon when a web document is printed. These style sheets ensure that the print version is legible and that we don’t cause a user to print out huge images. However, CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all.

In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. I’ll explain how the selectors, properties and values that they introduce work. I’ll finish up with a working example that you can use as a starting point for your own experiments. For that example, we’ll need a user agent that supports this specialized CSS. I’ll be using Prince, which is a commercial product. However, Prince has a free version that can be used for non-commercial use, making it a good tool to try out these examples.

Why HTML And CSS Make Sense For Print Link

It may seem a bit strange that content not particularly destined for the web should be maintained as HTML and formatted with CSS1. It seems less strange when you realize that popular eReader formats such as EPUB and MOBI2 are HTML and CSS under the hood. In addition, even if the entirety of a manuscript or catalog isn’t to be published on a website, some of it likely will be. HTML becomes a handy format to standardize on, far easier to deal with than having everything in a Word document or a traditional desktop publishing package.

The Differences Between CSS For The Web And CSS For Print Link

The biggest difference, and conceptual shift, is that printed documents refer to a page model that is of a fixed size. Whereas on the web we are constantly reminded that we have no idea of the size of the viewport, in print the fixed size of each page has a bearing on everything that we do. Due to this fixed page size, we have to consider our document as a collection of pages, paged media, rather than the continuous media that is a web page.

Paged media introduces concepts that make no sense on the web. For example, you need to be able to generate page numbers, put chapter titles in margins, break content appropriately in order that figures don’t become disassociated from their captions. You might need to create cross-references and footnotes, indexes and tables of content from your document. You could import the document into a desktop publishing package and create all of this by hand, however, the work would then need redoing the next time you update the copy. This is where CSS comes in, whose specifications are designed for use in creating paged media.

Because the specifications are designed for paged media, we won’t be considering browser support in this article — it wouldn’t make a lot of sense. Later on, we’ll look at a user agent designed to turn your HTML and CSS into a PDF using these specifications.

The Specifications Link

Much of the CSS you already know will be useful for formatting for print. Specifically for print, we have the “CSS Paged Media Module3” and the “CSS Generated Content for Paged Media Module304” specifications. Let’s look at how these work.

The @page Rule Link

The @page rule lets you specify various aspects of a page box. For example, you will want to specify the dimensions of your pages. The rule below specifies a default page size of 5.5 by 8.5 inches. If you intend to print a book, perhaps by a print-on-demand service, then finding out the sizes you can use is important.

@page {
  size: 5.5in 8.5in;
}

In addition to specifying sizes with length values, you may also use paper size keywords, such as “A4” or “legal.”

@page {
  size: A4;
}

You may also use a keyword to specify the page’s orientation — “portrait” or “landscape.”

@page {
  size: A4 landscape;
}

Understanding the Page Model Link

Before going any further, we should understand how the page model for paged media works, because it behaves somewhat differently to how things work on screen.

The page model defines a page area and then 16 surrounding margin boxes5. You can control the size of the page area and the size of the margin between the edge of the page area and the end of the page itself. The table in the specification explains very well how these boxes are sized.

1-image-margin-boxes-opt6
(See large version7)

The page area is the space on the page into which your page’s content will flow. When it runs out of room, another page will be created. The margin boxes are used only for CSS-generated content.

Left and Right Page Spreads Link

Another aspect of the page model is that it defines pseudo-class selectors for the left and right pages of your document. If you look at any printed book you have on hand, you’ll probably see that the margin’s size and the margin’s content are different on the left and right pages.

We can use these selectors to define different margin sizes for our pages.

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

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

Two other pseudo-class selectors are defined. The :first selector targets the first page of a document.

@page :first {

}

The :blank pseudo-class selector targets any page that is “intentionally left blank.” To add this text, we can use generated content that targets the top-center margin box.

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

Generated Content and Paged Media Link

In the last example, we used CSS-generated content to add the text to the top-center margin box. As you will discover, generated content is vitally important to creating our book. It’s the only way things can be added to our margin boxes at all. For example, if we want to add the title of the book to the bottom-left margin box of right-hand pages, we would do this using generated content.

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

Page Breaks Link

Also part of the “Paged Media” specification is information about how to control page breaks. As already described, once the content fills a page area, it will move onto a new page. If a heading has just been written to the page, you might end up with a page that finishes with a heading, with the related content beginning on the next page. In a printed book, you would try to avoid this situation. Other places you might want to avoid a break are in the middle of a table and between a figure and its caption.

Starting a new chapter of a book with an h1 heading is common. To force this heading to always be the beginning of a page, set page-break-before to always.

h1 {
  page-break-before: always;
}

To avoid breaks directly after a heading, use page-break-after.

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

To avoid breaking figures and tables, use the page-break-inside property.

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

Counters Link

Books are all about numbering things — pages, chapters, even figures. We can actually add these numbers via CSS, saving us from having to renumber everything because we decided to, say, add a new figure partway through a chapter. We do this using CSS counters8.

The obvious place to start is with page numbers. CSS gives us a predefined page counter; it starts at 1 and increments with every new page. In your style sheet, you would use this counter as the value of generated content, to put the page counter in one of your margin boxes. In the example below, we are adding page numbers to the bottom-right of right-hand pages and the bottom-left of left-hand pages.

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

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

We’ve also created a counter named pages. This counter will always be the total number of pages in your document. If you want to output “Page 3 of 120,” you can.

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

You can create your own named counters and increment and reset them as you require. To create a counter, use the counter-reset property, increment it with counter-increment. The CSS rules below will create a counter for chapters named chapternum and increment it with each h1 — being the start of a chapter in this book. We then use the value of that counter in generated content to add the chapter number and a period before the chapter’s actual title.

body {
  counter-reset: chapternum;
}

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

We can do the same for figures in the book. A common way to number figures is to use chapternum.figurenum. So, “Figure 3-2” would be the second figure in chapter 3. On the h1, we could reset figurenum in order that it starts from 1 for each chapter.

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

Setting Strings Link

Take a look at a printed book again. As you leaf through a chapter, you’ll probably see that the chapter’s title is printed on the left or right page. As strange as it may sound, the “Generated Content for Paged Media” specification lets us achieve this using CSS.

We do this using a property named string-set in the selector that we want to take the content from. For the chapter title, this would be the h1. The value of string-set is the name you would like to give this content and then content(). You can then output this as generated content using string().

h1 { 
  string-set: doctitle content(); 
}

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

When your paged media is generated, each time an h1 occurs, the content is written to doctitle and then outputted in the top-right margin box of right-hand pages, changing only when another h1 occurs.

Footnotes Link

Footnotes are a part of the “CSS Generated Content for Paged Media Module9” specification. The way footnotes work is that you would add the text of your footnote inline, wrapped in HTML tags (probably a span), with a class to identify it as a footnote. When the page is generated, the content of that “footnote element” is removed and turned into a footnote.

In your CSS, use the footnote value of the float property to create a rule for your footnote class.

.fn {
  float: footnote;
}

In your document, use that class to wrap any footnote text.

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

Footnotes have a predefined counter that behaves in the same way as the page counter. Typically, you will want to increment the counter by 1 each time a fn class occurs and reset it at the beginning of each chapter.

.fn {
  counter-increment: footnote;
}

h1 {
  counter-reset: footnote;
}

The various parts of a footnote can be targeted with CSS pseudo-elements. The footnote-call is the numeric anchor in the text that indicates there is a footnote. This uses the value of the footnote counter as generated content.

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

The footnote-marker is the numeric marker placed in front of the footnote text in the footer of your document. These behave in a similar way to the numbers generated for an ordered list in CSS.

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

The footnotes themselves are placed in the margin, within a special area of the page named @footnote. You would target and style that area as follows.

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

Cross-References Link

Before moving on to a working example of everything we’ve learned, let’s look at cross-references. On the web, we cross-reference things by adding links. In a book or other printed document, you would normally refer to the page number where that reference is to be found. Because page numbers might change according to the format that the book is printed in — and between editions — doing this with CSS saves us from having to go through and change all of the numbers.

We use another new property, target-counter, to add these numbers. Start by creating links in your document, giving them an href, which is the ID of the element in the document that you want to target. Also, add a class to identify them as a cross-reference, rather than an external link; I’m using xref.

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>

Then, after the link, use generated content again to output (page x), where x is the number of the location in the book where that ID can be found.

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

We’ll be looking at this technique in practice when we create a table of contents for the working example.

Putting It All Together: An Example Book Link

We’ve looked at a lot of different properties here in isolation. They make more sense once you put them to use by building a book.

To actually create a book using this CSS, you’ll need a user agent that supports it. Currently, very few things implement this specification well; the one that is most accessible is Prince1310. A standalone commercial license for Prince is expensive, however, you may use Prince free of charge for non-commercial projects. This means that if you just want to try out these techniques, you can. Additionally, if you do have non-commercial uses for this technology, you may use Prince to format those books.

I have extracted passages from one of my favorite books on Project Gutenberg, Our Cats by Harrison Weir11. I’ve chosen this book because I like cats and because it has images and footnotes that I can use to demonstrate formatting.

You can find the files I am using, plus a generated PDF, over on GitHub12. If you want to experiment with the CSS and build the book yourself, then you will need to download and install Prince1310. Prince is a command-line tool on the Mac, and although there is a Windows GUI, I’ll use the command line because it really is very simple.

Using a Terminal window, switch to your book’s directory or the location where you downloaded my files from GitHub.

cd /Users/username/smashing-css-books

Now, run Prince:

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

This will create a PDF in the builds folder named book.pdf. Now, if you make any changes to the CSS or HTML, you can run Prince to see what is different.

The HTML Document Link

My entire “book” is compiled in a single HTML document. Compiling documents in Prince is possible, but I’ve found it simpler to just deal with one large document. Before the chapters, which start with an h1, I have a div that contains the cover image, and then the table of contents for the book.

The table of contents links to the IDs of the chapters’ h1 headings.

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

The CSS then uses all of the things we have described so far. To start, we need to set up a size for the book using the @page rule. We then use the :first pseudo-class selector to remove the margin on page 1, because this page will have the cover image.

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

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

We then deal with the image for the front cover, making sure that it covers the whole page area.

div.frontcover { 
  page: cover; 
  content: url("images/cover.png");
  width: 100%;
  height: 100%; 
}
2-image-cover-opt14
(See large version15)

Next, we deal with the specifics of the left- and right-hand pages, using the :right and :left spread pseudo-classes.

The right-hand spread will have the title of the book in the bottom-left margin box, a page counter in the bottom-right, and the chapter’s title in the top-right. The chapter’s title is set using string-set further down in the style sheet.

@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;
  }
}
3-image-spread-right-opt16
(See large version17)

The left-hand spread has the book’s title in the bottom-right and the page counter in the bottom-left.

@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;
  }
}
4-image-spread-left-opt18
(See large version19)

For the first page, which contains the cover image, we’ll make sure that no generated content appears by setting it to normal.

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

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

The next section of the style sheet deals with counters. In addition to the preset page counter, we are defining counters for chapters and figures.

/* 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) ". ";
}

Chapters now have their number placed before the title. Figures also display their number.

5-image-figure-number-opt20
(See large version21)

We create footnotes as in the explanation earlier, superscripting the footnote’s call.

.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 {
  @footnote {
    border-top: 0.6pt solid black;
    padding-top: 8pt;
  }
}
6-image-footnotes-opt22
(See large version23)

We then add some rules to control where pages break. You need to be fairly careful about being too heavy handed with this. If your book has a lot of tables and figures, then adding many specific rules here could cause a lot of long gaps in the book. Experimenting and testing will show how far you can take the control of breaks. I have found the rules below to be a good starting point.

Remember that this is a suggestion to the user agent. In some cases, keeping a table from breaking will be impossible if the table doesn’t fit on a page!

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

Finally, we style the table of contents, and we use an interesting trick here. When describing cross-references, I explained how we use target-counter to display the page number that the ID is on. This is what we’ll do for our table of contents. The rule below puts the page number after the link to each chapter in the table of contents.

ul.toc a::after {
  content: target-counter(attr(href), page);
}
7-image-toc-numbers-opt24
(See large version25)

Commonly in books, however, you would use leader dots to line up all of the page numbers against the right margin. Amazingly, CSS gives us a way to do this, by adding leader() before the number in the generated content.

ul.toc a::after {
  content: leader('.') target-counter(attr(href), page);
}
8-image-toc-leader-opt26
(See large version27)

We now have a complete style sheet with which to build our book. I’ve avoided spending a lot of time on typography here, concentrating instead on the specifics of creating a book. From this point, however, you can experiment and add your own styles to create a unique book design.

Not Just Books! Link

Remember that these techniques are not just for books. You could use them to generate print and PDF versions of a product catalog directly from the HTML of a website that you have developed for a client. Or you could create flyers and brochures from web content.

If you want to create PDF documents from a website using Prince, then DocRaptor28 is a great option. This service uses Prince via an API. You can send documents via the API and receive a PDF — perfect for allowing users to download content as a PDF on the fly. Everything we have looked at in this article is possible via an API integration with DocRaptor.

Even if you don’t have an immediate need for PDF generation, it’s a fascinating aspect of CSS — and it’s a useful skill to have tucked away, so that you know what is possible when a use case presents itself.

Resources And Further Reading Link

(vf, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/tag/css/
  2. 2 https://www.smashingmagazine.com/2011/09/how-to-make-an-ebook/
  3. 3 http://www.w3.org/TR/css3-page/
  4. 4 http://www.w3.org/TR/css-gcpm-3/
  5. 5 http://www.w3.org/TR/css3-page/#margin-boxes
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  8. 8 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  9. 9 http://www.w3.org/TR/css-gcpm-3/#footnotes
  10. 10 http://princexml.com
  11. 11 http://www.gutenberg.org/ebooks/35450
  12. 12 https://github.com/rachelandrew/css-for-print
  13. 13 http://princexml.com
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  28. 28 https://docraptor.com/
  29. 29 http://www.w3.org/TR/css3-page/
  30. 30 http://www.w3.org/TR/css-gcpm-3/
  31. 31 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  32. 32 https://books.spec.whatwg.org/
  33. 33 http://www.princexml.com/doc/
  34. 34 http://24ways.org/2013/how-to-write-a-book/
  35. 35 http://alistapart.com/article/building-books-with-css3
  36. 36 http://alistapart.com/article/boom
  37. 37 http://rachelandrew.co.uk/archives/2014/01/07/html-epub-mobi-pdf-wtf-creating-an-ebook/

↑ Back to top Tweet itShare on Facebook

Advertisement

Rachel Andrew is a web developer, writer and speaker and one of the people behind the content management system, Perch. She is the author of a number of books including The Profitable Side Project Handbook. She writes about business and technology on her own site at rachelandrew.co.uk.

  1. 1

    Great article. It is exactly what I needed! Congrats and many thanks.

    14
  2. 2

    How do you include high res images for PDF?

    1
  3. 4

    Good job ! Thank you for this great article !

    BTW, i use http://wkhtmltopdf.org, an open source (LPGL) tool to transform html to pdf and it work great !

    3
  4. 6

    Very useful article. There’s so little out there about print-focused CSS and this is a gem. I wasn’t even aware that some of these things were possible.

    2
  5. 7

    Thank you!

    0
  6. 8

    Great article! it’s very useful and I now know of a lot of possibilities I didn’t even hope to find in the future.
    Thanks.

    0
  7. 9

    I recently had a problem with colors. RGB on print looks quite ugly, but I didn’t find a way to declare colors in CMYK (I only tried ordinary browsers though).
    I your example you use RGB.
    Does Prince support CMYK? How do you use it in CSS?

    1
  8. 12

    Hitesh Chavda

    January 8, 2015 7:34 am

    Awesome !! Great Article to Get Deep Knowledge of Printing with CSS. Thanks!!

    0
  9. 13

    Thorough written article, I found it very useful with good explanations and thanks for the example. It is one of the best articles about CSS for print.

    Well done Rachel!

    2
  10. 14

    Arjan van Deelen

    January 8, 2015 10:41 am

    Great article

    0
  11. 15

    Vishnu Haridas

    January 8, 2015 12:55 pm

    Good article. Once I had to use HTML/CSS to create an entire online magazine (because it used a Unicode font that was not supported in PageMaker).

    I was completely working with Google Chrome Developer Tools and Notepad++. Re-arranging page breaks were just a matter of copy-pasting the tags. Using CSS will help in controlling common aspects like headers, footers, titles, sub-titles etc.

    Later it was converted to PDF (using PDFCreator). Even I could distribute the document as HTML itself, which will eventually render same as that of the PDF pages.

    0
  12. 16

    Great article! Exactly what I was looking for.

    I am little confused here though. What is the difference between Prince and DocRaptor? From DocRaptor’s page it sounds like i can use docraptor by itself but you are suggesting to use it with Prince. What is the difference?

    Thanks!

    0
    • 17

      Scott MacDonald

      January 9, 2015 4:26 pm

      Hi Zaur,

      I don’t think the message was meant to use both DocRaptor and Prince yourself, but rather that DocRaptor itself uses prince themselves to generate PDFs, therefore all the tricks and techniques in this article apply to DocRaptor as well.

      0
    • 18

      James Paden

      March 7, 2015 9:12 pm

      Hello, I work for DocRaptor. Scott’s right, you wouldn’t use both DocRaptor and Prince. DocRaptor uses the Prince PDF generation engine on the background – but we run our own JS engine by default which includes enhancements such as like TypeKit and Highcharts support.

      1
  13. 19

    Such a great detail rich article; ideal for a project I am busy with and opening up other possibilities. Impeccable timing! Thanks Rachel!

    0
  14. 20

    It was a great tutorial – I will make use of it in the future :)

    0
  15. 21

    fyi, you can generate PDF from HTML with from Browsers. You can find this in print dialog box (cmd+p / ctrl+p). AFAIK, Chrome and Firefox have it.

    -4
  16. 23

    Its really informative knowledge about printing the web-page. But I am having a query. The steps you have given here are sufficient enough in the case when I only need to print the webpage in A4 size format. But what if I want my users to print the page in more than one page formats. Actually, I am working at sagipl.com which is an offshore SEO company in Jaipur. For that I am working to add the Blog section on this site and want the users to take the printout of the blogs. For that I want to give different page sizes as the printing options. I am little-bit confused in this concern.

    1
  17. 24

    Thanks for article, but:
    @page {
    size: A4;
    }
    Dont work – i get blank pages. Even i tried to use ‘A4’.

    0
  18. 25

    All this is possible in theory but not in reality. Print options are to bad supported in various browsers. Just one example:
    “@page :left” is not supported in Firefox
    https://developer.mozilla.org/de/docs/Web/CSS/:left

    There are problems with “@page :first” too. But the badest at all is that many browsers print there own informations like site title, url, date etc. and it can only disabled by the user (not at Firefox).

    At DBook.org we switched to PDF generation for printing and started to maintain the nice HTML2PDF library:
    https://github.com/chrisglass/xhtml2pdf

    2
    • 26

      Rachel Andrew

      January 9, 2015 10:24 pm

      That’s correct, this article isn’t about printing from the browser. It’s about using CSS to format ebooks with a dedicated user agent designed for that.

      4
      • 27

        Thanks Rachel for make this clearer to me. It might be my fault but could be clearer in the article too.

        But at all a great article. I bookmarked as a great source of printing output.

        2
      • 28

        yes but what is the alternative to save the pdf in the printer dialogue? i imagine something like hitting a button and save it to my computer straight away, but don’t now how to get that working!

        0
  19. 29

    This was just what i needed! I was facing problems with printed css, and BOOM, a wild smashing magazine article appears. Thanks guys!

    0
  20. 30

    I have just created a website about SASS tutorials and an online blog for developers, should be pretty good and help a lot of people out.

    http://www.sasstutorials.com

    Please feel free to check out my SASS tutorials online.

    Thanks

    0

↑ Back to top