tigerMike tigerMike - 1 month ago 5
CSS Question

CSS for Printing onto Perforated Cards

I have a dataset, and I need to print data onto these cards (one row of data per card):
https://www.magnatag.com/item/CD28

I am having a real hard time with the formatting. The printer they are being printed on can print all the way to .2 from the edge of 8.5 x 11 paper like this. The users want to print that far to the left and right, but the rows have to stay within card boundaries obviously.

The cards being used are all white, and one of the data points is a color the card will be printed in. To keep the example easier/cleaner than the real life problem, assume this markup:

<body>
<div class="cardSheet">
<div class="card blue">Content</div>
<div class="card red">Content</div>
<div class="card green">Content</div>
<div class="card green">Content</div>
<div class="card red">Content</div>
<div class="card blue">Content</div>
<div class="card green">Content</div>
<div class="card red">Content</div>
<div class="card green">Content</div>
<div class="card green">Content</div>
</div>
</body>


After the fifth row, the next row will print on the second page, etc.

There is a good bit of formatting within an individual card, but I think I can handle that. Getting 5 printable boxes per page that will print onto these cards (with .21" left and right margins in print preview, top/bottom per the card)

If varying browsers adds complexity, assume Google Chrome v 53.x

Thanks in advance for any help!

Answer

You will need to put this on a page by itself to test it. I did a few runs but I dont have any letter size pager here only a4 to test. It looks like it will work though. I used chrome and set margins to none in the print options.

I only did a quick run to show one page but you can easily add a page break after the 5th card to go to the next page. If you dont know how to do that then I can help out later with that.

Hope this helps and if you need help understanding something leave a comment.

printBlock("blue");
printBlock("red");
printBlock("green");
printBlock("green");
printBlock("red");

function printBlock(color) {

  var block = "<div class='card " + color + "'>CONTENT<div>";

  $(".page").append(block);
}
* {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.page {
  width: 215.9mm;
  min-height: 279.4mm;
  margin: 1cm auto;
  position: relative;
  padding-left: 6.35mm;
  padding-top: 19.05mm;
  outline: 1px solid cyan;
}
.card {
  position: relative;
  width: 203.2mm;
  height: 50.8mm;
  background-color: #FFF;
  float: left;
  outline: 1px dashed #000;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
}
.blue {
  background-color: #DBFFFF;
}
.red {
  background-color: #FFDBDB;
}
.green {
  background-color: #EDFFDB;
}
@page {
  size: 215.9mm 279.4mm;
  margin: 0;
}
@media print {
  .page {
    margin: 0;
    border: initial;
    width: 215.9mm;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    outline: none;
  }
  .card {
    outline: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="page"></div>

Comments