From ec7bbee3e24f1de0c8dc4557f58c28dcb6595b3e Mon Sep 17 00:00:00 2001
From: Alexander Mahr <info@alexmahr.de>
Date: Thu, 22 Jun 2023 05:38:07 +0200
Subject: [PATCH] improve word.html

---
 word.html | 181 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 120 insertions(+), 61 deletions(-)
diff --git a/word.html b/word.html
index a8a4c02..cf4eefd 100644
--- a/word.html
+++ b/word.html
@@ -1,9 +1,11 @@
-<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-7">
 
     <div id='header'>
-        <div id='titellabel'>document name:
+        <span id='titellabel'>document name:
             <title contenteditable="true">document</title>
-        </div> 
+        </span> 
     </div> 
     
     <style>
@@ -39,6 +41,19 @@
         border: 1px solid black;
         padding:4px;
     }
+    .sheet {
+        margin: 0;
+        overflow: hidden;
+        position: relative;
+        box-sizing: border-box;
+        page-break-after: always;
+        height: 307mm;
+        width: 100%;
+        background-color:#fff;
+        position:relative;
+        border:0;
+        display:block;
+    }
     @media print {
         head, #header,title  {
             display: none;
@@ -47,46 +62,12 @@
             padding-top:0;
         }
     }
-
     @page { margin: 0 }
     body { margin: 0 }
-
-    .sheet {
-        margin: 0;
-        overflow: hidden;
-        position: relative;
-        box-sizing: border-box;
-        page-break-after: always;
-        height: 297mm;
-        width: 210mm;
-        background-color:#fff;
-        position:relative;
-        border:0;
-    /* padiding should be done in the iframe itself, allowing itself better printing */
-    /*    padding:2cm;*/
-        display:block;
-    }
-
-    /** For screen preview **/
-    @media screen {
-      body { background: #e0e0e0 }
-      .sheet {
-        background: white;
-        box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
-        margin: 5mm auto;
-      }
-      .textArea {
-        box-shadow: 0 0 2px 1px grey;
-      }
-    }
-    div {
-    display:inline
-    }
     @media print {
         body { width : 210mm; }
     }
     @page { size: 210mm 297mm; }
-
 </style>
     </head>
     <body>
@@ -94,28 +75,89 @@
             <!DOCTYPE html>
             <html>
                 <head>
-                    <style> 
-                    * { box-sizing:border-box; font-family:sans; } 
-                    html { height:100%; margin:0; padding:0;background-color:white; } 
-                    body { overflow:hidden; padding:2cm; min-height:100%; background-color:white; margin:0px;} 
-                    @media print {
-                        body { width : 210mm; }
-                    }
-                    @page { margin: 0 }
-                    body { margin: 0 }
-                    @page { size: 210mm 297mm; }
-                    .sheet {
-                        margin: 0;
-                        overflow: hidden;
-                        box-sizing: border-box;
-                        page-break-after: always;
-                        height: 297mm;
-                        width: 210mm;
-                        display:block;
-                    }
-                    </style> 
                 </head>
-                <body class="sheet" contenteditable="true">sheet</body>
+                <body>
+                <style>
+* { box-sizing:border-box; font-family:sans; } 
+.style { 
+    display:block ; 
+    background-color:rgb(255,255,200);
+    position:absolute;
+    top:0;
+    left:0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width:50%;
+    transform: scale(0.2) translate(-200%,0);
+    transition: transform .2s ease;
+    z-index:1;
+    }
+
+.styleCss { 
+    color:green;
+    width:100%;
+    display:inline-block;
+    max-height:90vh;
+    min-height:20vh;
+    font-family: monospace;
+    white-space: pre; 
+    white-space: pre-wrap; 
+}
+
+.style:focus-within {
+    transform: translate(0,0) scale(1);
+    color:blue;
+}
+.style:focus-within + .sheet {
+    ingnore-margin-left:50%;
+    transform: translate(80%,0%);
+    color:blue;
+}
+html { width: 100%;  margin:0; padding:0;background-color:rgb(150,150,150); } 
+body { width: 100%; overflow:auto;  margin:0;} 
+body { color:green; width: var(--page-width); height:var(--page-height)}
+.sheet {
+    overflow: hidden;
+    margin:auto;
+    box-sizing: border-box;
+    page-break-after: always;
+    height: 297mm;
+    height: var(--page-height);
+    width: 210mm;
+    width: var(--page-width);
+    position:relative;
+    display:block;
+    padding: 2cm;
+    transition: transform .2s ease;
+    }
+@media screen {
+  body { width:100%; background: rgb(150,150,150); }
+  .sheet {
+    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
+/*    margin: 5mm auto;*/
+  }
+}
+@media print {
+  .style, style { display: none;}
+  body { width : 210mm; width: var(--page-width);margin:0; }
+  .sheet { margin:0; }
+}
+@page { margin: 0 }
+                    </style>
+                    <div class="style"><style class="styleCss" contenteditable="true">
+/* set page size */                                
+:root  {
+  --page-width: 210mm;
+  --page-height: 297mm;
+}
+/* becuase stupid browsers  https://stackoverflow.com/a/44738574 need to set -again- */
+@page { size: var(--page-width,210mm) var(--page-height,297mm) }
+.sheet { 
+    background-color:white;
+}
+                    </style></div>
+                    <div class="sheet" contenteditable="true">sheet</div>
+                </body>
             </html>
         '></iframe>
         <iframe class='sheet' src='data:text/html;charset=utf-8, 
@@ -124,11 +166,28 @@
                 <head>
                     <style> 
                     * { box-sizing:border-box; font-family:sans; } 
-                    html { height:100%; margin:0; padding:0;background-color:white; } 
-                    body { overflow:hidden; padding:2cm; min-height:100%; background-color:white; margin:0px;} 
+                    html { height:100%; margin:0; padding:0;background-color:rgb(150,150,150); } 
+                    body { overflow:hidden; min-height:100%; background-color:rgb(100,100,100); margin:0px;} 
+                    @media print {
+                        body { width : 210mm; }
+                    }
+                    @page { margin: 0 }
+                    body { margin: auto }
+                    @page { size: 210mm 297mm; }
+                    .sheet {
+                        margin: auto;
+                        overflow: hidden;
+                        box-sizing: border-box;
+                        page-break-after: always;
+                        background-color:white;
+                        padding: 2cm;
+                        height: 297mm;
+                        width: 210mm;
+                        display:block;
+                    }
                     </style> 
                 </head>
-                <body contenteditable="true"></body>
+                <body><div class="sheet" contenteditable="true">sheet</div></body>
             </html>
         '></iframe>
     <script>
