[Resolved] How to get rid of sidebar margin in @media print?

[Neil]

Hi

I’ve got the following CSS for printing out pages:

@media print {
      #breadcrumbs,
      .side-header, 
      .main-navigation, 
      .secondary-navigation, 
      .widget-area, 
      .site-logo,
      .footer-widgets {
            display: none;
      }

      .content-area {
		width: 100%;
	}

      body {
                color: #000;
		font-size: 11pt;

      }
	
}

I’m trying to make the text span the page, but there is a wide white margin where the non-displayed right sidebar is. How can I get rid of the margin?

Any help is appreciated!

[Neil]

OK, I think I’ve figured it out – instead of

.content-area {
		width: 100%;
	}

using

	#primary.content-area {
		width: 100%;
		margin: 0;
	}

seems to work.

What I can’t figure out is how to implement page break rules, which I found on the WordPress Codex site:

h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid; }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid; }
ul, ol, dl  { page-break-before:avoid; }

This doesn’t seem to do anything. I still get headings at the bottom of a page, and the body text starting on the next page.

Also, I can’t get @page margins to work. At the moment, the margin at the top of each page (except the first page) is too small, while the right margin is still slightly too large. Left and bottom margins are fine…

[David]

Hi there,

for the page margins – you could try this:

#page {
    max-width: 100%;
}

This will force the page to fill the available print space.

Regarding page breaking – not a great deal of knowledge on this matter but page-break-before/after have been updated on modern browsers to:

break-before
break-after

See here for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

But these are still suggestive – as not in all cases can it enforce those rules. And adding avoid to all H elements is probably going to do nothing more then the browser would do without those properties.

For long documents an example general rule would be:

h2 {
   break-before: always;
}
h3, h4, h5, h6, ul, ol, dl {
   break-after: avoid;
}

This would infer that all H2’s start a new page, and any sub headings or lists on that page it will try to avoid the breaking them.

In your case as the documents are ‘shorter’ you may be better adding classes to specific elements to apply those rules. eg.
A CSS class of: break-before added to a specific H2. Then:

.break-before {
    break-before: always;
}

This will allow you to determine where page breaks are added as those you can rely on. Whereas trying to avoid is going to be determined by the end user device….

[Neil]

Many thanks for your help, David – the instructions being “suggestive” explains a lot! CSS classes would probably be the way forward, but that would also mean an awful lot of work if one were to implement it on a page-by-page basis.

Anyway, thanks for taking the time to explain!

[David]

Yeah – its no fun trying to format HTML for a perfect print layout.
Glad to be of some help

[Author]

Posts