Best styling choices for quality-looking PDF / print rendering


I recently exported a Pressbooks book (that I first developed as an eBook), and I wasn’t thrilled about its appearance. Therefore, I was wondering if anyone has any tips on how to best style the eBook version so that it looks nice in PDF.

I tweaked the original version’s HTML a bit–added tables et al. so I don’t know if that played a part in certain peculiarities in the PDF rendering. That being said, (for a novice such as myself) is it advisable to stick with the formatting available ‘natively’ in the Rich Content Editor to get the best post-edit result?

I’m also curious if someone might be able to share a best practice for styling figures/images and their figure ‘text’ – divs w or w/o borders? shading? Also, what about text spacing and expected page number correlation? In my export there were areas with a bit of empty white space, so I certainly want to avoid that.

This is the first time I’ve ever worked in this environment, so pardon any awkward questions on my behalf.

I would appreciate any guidance.


A few questions, @paradisojr:

  1. What theme are you using?
  2. What PDF renderer are you using (Prince)?

Thank you for your questions, @ned!

  • Theme: Open Textbooks
  • PDF renderer: I believe it’s Prince, yes. (I’m not exactly sure which dependencies are installed in Unizin’s ‘production’ environment.)

Okay, so the aesthetics of the Open Textbooks theme may not be what you are looking for — I’d suggest trying a couple others (say, McLuhan or Jacobs) and seeing if you like those better?

Sounds good. Should I expect a considerable amount of post-edits moving themes like that, or does it convert ‘cleanly’ for the most part?

No edits should be necessary. Themes just change the output in web, PDF and EPUB; the content isn’t touched.

1 Like

Empty white spaces are a result of the constraints of HTML+CSS page rendering, in particular with images:

  • CSS does not handle the concept of vertical styling well
  • If the image is too big to fit on the “rest” of the page, it gets bumped to the next
  • this leaves white space
  • a “good” solution (imo) for this is to use the {float: top;} or {float: bottom;} css attributes
  • two problems here:
    – PB currently doesn’t have explicit support for float top / bottom in the editing interface (though in general that should be supported by the generic theme styling we use)
    – If we make float top or bottom a default for images, users often complain because the image “floats” away from the text that surrounds it … so for instance if you write “in the image below” and then the image floats to the top of the page, the text is wrong. This seems to annoy PB users quite a bit.

A comprehensive solution to this is … roughly on the roadmap, but lots and lots of things to do before we get to it.


Thanks for that explanation, Hugh.
This is not a PRESSING issue for me at this point–more just my own curiosity as we begin to ingest more content into PB, knowing there will be users who want to download and/or print the content at some level.