6

While testing a CSS fix for this printing bug I noticed that, for some reason, answers and comments are a lot narrower than questions when printed, taking up only a small fraction of the available page width:

Printed Stack Overflow question page with lots of whitespace
(Click to enlarge.)

Given that the SE style sheet does include a set of @media print styles intended to make questions and answers print nicely (e.g. by hiding non-essential elements of the page, and adjusting some — but not all — of the page element widths), this seems like a simple design oversight that should be fixed.

4

The following extra CSS seems to fix this:

@media print {
    .container, .post-text, .comments, .answer, #answers-header, pre {
        width: auto !important;
    }
    .question > table, .answer > table {
        width: 100%;
    }
}

(The !important isn't really needed if these styles are added after the SE style sheet.)

Here's what the same SO question page looks like with these styles added:

Printed Stack Overflow page with fixed comment and answer widths
(Click to enlarge.)

Much nicer, isn't it? And it saves paper, too.

I've tested this fix on both Chrome and Firefox, in both portrait and landscape mode, and it seems to work nicely and consistently. (I did waste some time wondering why Chrome was making the text too wide, before I realized that I had zoom set to 150% in the print dialog. Oops.)

Ps. Actually, most* of the hardcoded pixel widths that the extra styles above override are already explicitly specified in a @media print block in the SE style sheet. So the proper fix for those elements would be to just change all those widths to auto in the style sheet.


*) Specifically, those for .container, .comments, .answer and pre.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .