search

cognitom / paper-css

Paper CSS for happy printing
https://www.npmjs.com/package/paper-css
MIT License
2.51k stars 342 forks source link

How to use other page size like 58mm? #3

Open chenweiyj opened 8 years ago

chenweiyj commented 8 years ago

I am going to print receipt used in supermarket, where its width is 58mm. How can I use this pager-css in self-defined page size?

cognitom commented 8 years ago

Hi @chenweiyj, The paper sizes are defined here and here.

You can add any paper size like this in your css file:

body.receipt .sheet { width: 58mm; height: 100mm } /* change height as you like */
@media print { body.receipt { width: 58mm } } /* this line is needed for fixing Chrome's bug */

Then HTML file could be like this:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>receipt</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="../paper.css">
  <style>@page { size: 58mm 100mm }</style>
</head>

<body class="receipt">
  <section class="sheet padding-10mm">
    ...
  </section>
</body>
</html>

The point is that we need to set the size value in @page section, too. Have a fun! See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

cognitom commented 8 years ago

We can also write them together in <style> tag. This could be more manageable if you use the paper size in only one document.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>receipt</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="../paper.css">
  <style>
    @page { size: 58mm 100mm } /* output size */
    body.receipt .sheet { width: 58mm; height: 100mm } /* sheet size */
    @media print { body.receipt { width: 58mm } } /* fix for Chrome */
  </style>
</head>

<body class="receipt">
  <section class="sheet padding-10mm">
    ...
  </section>
</body>
</html>
abinkuruvilla commented 5 years ago

really helpful for silent printing. thanks.

benjir01 commented 4 years ago

Any video Tutorial

tunakode commented 3 years ago

Hi @chenweiyj, The paper sizes are defined here and here.

You can add any paper size like this in your css file:

body.receipt .sheet { width: 58mm; height: 100mm } /* change height as you like */
@media print { body.receipt { width: 58mm } } /* this line is needed for fixing Chrome's bug */

Then HTML file could be like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>receipt</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="../paper.css">
  <style>@page { size: 58mm 100mm }</style>
</head>

<body class="receipt">
  <section class="sheet padding-10mm">
    ...
  </section>
</body>
</html>

The point is that we need to set the size value in @page section, too. Have a fun! See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

If continuous paper printing, should I set height to auto or just not defined height??