From 2d6281c1450ae4fe45ed90f30481c0859833cd2e Mon Sep 17 00:00:00 2001
From: Mark Nottingham <mnot@mnot.net>
Date: Wed, 6 Dec 2023 14:18:03 +1100
Subject: [PATCH] Make printing nicer

---
 asset/style.css | 36 +++++++++++++++++++++++++++++++-----
 index.html      |  8 ++++----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/asset/style.css b/asset/style.css
index c184f9c..244b0de 100644
--- a/asset/style.css
+++ b/asset/style.css
@@ -83,15 +83,10 @@ th.category a {
 }
 
 #key {
-  position: fixed;
-  bottom: 0;
-  width: 80vw;
-  left: 10vw;
   background-color: white;
   margin-bottom: 0;
   padding: 10px;
   border: 1px solid #999;
-  border-bottom: none;
 }
 
 input.select {
@@ -173,3 +168,34 @@ pre code {
 .noFrame {
   display: none;
 }
+
+
+@page {
+  size: A4;
+  margin: 11mm 17mm 17mm 17mm;
+}
+
+@media screen {
+  #key {
+    position: fixed;
+    bottom: 0;
+    width: 80vw;
+    left: 10vw;
+    border-bottom: none;
+  }
+}
+
+@media print {
+  html, body {
+    width: 210mm;
+    height: 297mm;
+  }
+
+  #key {
+    width: 100%;
+  }
+
+  .noPrint * {
+    display: none;
+  }
+}
diff --git a/index.html b/index.html
index 5de2ffa..db8f814 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,7 @@ <h1 class='noFrame'>HTTP Caching Tests</h1>
     implementation's results, file issues or learn more, see <a
     href="https://github.com/http-tests/cache-tests">the repository</a>.</p>
 
-    <p class='noFrame'>See also <a href="/spec/rfc9111.html">test results interspersed with the current specification text</a>.</p>
+    <p class='noFrame noPrint'><span>See also </span><a href="/spec/rfc9111.html">test results interspersed with the current specification text</a>.</p>
 
     <p id="key">
       <span class="key-item"><span class="fa" data-kind="pass"></span>passed &nbsp;</span>
@@ -77,16 +77,16 @@ <h1 class='noFrame'>HTTP Caching Tests</h1>
       <span class="key-item"><span class="fa" data-kind="untested"></span>not tested</span>
     </p>
 
-    <ul id="ToC" class="noFrame">
+    <ul id="ToC" class="noFrame noPrint">
     </ul>
 
     <form method="GET" id="selectForm">
 
-      <p class="noFrame"><i>
+      <p class="noFrame noPrint"><i>
         Click on test names for details of what is sent and checked. Hover over failed tests for the reason why they failed.
       </i></p>
 
-      <p class="noFrame">
+      <p class="noFrame noPrint">
         <a href="#" id="select">Select test results to display</a>
       </p>