lion/nn.word
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve word.html

Browse source
This commit is contained in:
Alexander Mahr 2023-06-22 05:38:07 +02:00
parent ccea128281
commit ec7bbee3e2
1 changed files with 120 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

181
word.html
View file

@ -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='header'>
<div id='titellabel'>document name: <span id='titellabel'>document name:
<title contenteditable="true">document</title> <title contenteditable="true">document</title>
</div> </span>
</div> </div>
<style> <style>
@ -39,6 +41,19 @@
border: 1px solid black; border: 1px solid black;
padding:4px; 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 { @media print {
head, #header,title { head, #header,title {
display: none; display: none;
@ -47,46 +62,12 @@
padding-top:0; padding-top:0;
} }
} }
@page { margin: 0 } @page { margin: 0 }
body { 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 { @media print {
body { width : 210mm; } body { width : 210mm; }
} }
@page { size: 210mm 297mm; } @page { size: 210mm 297mm; }
</style> </style>
</head> </head>
<body> <body>
@ -94,28 +75,89 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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> </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> </html>
'></iframe> '></iframe>
<iframe class='sheet' src='data:text/html;charset=utf-8, <iframe class='sheet' src='data:text/html;charset=utf-8,
@ -124,11 +166,28 @@
<head> <head>
<style> <style>
* { box-sizing:border-box; font-family:sans; } * { box-sizing:border-box; font-family:sans; }
html { height:100%; margin:0; padding:0;background-color:white; } html { height:100%; margin:0; padding:0;background-color:rgb(150,150,150); }
body { overflow:hidden; padding:2cm; min-height:100%; background-color:white; margin:0px;} 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> </style>
</head> </head>
<body contenteditable="true"></body> <body><div class="sheet" contenteditable="true">sheet</div></body>
</html> </html>
'></iframe> '></iframe>
<script> <script>