1

Perhaps a dumb question.

I have different styles for print and screen media. I have multiple pages I would like to show to the user in A4 format (without printing). From there, the user can print the page if he/she wants.

For myself, I emulate css media in chrome for the moment. But this is not a solution.

What is the simplest solution here?

nakiya
  • 14,063
  • 21
  • 79
  • 118

2 Answers2

2

The ratio of an A4 page is about 1.414.

This means that if you want to "emulate" an A4 display, you can do so by simply creating a div with the corresponding ratio : 

.A4 {
  width: 300px;
  height: calc(300px * 1.414);
  border: 1px solid #ddd;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
<div class="A4">
  <p>Title of the page</p>
  <p style="font-size: 8px; padding: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi velit, dapibus quis volutpat at, dapibus sed neque. In hac habitasse platea dictumst. Fusce ut consequat est. Mauris vitae posuere odio. Aenean sit amet metus vel justo consequat porta. Maecenas molestie odio sit amet maximus posuere. Donec luctus consequat faucibus. Nulla sollicitudin molestie bibendum. Mauris elementum tincidunt lobortis. Proin ullamcorper libero vel elementum vehicula. Maecenas in lorem nibh. Ut non gravida ipsum, eu auctor turpis. Aenean imperdiet feugiat ex vitae pharetra.</p>
</div>
  • But how do you "make" browser use print styles instead of the screen ones? – nakiya Jan 30 '18 at 08:11
  • What do you mean, you want to print your style sheet ? Or you want to print only the displayed "emulated" A4 page ? –  Jan 30 '18 at 08:12
  • I want the user to see an "emulated" page. Then they may choose to print the page. But this is not the same as a print preview. The problem is that while I can emulate the A4 dimensions, I can't make the browser apply the print stylesheet to it. i.e. I have `@media print { ...` styles. – nakiya Jan 30 '18 at 08:28
  • I would use Javascript to do that. **[Something like this ?](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div)** –  Jan 30 '18 at 08:37
1

You can have an other template with your print css enabled on screen.

Instead of @media print inside your stylesheet you can define a print.css that you include in your regular template with media=“print” and in your preview template with media=“screen”

Gabriel Bleu
  • 9,703
  • 2
  • 30
  • 43