Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
chenweiyj opened this issue Oct 5, 2016 · 5 comments
Open

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

chenweiyj opened this issue Oct 5, 2016 · 5 comments
Labels
question

Comments

@chenweiyj
Copy link

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
Copy link
Owner

cognitom commented Oct 5, 2016 •
edited

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
Copy link
Owner

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
Copy link

really helpful for silent printing. thanks.

@benjir01
Copy link

Any video Tutorial

@tunakode
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cognitom @chenweiyj @benjir01 @abinkuruvilla @tunakode