Set page size in CSS

generator/css/card-size.css

@@ -12,11 +12,6 @@
     3) Fill each page with cards, arranged around the center of the page.
 */
 
-/* Remove page margins */
-@page {
-    margin: 0;
-    padding: 0;
-}
 
 /* Center all content within a page */
 .page {
@@ -26,37 +21,36 @@
     flex-direction: row;
     flex-wrap: wrap;
     page-break-after: always;
-    padding: 0mm;
+    padding: 0;
 }
 
-/* A4 paper area (minus epsilon for rounding) */
+/* A4 paper area */
+/* Chrome has problems with page sizes given in metric units. Make the paper area slightly smaller to work around this. */
 page[size="A4"] {
-    width:  209mm; /* full: 210.0mm */
-    height: 295mm; /* full: 297.0mm */
+    width:  210mm; /* full: 210.0mm */
+    height: 296mm; /* full: 297.0mm */
 }
 
-/* US letter area (minus epsilon for rounding) */
+/* US letter area */
 page[size="Letter"] {
-    width:  215mm; /* full: 215.9mm (8.5in) */
-    height: 278mm; /* full: 279.4mm (11.0in) */
+    width:  8.5in;
+    height: 11.0in;
 }
 
 page[size="25x35"] {
-    width: 63.6mm;
-    height: 89.0mm;
+    width: 2.5in;
+    height: 3.5in;
 }
 
 /* Default card size */
 .card {
     width:2.5in;
-    min-width:2.5in;
     height:3.5in;
 }
 
 /* Bridge card size */
 .card-size-225x35 {
     width:2.25in;
-    min-width:2.25in;
     height:3.5in;
 }
 .card-size-225x35 .card-back-icon {
@@ -67,7 +61,6 @@ page[size="25x35"] {
 /* Poker / Magic card size */
 .card-size-25x35 {
     width:2.5in;
-    min-width:2.5in;
     height:3.5in;
 }
 .card-size-25x35 .card-back-icon {
@@ -89,7 +82,6 @@ page[size="25x35"] {
 /* Landscape big card */
 .card-size-75x50 {
     width:7.5in;
-    min-width:7.5in;
     height:5.0in;
 }
 .card-size-75x50 .card-back-icon {
@@ -97,6 +89,7 @@ page[size="25x35"] {
     height: 2in;
 }
 
+/* Card sizes that fill out the entire sheet of paper (minimal margins) */
 .page[size="A4"] .card-size-full3x3 {
     width:69mm;
     height:98mm;

generator/css/output.css

@@ -18,11 +18,15 @@ body {
 @media print {
   .page-preview {
     margin: 0;
+    padding: 0;
+    border: 0;
     box-shadow: 0;
     background-color: white;
   }
   .page-background {
     margin: 0;
+    padding: 0;
+    border: 0;
     box-shadow: 0;
     /* Set the background to gray to visualize the page size in the print preview */
     background-color: gray;

generator/js/cards.js

@@ -309,6 +309,28 @@ function card_pages_wrap(pages, options) {
     return result;
 }
 
+function card_pages_generate_style(options) {
+    var size = "a4";
+    switch (options.page_size) {
+        case "A3": size = "A3 portrait"; break;
+        case "A4": size = "210mm 297mm"; break;
+        case "A5": size = "A5 portrait"; break;
+        case "Letter": size = "letter portrait"; break;
+        case "25x35": size = "2.5in 3.5in"; break;
+        default: size = "auto";
+    }
+
+    var result = "";
+    result += "<style>\n";
+    result += "@page {\n";
+    result += "    margin: 0;\n";
+    result += "    size:" + size + ";\n";
+    result += "    -webkit-print-color-adjust: exact;\n";
+    result += "}\n";
+    result += "</style>\n";
+    return result;
+}
+
 function card_pages_generate_html(card_data, options) {
     options = options || card_default_options();
     var rows = options.page_rows || 3;
@@ -351,8 +373,12 @@ function card_pages_generate_html(card_data, options) {
         pages = card_pages_split(cards, rows, cols);
     }
 
-    // Wrap all pages in a <page> element
-    return card_pages_wrap(pages, options);
+    // Wrap all pages in a <page> element and add CSS for the page size
+    var result = "";
+    result += card_pages_generate_style(options);
+    result += card_pages_wrap(pages, options);
+
+    return result;
 }
 
 function card_pages_insert_into(card_data, container) {