Printing a Book with CSS: Boom!

by Bert Bos, Håkon Wium Lie

68 Reader Comments

Back to the Article
  1. I opened up this article mainly because I’ve been looking for a means to create invoices and proposals quickly, easily, and with some customization.

    I’ve always hated opening up Indesign or Msoft Word just to fudge a couple variables and print. I’m on a slow laptop, and it can seem like forever to load up these bloated apps, only to close them after seconds of use.

    I love the possibility that I can create a printed page template, and only have to open a simple text editor to edit and then send it to a browser (which is always on!) and hit print.

    I know everyone’s been knocking the book format application, but I’m very excited about other possible applications.

    Copy & paste the code below to embed this comment.
  2. I am righting a docbook “book”. Some of the fonts are not looking good and would like to enhace the fonts. I learned that I could use CSS for enhancing fonts output in html. I am trying to see if someone has gone thru the experience and have used a good CSS stylesheet file. I would like to get a copy of the CSS stylesheet if possible. Or point me to good location where I can get a good CSS file.

    Thanks,
    Raj

    Copy & paste the code below to embed this comment.
  3. I am righting a docbook “book”?. Some of the fonts are not looking good and would like to enhace the fonts. I learned that I could use CSS for enhancing fonts output in html. I am trying to see if someone has gone thru the experience and have used a good CSS stylesheet file. I would like to get a copy of the CSS stylesheet if possible. Or point me to good location where I can get a good CSS file.

    Prince ships with a CSS style sheet that does rudimentary styling of DocBook files. It’s called “docbook.css” and it should be a reasonable starting point.

     

    Copy & paste the code below to embed this comment.
  4. thanks

    Copy & paste the code below to embed this comment.
  5. While the article is great, i don’t get the point.
    I tried printing you HTML file via the latest version of firefox and ie and the footers (page numbers) do not appear.
    if we need to have another program to convert to pdf to then be able to print, what is the use? why cannot CSS just work with browsers for printing?
    I am trying to create documents that can be visible on the web and then when somene wants to print them, have a page number and a footer appear and your solution does not work, why is the question? since it is CSS and XHTML, there should not be a problem.
    i have to revert to the idea of making 2 style scheets one for print and one for screen which is also a bad solution.
    Unless i missed something

    Copy & paste the code below to embed this comment.
  6. I don’t think this is ready for any serious use. Consider for example
    <ul>
    <li>That you can’t have a ul inside a p,</li>
    <li>or any block level element</li>
    </ul>
    which really breaks orphan control code. There is simply no way that a client figure out like that a sentence like this belongs to the paragraph above, and isn’t a paragraph on its own.

    (La)TeX has rather advanced algorithms to do this right, since it seriously breaks text flow. It may not be the kind of thing that people point their fingers at, but if you ask them, they tell you that your text was “heavy”. Any typographer worth his salt, and a serious book publisher will give this high priority.

    Don’t get me wrong: I would really like to see a LaTeX replacement, as the HTML tools are much more widespread than LaTeX, and LaTeX is often a pain to write. However, it is important to realise that there are many good reasons why people use it for high-quality work, and that is not going to change before certain flaws in the original design of HTML is corrected, and I know it breaks your heart, HÃ¥kon, but that means backwards-incompatible changes must be made to HTML.

    Also, it means that we have to put some effort into high-quality printing in the UAs, and I don’t see us doing that…?

    Copy & paste the code below to embed this comment.
  7. I like the idea, since we already have the API documentation of our software generated as HTML. It must not be perfect for printing (I would prefer Latex over XSL-FO/Docbook, but that is not important here).

    What I am really missing is the possibility to create a reference to a numbered element: E.g. images are numbered with a chapter prefix and a counter for the image, i.e. a caption like “Fig. 2.3” for the third image in the second chapter.

    &&/%%$$
      &&&%%&%
      %%&&&&&&&
      {text-align:center}Fig. 1.1


    This could be easily done using counters. But now I would like to create a reference in the text to this image like, e.g. “see Fig. 2.3” where the “Fig 2.3” is automatically generated. Is this possible?

    bla bla bla (see Fig 1.1) bla bla bla

    Copy & paste the code below to embed this comment.
  8. I’m involved in a project that requires a “clean” print option, but none of the developers have specific expertise in printing (nicely) from XHTML. Frankly, we have been dreading the day when we would have to buckle down an learn an unfamiliar print technology. After stumbling on this thread I picked up the free Prince demo today. Within an hour, I was outputting reasonably complex pdf layouts with tables borders, backgrounds and images (oooooooh… ahhhhhhh…) and without touching the original content. The CSS2 implementation is refreshingly solid (this the week that IE7 and FF2 were released). Now, my team is genuinely excited about printing. Offset press publishing might be a stretch, but Prince proves that more modest goals are achievable with a fraction of the effort.

    Copy & paste the code below to embed this comment.