pdf output breaks from two tall vertical images

[zsofiaj]

Before proceeding, make sure there isn’t an existing issue for this bug.

• I have searched the existing issues and determined this is a new bug.

Expected Behavior

One catalogue entry in our Italian Paintings book has two very tall vertical images (335x1712 pixels and 335x1355 pixels). On the web version, I tried these in a figure group as two images side by side, but now they are styled with the class "is-pulled-right" and appear pulled right in two consecutive paragraphs:

https://italian-paintings-live.netlify.app/catalogue/volume-1/the-sienese-school/56/#fig-56-3

In the pdf, I expected these to appear in one column beside the corresponding paragraph.

Actual Behavior

When I output the pdf with the figures grouped, the images showed up on two separate pages, one image per page, but one image went beyond the margins of the page by quite a bit, and the formatting was off for both (see page 173 of the first pdf). When I had the images pulled right, one per paragraph, only one image shows in the pdf, and it goes beyond the margins of the page (see page 173 of the second pdf). Then the pdf stops after that page. So the rest of the pages are missing.

Ital_Paintings_batch_2_problem_p173.pdf
Ital_Paintings_batch_2_published_broken_p173.pdf

Steps to Reproduce

I output my pdf as usual, by using "quire build" and "quire pdf."

Version Numbers

Quire version 1.0.0-rc.7

Is it possible this problem will be fixed once I update Quire? I'm sorry I didn't try that first!

When I run "quire info --debug," it says "unknown command."

Web Browser

No response

Relevant Terminal/Shell Output

No response

Supporting Information

No response

[Erin-Cecele]

Hi @zsofia, Thank you for submitting this issue. I was able to test this and recreate the seemingly buggy behavior of extra-tall images. We believe the solution will be custom CSS styling, so again, I want to bring your attention to the PR we are currently working on in the quire-docs repo, #692. Stay tuned.

[Erin-Cecele]

Hi @zsofia, so this does appear to be an issue with Paged.js. In the meantime, I do have a solution for you using Prince XML and CSS styling:

In your _assets/styles/custom.css folder add this snippet of CSS:

@media print {
    .q-figure.pdf-50-percent-width img,
    .q-figure.pdf-50-percent-width figure figcaption {
      max-width: 50%;
      margin-left: auto;
      margin-right: auto;
    }
  }

And then update your shortcodes to the following:

{% figure 'fig-56-3' 'pdf-50-percent-width is-pulled-right' %}

{% figure 'fig-56-4' 'pdf-50-percent-width is-pulled-right' %}

You may need to play around with the percentage a bit to get it just right. If you do that, make sure you are updating the number from 50 to 75 (for example) in both the shortcode and the custom.css file.

To output your pdf run the command quire build and then quire pdf --lib prince.

Let us know if this works or if you run into any additional snags.

In the meantime, I am leaving this issue open and marking it as a bug due to the Paged.js aspect. @geealbers will connect with @fchasen to look into this further.

Thank you!

[zsofiaj]

Thanks so much, @Erin-Cecele ! This worked great. Although, strangely, the final sentence of the paragraph with the second image was pushed to the following page as an orphan (see first attachmet). But maybe I'll be able to fix this with the additional pdf styling tips you added to the v1 documentation. Thank you for that as well. I'll work on that next.

One note: when I tried running "quire pdf --lib prince," I got an error (see second attachment). But it worked fine when I just used "quire pdf."

And one more odd thing: every time I save changes and run "quire build" then "quire pdf," the new pdf doesn't include my updates. I always have to run "quire build" and "quire pdf" once again, and the second time, the changes do show up. Has anyone else experienced this?

Ital_Paintings_08-25-23_pp173–75.pdf

[Erin-Cecele]

Ah hah, that's likely because you don't have Prince XML installed: http://www.princexml.com/download/. Let me double check with @geealbers to see if the install instructions have changes from v0: https://quire.getty.edu/docs-v0/install-uninstall/#macos-installation.

Also, that's wonderful to hear that it worked in Paged.js. For some reason it wasn't cooperating for me. @geealbers I believe this means we can close this issue.

Finally, when you create a new PDF (after quire build and quire pdf) make sure you close all tabs in Adobe Acrobat before reopening the PDF. Otherwise, you'll still see the old version.

[zsofiaj]

@Erin-Cecele Thank you for all of this. I didn't realize that I hadn't installed Prince yet. I've installed it now, and it seems to be working fine. I made sure to always close the old pdfs and tabs in Acrobat and Preview, then ran quire build and quire pdf, and it still doesn't seem to update everything. I always have to run those commands twice in a row. Strange. But I'll just keep doing that for now.

[geealbers]

@zsofiaj can you try deleting the public folder in your project (if there is one) before you run quire build and see if that helps avoiding having to run the commands twice?

[zsofiaj]

Thanks @geealbers . I tried deleting the public folder, and I still have to run the commands twice for any updates to show up. When I ran quire build after deleting the public folder, the folder and contents did reappear in the same place as before. But maybe you were expecting that.