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/
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.
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.
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…
Has something changed since the above string of posts about page numbers? I used my browser search bar to check for @page in the CCS code in Custom Styles for the Austin Theme, and it’s not there. The only @symbol in the list is @import.
Is it possible to edit text size in the page number in this theme? If so, how?
@Ritergal there are three stylesheets for each book – one for web, one for ebook, and one for PDF. I think you’ll want to look at the PDF stylesheet
And yes, you can change the size of the page number. I believe that you’ll want to target the class .chapter-title-wrap .chapter-number and set font-size: to the value you prefer.
Thanks @SteelWagstaff. I blush to realize I was looking at Custom Styles for web. I finally found that .chapter-title-wrap class way way down in lines 695-6. (For the record, Firefox browser search is no help inside those list boxes).
Code for those lines and the surrounding ones:
692 .clear {
693 clear: both; }
694
695 .front-matter, .part, .chapter, .introduction, .back-matter, .front-matter-title-wrap, .chapter-title-wrap, .back-matter-title-wrap {
counter-reset: footnote; }
697
698 .footnote {
699 display: prince-footnote;
700 padding-left: 0;
701 margin-left: 0;
702 font-family: “Sorts Mill Goudy”, “Georgia”, serif;
703 font-size: 0.7rem;
704 font-weight: normal;
…
My hunch that dropping that font-size value down would affect footnotes rather than page number size was correct.
I copied all the CSS code into a Notepad window to make it searchable. I found the @page front-matter and @page introduction section. As I look further, I see @page post-introduction, @page part:right, @page chapter … Each of these has font-size settings.
The font size listed is 1em, while it appears that body text is .9em. That squares with my visual assessment that the page number is larger. However, I set the body font size as 11.5, which is .96em, very close to 1.
Am I in the right neighborhood? Do I need to reset each one of those font-size values?
Is there a comprehensive guide to CSS for Pressbooks templates? I learned CSS ages ago and lots has been added. Web searches for this property have me at sea! If I don’t find this answer soon, no problem. 99% of everyone will be 100% happy with templates as they are.
Thanks for your help.
The styling for the page numbers is found in the page structure section… with many styling directions like this… so you’ll have to change them all unfortunately:
@page chapter:first:left {
@bottom-center {
padding-bottom: 0.4in;
font-family: "Marcellus SC", serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
hyphens: none;
color: black; } }
this resource is useful: