Style customization in the PDF generation process

[yl5682]

Dear community,

Long story short I am using the PDF generation feature to produce PDF for the Quire project. For the most part it works flawlessly. However there are a few issues that I hope to resolve.

1. Break long strings in an URL in the Notes section.
If you notice in the screenshot, the long URLs won't break because of the current word-break setting.

Knowing that the print.scss is responsible for the style of the PDF, I added this:

  * {
    word-break: break-all;
    word-wrap: break-word;
  }

And the result looks like this:

The challenge is that it is breaking everything (as expected). So I wonder if there is a predefined selector that I can use to target only the Notes section (or footnote, if it is called that way)? Any recommendation would be great!

2. Vertically center an image on a page
My second question is also CSS related: Is there any way to vertically center the entire image/attribution section on the page for an image object? Please see the screenshot for when it is aligned at the top (desired layout is vertical center alignment).

3. Publisher information page
Does the default PDF template/generator produce a publisher's information page? Currently I am not able to generate the PDF and get a page that has information about the publisher. A similar page that I am looking for may contain information such as:

in this sample publication and I cite: https://highpoint-editions.netlify.app/downloads/mia-highpoint-editions.pdf

Thank you so much for the community's support!

[Erin-Cecele]

Hi @yl5682 to tackle your first question:

You can see this bit of code in the layouts/default/source/css/print.scss:

quire/themes/default/source/css/print.scss

Lines 443 to 463 in 5b533e0

	// Use PrinceXML prince-text-replace to insert zero-width-spaces in URLs
	// that are printed in the text of the book, in order to facilitate better
	// line breaking per Chicago Manual of Style
	// https://www.chicagomanualofstyle.org/book/ed17/part3/ch14/psec018.html
	a[target=_blank] {
	prince-text-replace: "/" "\200B/"
	"~" "\200B~"
	"." "\200B."
	"," "\200B,"
	"-" "\200B-"
	"_" "\200B_"
	"?" "\200B?"
	"#" "\200B#"
	"%" "\200B%"
	"=" "\200B="
	"&" "\200B&"
	"+" "\200B+"
	":" "\200B:"
	"\200B/\200B/" "//\200B"
	"\200B:\200B:" "\200B::";
	}

The CSS selector there is targeting external links, but when Hugo switched Markdown processors away from Black Friday, the selector stopped working the way it should. The first thing you can try is changing the selector from a[target=_blank] to a[href^="http"].

Additionally you can try the following:

To fix line breaks, they need to be written out in full Markdown link styling (brackets with the text as it appears, followed by parens for the URL). And the code for a zero-width non-breaking space () needs to be inserted following the character you want to break to the next line:

[https://www.brooklynmuseum.org/opencollection/objects/152121](https://www.brooklynmuseum.org/opencollection/objects/152121)

Or, in some cases, parts of the URL need to be wrapped in HTML span tags:

[<span style="white-space:nowrap;">https://</span>www.brooklynmuseum.org/opencollection/objects/152121](https://www.brooklynmuseum.org/opencollection/objects/152121)

Let us know if these tips work. We'll be in touch to help respond to # 2 and # 3 shortly.

[yl5682]

I have forwarded this thread to the project team and they've found it very helpful. I wonder if you have had an update on the other issues? The team are planning to launch this project this Friday (sorry about the short notice). If you have some newly discovered pointers I am sure they will help the team a lot! Thank you @Erin-Cecele !

[geealbers]

Hi @yl5682, for the third question about the publisher information page, unfortunately no, Quire doesn't currently generate this automatically. It's something we hope to do something about in the future, but for now it has to be manually made, which I realize frustratingly goes against Quire's normal practice of only including content in one place and then using the templates to display that content as and where needed.

It might be useful to check out how I've been handling it for Getty books. Here's a repo of one of our recent titles: https://github.com/thegetty/rococo. In the content directory, you'll see both a copyright.md file for the pdf and epub output, and a very similar about.md file for the online site. I then usually add some custom.css to get the styles looking right. Hope this helps.

[geealbers]

Hi again @yl5682, this is the only solution I've found so far for your question about centering the images. It's working on my end, though I feel like there should be a better way. Let me know if it works for you.

Starting on line 266 of themes/default/source/css/print.scss replace this:

.quire-entry__image {
  .quire-entry__image__group-container {
    figure {
      page: entry-image;
    }
  }
}

with this:

$print-entry-image-height: $print-height - $print-top-margin - $print-bottom-margin;
.quire-entry__image {
  .quire-entry__image__group-container {
    figure {
      page: entry-image;
      height: $print-entry-image-height;
    }
  }
}