Printing UG and DG Splits the Images/Text At Page Break

[sevenseasofbri]

On using the print option in the chrome browser to obtain a PDF of the tp UG or DG (jekyll theme: Minima):

The PDF is rendered, however, at page breaks it looks something like this:

Sometimes, even the titles are split at page breaks. I have tried the following things:
(some involving CSS which I'm not very proficient in, so I'm probably doing something wrong)

• Played with the settings in the print mode and seeing whether anything changes. (A trivial thing, most definitely didn't help)
• One thing I did was try and render the web page after changing some settings in the developer tools:
  

Selecting the "print" style under rendering:

However, this was to no avail :(

• Another thing is saw a post in stackoverflow recommended changing the CSS style of the theme (?) . So according to this link one may customise the CSS of a jekyll theme in the following manner:

So I created style.css in assets and populated it with the following (+ the import statement from the instructions):

@media print {
    div, image, svg {
        break-inside: avoid;
    }

However, still can't seem to print without splitting images and text at page breaks. I think this will be considered as a UG/DG bug if the pdf is like this..

I speculate I'm doing something wrong with CSS OR that I might have to go through the process of installing Bundler and then the Ruby Gems to set up the webpage with jekyll and then be able to add to the existing CSS files. However, still not quite sure.

It would be great to get some help on this issue ^_^"

Thank you in advance!

[okkhoy]

Let me check and reply here.

[okkhoy]

Tip from CS2103:

when we wanted to convert to PDF without lines being split was that we added <div style="page-break-after: always;"></div> at places where we wanted the page to break when printing (to PDF). Of course, this is a manual process, so it's best to only do so once your portfolio page is finalised

[okkhoy]

The guide page has been updated with this workaround: https://se-education.org/guides/tutorials/savingPdf.html

[sevenseasofbri]

@okkhoy I see. Alright thank you so much Prof!