This link has been bookmarked by 197 people . It was first bookmarked on 02 Mar 2006, by shireen.
-
22 Dec 12
-
12 Jun 12
-
04 Jan 12
-
29 Nov 11
-
27 Oct 11
-
15 Jul 11
-
07 Apr 11
-
06 Apr 11
-
15 Mar 11
-
14 Jan 11
-
20 Jun 10
-
08 May 10
Don RyanA List Apart article by Håkon Wium Lie (Opera) and Bert Bos on using CSS to style a book format.
-
10 Mar 10
-
19 Feb 10
-
29 Jan 10
-
28 Jan 10
-
26 Oct 09
-
22 Oct 09
-
21 Oct 09
-
11 Sep 09
-
18 Aug 09
-
28 Jun 09
-
05 Mar 09
-
02 Jan 09
-
16 Dec 08
-
14 Nov 08
-
21 Oct 08
Gary EdwardsHTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for serious print jobs? To find out, we decided to take the ultimate challenge: to produce the next edition of our book directly from HTML and CSS files. In this article we sketch our solution and quote from the style sheet used. Towards the end we describe the book microformat (boom!) we developed in the process.
-
01 Oct 08
-
29 Jul 08
-
23 May 08
Steve ThomasA microformat that eases the transition from page to print with CSS and HTML
-
19 May 08
-
02 May 08
-
13 Apr 08
-
31 Mar 08
-
21 Mar 08
-
21 Feb 08
-
19 Feb 08
Sean O'HalpinPrint a book using Prince xml-pdf and boom microformat
-
08 Feb 08
brockmoellerHeaders and footers Here is an example: @page :left { @top-left { content: "Cascading Style Sheets"; } }
-
09 Jan 08
-
07 Jan 08
-
31 Dec 07
-
20 Dec 07
-
29 Nov 07
-
23 Nov 07
-
10 Nov 07
-
04 Nov 07
jeanjordaanCan CSS be used for serious print jobs? To find out, we decided to take the ultimate challenge: to produce the next edition of our book directly from HTML and CSS files. In this article we sketch our solution and quote from the style sheet used.
-
10 Oct 07
-
- Published in: CSS, HTML and XHTML |
Printing a Book with CSS: Boom!
by Bert Bos, Håkon Wium Lie
HTML and CSS, two of our favorite acronyms, are normally associated with web pages. And deservedly so: HTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for serious print jobs? To find out, we decided to take the ultimate challenge: to produce the next edition of our book directly from HTML and CSS files. In this article we sketch our solution and quote from the style sheet used. Towards the end we describe the book microformat (boom!) we developed in the process.
The studious reader may want to fetch a sample HTML file, sample style sheet, as well as the PDF file generated by Prince. The PDF file is similar to the one we sent to the printer. We encourage you to base your own book on the sample file and tell us how it goes.
Print vs. pixel
A printed book has many features not seen on screens. There are page numbers, headers and footers, a table of contents, and an index. The content must be split into pages of fixed size, and cross-references within the book (for example, “see definition on page 35”) must be resolved. Finally, the content must be converted to PDF, which is sent to the printer.
Web browsers are good at dealing with pixels on a screen, but not very good at printing. To print a full book we turned to Prince, a dedicated batch processor which converts XML to PDF by way of CSS. Prince supports the print-specific features of CSS2, as well as functionality proposed for CSS3.
CSS2
CSS2 has a notion of paged media (think sheets of paper), as opposed to continuous media (think scrollbars). Style sheets can set the size of pages and their margins. Page templates can be given names and elements can state which named page they want to be printed on. Also, elements in the source document can force page breaks. Here is a snippet from the style sheet we used:
@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }Having a US-based publisher, we were given the page size in inches. We, being Europeans, continued with metric measurements. CSS accepts both.
After setting the up the page size and margin, we needed to make sure there are page breaks in the right places. The following excerpt shows how page breaks are generated after chapters and appendices:
div.chapter, div.appendix { page-break-after: always; }Also, we used CSS2 to declare named pages:
div.titlepage { page: blank; }That is, the title page is to be printed on pages with the name “blank.” CSS2 described the concept of named pages, but their value only becomes apparent when headers and footers are available. For this we have to turn to CSS3.
CSS3
The CSS Working Group has published a CSS3 Module for Paged Media. It describes additional functionality required for printing. We will start by looking at running headers and footers.
Headers and footers
Here is an example:
@page :left { @top-left { content: "Cascading Style Sheets"; } }The example above puts a string (“Cascading Style Sheets”) in the top left corner of all left-hand side pages of the book. All pages? Not quite. A subsequent rule removes the header from pages named “blank”:
@page blank :left { @top-left { content: normal; } }
-
-
04 Aug 07
-
19 Jul 07
-
30 Jun 07
-
11 Jun 07
-
25 Apr 07
-
11 Mar 07
-
25 Feb 07
-
14 Feb 07
-
01 Feb 07
-
30 Dec 06
-
22 Dec 06
-
14 Dec 06
-
09 Nov 06
-
24 Oct 06
-
07 Oct 06
-
19 Sep 06
Fogday StudiosCan CSS be used for serious print jobs? To find out, we decided to take the ultimate challenge: to produce the next edition of our book directly from HTML and CSS files. In
-
04 Sep 06
-
01 Aug 06
-
19 Jul 06
-
08 Jul 06
-
28 Jun 06
-
24 Jun 06
haraldgrovenThe inventor of CSS writes about how to format a long text with CSS to make it suited for printing.
-
21 Jun 06
-
06 Jun 06
Xavier BadosaHTML and CSS, two of our favorite acronyms, are normally associated with web pages. And deservedly so: HTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for
-
16 May 06
-
15 May 06
-
20 Apr 06
-
22 Feb 06
-
10 Feb 06
-
06 Feb 06
-
20 Jan 06
-
03 Jan 06
-
01 Jan 06
-
31 Dec 05
-
20 Dec 05
-
16 Dec 05
-
14 Dec 05
-
08 Dec 05
-
06 Dec 05
-
05 Dec 05
-
04 Dec 05
-
03 Dec 05
-
02 Dec 05
-
-
HTML and CSS, two of our favorite acronyms, are normally associated with web pages. And deservedly so: HTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for serious print jobs? To find out, we decided to take the ultimate challenge: to produce the next edition of our book directly from HTML and CSS files. In this article we sketch our solution and quote from the style sheet used. Towards the end we describe the book microformat (boom!) we developed in the process.
-
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.