lots of extra blank pages when printing CV about jekyll-theme-basically-basic HOT 28 CLOSED

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

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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

from jekyll-theme-basically-basic.

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)

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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?

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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..

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

@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.

from jekyll-theme-basically-basic.

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

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

and here is a stackoverflow thread that is probably relevant.

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

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

@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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

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

from jekyll-theme-basically-basic.

from jekyll-theme-basically-basic.

@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.

from jekyll-theme-basically-basic.

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.

from jekyll-theme-basically-basic.

@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?

from jekyll-theme-basically-basic.

@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.

from jekyll-theme-basically-basic.