Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force A5 Paper-size in Chrome's print settings CSS

I've to print out 2 html pages in a web-app. The first page must be printed out in A5 size , the second in A4 size. I tried to force the a5 print settings with

@media print{
    @page {
        size: a5 landscape;
        margin: 0;
    }
}

and the a4 print settings in the other file with

@media print {
    @page {
        size: a4;
        margin: 0;
    }
}

A4 is working fine, but if I try to print the A5 page , paper-size doesn't change (but landscape mode is set)

like image 392
oldmayn Avatar asked May 19 '17 08:05

oldmayn


People also ask

How do I change the default paper size in Chrome?

Step 1: Click the three dots on the upper right corner of your Google Chrome browser to expand the More Options list. Step 2: Select Print. Step 3: Click on More Settings. Step 4: Select the correct paper size from the dropdown.


1 Answers

You could uset paper-css library as it will help you easily define the paper size by paper-css lib load the css file

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

then set the style in the <head> part

<style>@page { size: A5 }</style>

then set the body class to A5 like the following

<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<body class="A5">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article>This is an A5 document.</article>

  </section>

</body>

for more information follow the link below https://github.com/cognitom/paper-css

like image 154
Hussam Kurd Avatar answered Sep 28 '22 01:09

Hussam Kurd