4

Hello I would like to create some page using css print. I looked around and the web I tried some stuff but saddly the alignment is not working.

The Layout I want to produce: My layout

here is my html 

<section class ="page_1">
   <p class="paragraph_1"> .... </p>
   <p class="paragraph_2"> .... </p>
</section>

So I tried to make some css with the print media query

@page {
   size: 8cm 13cm; /*custom size*/
   }
 @media print {
   section[class ^="page"] {
     position: relative;
     /*Same as the page size*/
     width: 8cm;
     height: 13cm;
     display: flex;
     justify-content: space-around;
     flex-direction: column;
     align-items: center;
     page-break-after: always;
     padding: 0.5cm 2cm;
   }
   p[class ^="paragraph"] {
     /*NOTHING TO ADD FOR THE ALIGNEMENT*/
   }
 }

It did not go as expected. (leave blank page and does not flex the elements)

Felox
  • 503
  • 3
  • 10
  • 23
  • 3
    I think the issue is that browser printing technology is a crapshoot from browser to browser. Browser developers focus on providing the latest compatibility with web standards to display a web page, but the printing feature is the neglected stepchild. If you really need to format a page for printing, your best bet is to treat it like laying out an HTML Email, and use legacy ways to layout your page (like tables, floats and absolute positioning rather than flexbox). And of course, test it in as many browsers as you can get your hands on. – Dan S Oct 10 '21 at 14:31

1 Answers1

0

I struggled with something similar for half-a-day. In my case it was about getting rid of the flex in the direction the pages print (i.e. top-down):

display: flex; /* try to replace this with non-flex CSS rule */
flex-direction: column; /* try to replace this with non-flex CSS rule */

Or, of course, you can read a lot of CSS and figure out how to make flex items grow/shrink and print-brake as you wish.

MadJoRR
  • 240
  • 2
  • 9