Is it possible to show print layout as html page without actually printing?

Issue

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 solution here?

Solution

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>

Answered By - user4676340