lots of extra blank pages when printing CV

[mikaelkaron]

For some reason I see a bunch of extra blank pages when trying to print the CV view.

To reproduce:

• Load a long CV page
• crtl+p (or whatever your OS has for print preview)
• Scroll to the bottom and see the extra blank pages at the end
• note: While trying to debug this with my own CV I only see one extra blank page

As a side note .sidebar should probably be hidden to as I can see the background of it in the preview.

[mmistakes]

The extra blank pages is a goofy thing Chrome does due to how it's interpreting the height of some elements. It's essentially stretching them causing the blank pages.

Will have to dig out the fix as I've addressed the same issue in several of my other themes.
ref: mmistakes/minimal-mistakes#1196

As far as the sidebar showing up, just need to add .sidebar to these items, that are also hidden when printing.

[mikaelkaron]

Props for the fast answer! Awaiting a fix eagerly (I was banging by head against this for the last hour before finally giving up)

[mikaelkaron]

Tried to mirror the fixes from mmistakes/minimal-mistakes@20821e6 in rosekaron/rosekaron.github.io@c440215 but there's still a lot of blank pages (perhaps a bit naive to think that would work)

[mmistakes]

Pushed some tweaks to _print.scss. On the demo site all of the blank pages are gone when printing in Chrome. You may still see a few depending on the length of your page.

There's not much I can do about due some Chrome quirks when printing.

[mikaelkaron]

I'm still seeing a lot of white pages here but only one here. I would not mind taking a stab at fixing this myself but I can't figure out what elements are actually causing all of this.

If you have some references or if you could explain a bit further what's going on maybe I could give it a go?

[mmistakes]

Like I said this one is really hard to debug. What's going on is Chrome determines the height of some elements that are being hidden, and when they're hidden with display: none it's still assigning that space to it.

Which is where the blank pages are coming from as far as I can tell.

It's really easy to check because in the print stylesheet you can add something like border: 1px solid red; to the * selector, which gives every element a red border. Then when you print preview the page you can see what element is an issue.

Only problem is there are no elements on the blank pages. It's this miscalculating of height that I can't work around. I've tried all the tricks I could.

[mmistakes]

References: https://stackoverflow.com/questions/7846346/how-to-avoid-extra-blank-page-at-end-while-printing

[mmistakes]

As you can see, if I add a red border to every item and then do a print preview, nothing is spilling over onto the blank pages.

I have no idea if this is an actual bug with Chrome or expected behavior, but it sure feels like a bug to me.

[mikaelkaron]

Yeah, I can see the same.. I'm going to try a crazy thing - trying to render the CV directly using PDF.js and see if the same problem occurs.

BTW.. this may be related but trying to print using FF/Edge only shows the first page..

[ghost]

Why don't you just use an if-then statement instead of the display none. With the display none, the element is still part of the Dom right?
Or another word the display none sucks, haha.

[mmistakes]

@14u2ponder How would an if-then statement help here? CSS is what controls the print stylesheet. There isn't a print "layout" that you can selectively turn off or hide parts of the page. That's where display: none comes into play.

[mmistakes]

@14u2ponder https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

[ghost]

I don't think I understood the question when I suggested if-then. I just know from experience that display: none has a lot of unintended side effects.

I will say that I tested your stylesheet and it works perfectly in chrome, but firefox needs work. I'm using linux and firefox is only trying to print the first page and nothing else. I haven't really got into the theme as a whole as I just decided today that I am going to use it for my theme. It is really nice.
I am also going to try to send you some money for my "license" once I get my bills caught up.

As an example, that hero image pushes everything to the bottom of the page even though you have it display: none. I might check out how bootstrap did this because I think they were able to get it right.

[ghost]

Okay by process of elimination, I've determined that the css that is causing firefox to show only 1 page is in your base.css file. When you comment out base.css from the import, firefox prints perfectly.
I'll see if I can find the style that is causing the problem.

[ghost]

Found the theme's problem. Change display: flex to display: block. Boom! Firefox prints all pages.

[mikaelkaron]

and here is a stackoverflow thread that is probably relevant.

(and here's the link to the firefox bug in question)

[ghost]

A more long term solution might be to go with css grid instead of flexbox. I see the theme uses suzy grid which is a good solution but the cool kids are using css grid in 2018. Just a suggestion.

[mmistakes]

I'm not using flexbox for much so I don't think it's that big of issue.
Once CSS grid has more support I'll make the switch, just don't want to deal with fallback styles for such a simple grid layout right now.

[ghost]

@mikaelkaron I just want you to know that on my google chrome there are no extra white pages at http://rose.karon.se/cv. You might need to clear your browser or something cause it works fine for me.

[mmistakes]

Does adding display: block to the body element in _print.scss have any adverse reactions to the print layout? If not and someone wants to submit a pull request I can get this small fix merged in.

[ghost]

I haven't tried it. I basically just changed base.css. with the display: flex you have flex behavior, but it does not affect the layout much at all from what I've seen. Just add it and test it. My opinion is that support for printing far outweighs the tricks I can have with a flexbox setup.

[ghost]

The best thing about this theme and his code is that it is very un-opinionated. He wanted to make a theme that all you have to do is use markdown and it just works. As far as I can tell although I haven't looked over his code completely, he just added the grid system and flexbox more as a feature than a core element. Something that you can use if you want to use it.

[mmistakes]

So I tested removing display: flex from body and it doesn't break the layout. I believe that was put in there at one point when I was using flexbox order to rearrange things visually, but having them marked up in a semantic order.

That's not needed anymore so I'm fine removing it.

Seems to fix the single page print issue with FF and Edge. ref: f848524

[mikaelkaron]

Funny thing about chrome there, is it possible this got fixed since I tested this last? I’ll have to go back and test ;) thanks for the heads up on the working CV and thank you for spending time on triaging this (and of course thank you Michael for making the initial theme) : M

[mmistakes]

@mikaelkaron Don't think it has been fixed in Chrome. I tested a long CV page and it still outputs a few blank pages. It's less than before but still present.

[ghost]

That's funny because I'm using Chrome and I have no problems. Of course I'm using Chrome on Linux so I don't know if you guys are using Mac or what not. I'm not sure.

[mmistakes]

@14u2ponder Think it depends on the CV. The one on the demo site has no blank pages when I test it, this one does. What does it do for you using Chrome on Linux?

[mmistakes]

@14u2ponder Scratch that. Seems like it definitely is an operating system/browser thing. On Windows Chrome I get all the blank pages... on macOS Chrome there are none.

I'm going to go ahead and close this as it seems pretty clear to me it's the browser's issue and not the theme.