CSS guide for pdf export

Does anyone here know if there is a guide for the CSS on pdf exports with Pressbooks?

I know CSS well, but wondering if there is a guide that explains which part of the books (i.e: frontmatter, backmatter, page, chapter) and all the regions contained within. So that I can easily narrow down a section of CSS that I need to edit.

Hi Jeremy,
There are a few resources that will probably be most helpful for you as you work to understand the structure of Pressbooks themes. First is our high-level guide to theme development: https://docs.pressbooks.org/theme-development/. There are also two blog posts from last year that explain how our book themes work: part 1 + part 2.

On a more practical level, we provide a chapter in our guide describing how to make custom CSS changes (which it sounds like you’re already familiar with), and have documented a number of generic elements that are a part of Buckram here. For PDF exports particularly, you’ll also likely want to use your browser’s inspect element tool and our XHTML preview (see how to generate this in this guide chapter, under the ‘Testing Your PDF’ section).

@SteelWagstaff Thank you so much, being able to generate the XHTML and find the necessary css elements to target for the pdf exports is a huge help!

I did run into another issue, that is with the page numbers that are generated at the bottom of the pages in the pdf exports. I dont know which css element to target, because those are not part of the XHTML preview.

I think I have it narrowed down to the @page regions because I see items like “counter(page)”. But its a bit trial and error. As an example, I just want to center the page numbers…

Can you point me in the right direction of the structure for the page numbers? (and page elements for pdf generation in general)

Thank you!

if you are using prince, see:
https://www.princexml.com/doc-prince/#paged

otherwise see: https://www.w3.org/TR/css-page-3/

1 Like

Thank you! @hughmcguire @SteelWagstaff

The prince documentation helped. I did run into an issue trying to set content in the Prince page regions. When I do this, it works fine:

@page introduction:first:right {
@bottom-right {
text-align: center;
content: counter(page); }}

…but when I try to add content to the top center, the export fails:

@page introduction:first:right {
@bottom-right {
text-align: center;
content: counter(page); }
@top {
content: counter(page); }}

…any ideas?
Thanks.

@hughmcguire @SteelWagstaff any ideas?

Hard to say more without more context for what’s failing for you and how. When you say the export fails, what kind of failure is happening? If you have error messages/screenshots those are most helpful. Not sure we’ll have an answer for you, but that would be most likely to lead to successful troubleshooting.

Thanks for the quick reply @SteelWagstaff. Here is a screenshot of the error:

.

It only says to see the log for more details. I have been searching for a log file written to the server, but no luck finding it. No email logs sent either.

See https://guide.pressbooks.com/chapter/export-validation-logs/#receivingvalidationlogs

Thank you, got that turned on, this is what I get:

Fri Aug 16 19:07:09 2019: ---- begin
Fri Aug 16 19:07:09 2019: page 7: warning: no font for Basic Latin character U+0031, fallback to ‘?’
Fri Aug 16 19:07:09 2019: internal error: no available fonts
Fri Aug 16 19:07:09 2019: ---- end

So in my custom CSS, when I have this:

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

…the export works just fine. But when try to add another region like this, it fails:

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

@top {
content: counter(page); }}

…and I get the above message in the log.

I figured it out. Looks like the font was not explicitly set for that region. Once I got that in place, then I could set css content in those regions.

t-shirt: css is fun!

Correction: “t-shirt: PDF css is, fun?”

lol…

thanks again for guidance…