CSS bug with printing site pages (now with 100% more suggested fix included!)

Question

So I have to print some Stack Overflow pages and bring them around. Just accept it.

Problem: while pages may look perfectly normal on the web, something recently broke the print layout... a huge whitespace block showed up on the right (normal, print). Tons of whitespace. This is on every site on the network (example) on a bunch of different screens (example).

Futzing with DevTools, the problem seems to be the following piece of css:

#mainbar, .mainbar {
    width: calc(100% - 300px - 24px);
}

Can someone check if this is the only issue and possibly fix this?

Answer 1

This is fixed.

Our previous style rules were more or less, "If we're printing, hide this list of elements."

Now, it's a lot smarter, thanks to responsive design. We have a few methods for handling responsive breakpoints:

.if-responsive-and-below-breakpoint(@breakpoint, @rules)
.if-responsive-and-above-breakpoint(@breakpoint, @rules)
.if-responsive-and-between-breakpoints(@smaller-breakpoint, @larger-breakpoint, @rules)

These methods let you turn on extra styles if you're on a narrow screen. For example, the following code constrains page content to accommodate a sidebar. When the page gets narrow, the width expands and the sidebar moves below the main content.

#mainbar,
.mainbar {
    width: ~'calc(100% - @{sidebar-width} - @{su-24})'; // 100% - width sidebar - spacing between sidebar and content

    .if-responsive-and-below-breakpoint(@breakpoint-l, {
        width: 100%;
        float: none;
    });
}

I simply amended if-responsive-and-below-breakpoint to treat printed pages as the narrower than any breakpoint, so it would render in the same way as a mobile view:

.if-responsive-and-below-breakpoint(@breakpoint, @rules) {
    // ...

    // Print is the smallest viewport, below medium and large
    @media print {
        @rules();
    }
}

I also added some small refinements, hiding a few elements like "Ask Question" as well as removing some vertical padding from the hidden topbar.

Answer 2

This is not a fix for the main site but using the mobile site to print pages works fine

Here is a preview of the printout.

Answer 3

The suggested fix is correct. It seems that the CSS in question (width: calc(100% - 300px - 24px);) is used to reduce the width to make space for the sidebar, which is 300 pixels wide with a 24 pixels left margin. However, the sidebar is hidden (with display:none) in print view, but the width of the content section is not allowed to fill the remaining space.

I wrote some JavaScript code which appends a style block with the appropriate CSS ruleset so that the width is set to 100%, but only in print view. It also executes the window.print() function. The code can be used as a bookmarklet (by copying the code to your bookmark toolbar).

Here is the code:

(function() {
    var css = '@media print {#mainbar, .mainbar {width: 100%;}}';
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));

    document.head.appendChild(style);
    window.print();
})();

To use it, just run the following snippet and then drag the link into your bookmark toolbar. The code is in the link, but minified.

<a href="javascript:(function(){var css='@media print {#mainbar, .mainbar {width: 100%;}}';var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode(css));document.head.appendChild(style);window.print()})();">Print with Fix</a>

This of course is just a workaround while we wait for the real fix.

By the way, the real fix would simply look like this:

@media print {
    #mainbar, .mainbar {
        width: 100%;
    }
}