v0.1.3

src/App.vue

@@ -21,6 +21,7 @@ const hours = [
 ]
 
 const timetableCellCount = hours.length * 6
+let printPageStyleElement = null
 
 function createEmptyTimetable() {
   return Array.from({ length: timetableCellCount }, () => false)
@@ -601,8 +602,29 @@ function clearTaskLabels(record) {
   })
 }
 
+function applyPrintPageStyle(layout) {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const pageRule =
+    layout === 'double'
+      ? '@page { size: A4 landscape; margin: 0; }'
+      : '@page { size: A4 portrait; margin: 0; }'
+
+  if (!printPageStyleElement) {
+    printPageStyleElement = document.createElement('style')
+    printPageStyleElement.setAttribute('data-print-page-style', 'true')
+    document.head.appendChild(printPageStyleElement)
+  }
+
+  printPageStyleElement.textContent = pageRule
+  document.body.dataset.printLayout = layout
+}
+
 async function printSelectedPlanner(layout = 'single') {
   printLayout.value = layout
+  applyPrintPageStyle(layout)
   await nextTick()
   window.print()
 }

src/style.css

@@ -22,11 +22,6 @@
 }
 
 @media print {
-  @page {
-    size: A4 landscape;
-    margin: 0;
-  }
-
   html,
   body {
     background: #ffffff !important;
@@ -53,24 +48,33 @@
   }
 
   .print-paper {
-    width: 297mm;
-    height: 210mm;
     display: flex !important;
     align-items: center;
     justify-content: center;
     background: #ffffff !important;
     padding: 0;
+    overflow: hidden;
+  }
+
+  body[data-print-layout='single'] .print-paper {
+    width: 202mm;
+    height: 289mm;
   }
 
   .print-paper--double {
     display: grid !important;
-    grid-template-columns: repeat(2, 148mm);
+    grid-template-columns: repeat(2, 143mm);
     justify-content: center;
     align-content: center;
     gap: 0;
   }
 
-  .print-paper--single .print-sheet-frame {
+  body[data-print-layout='double'] .print-paper {
+    width: 289mm;
+    height: 202mm;
+  }
+
+  body[data-print-layout='single'] .print-paper--single .print-sheet-frame {
     width: 148mm;
     height: 210mm;
   }
@@ -83,29 +87,29 @@
     background: #ffffff !important;
   }
 
-  .print-paper--double .print-sheet-frame {
-    width: 148.5mm;
-    height: 210mm;
+  body[data-print-layout='double'] .print-paper--double .print-sheet-frame {
+    width: 143mm;
+    height: 202mm;
   }
 
   .planner-sheet {
     box-shadow: none !important;
   }
 
-  .print-paper--single .print-sheet-frame .planner-sheet {
+  body[data-print-layout='single'] .print-paper--single .print-sheet-frame .planner-sheet {
     width: 762px !important;
     max-width: none !important;
     transform-origin: top left;
-    transform: scale(0.732);
+    transform: scale(0.718);
     box-shadow: none !important;
     background: #ffffff !important;
   }
 
-  .print-paper--double .print-sheet-frame .planner-sheet {
+  body[data-print-layout='double'] .print-paper--double .print-sheet-frame .planner-sheet {
     width: 762px !important;
     max-width: none !important;
     transform-origin: top left;
-    transform: scale(0.731);
+    transform: scale(0.703);
     box-shadow: none !important;
     background: #ffffff !important;
   }