actually consider paper-printing

copyparty/web/md.css

@@ -13,6 +13,7 @@ html, body {
 }
 #mw {
 	margin: 0 auto;
+	padding: 0 1.5em;
 }
 pre, code, a {
 	color: #480;
@@ -46,7 +47,7 @@ pre code {
 pre code:last-child {
 	border-bottom: none;
 }
-pre code:before {
+pre code::before {
 	content: counter(precode);
 	-webkit-user-select: none;
 	display: inline-block;
@@ -172,14 +173,12 @@ small {
 }
 table {
 	border-collapse: collapse;
+	margin: 1em 0;
 }
-td {
+th, td {
 	padding: .2em .5em;
 	border: .12em solid #aaa;
 }
-th {
-	border: .12em solid #aaa;
-}
 blink {
 	animation: blinker .7s cubic-bezier(.9, 0, .1, 1) infinite;
 }
@@ -202,13 +201,15 @@ blink {
 		height: 100%;
 	}
 	#mw {
-		padding: 0 1em;
 		margin: 0 auto;
 		right: 0;
 	}
 	#mp {
-		max-width: 54em;
+		max-width: 52em;
 		margin-bottom: 6em;
+		word-break: break-word;
+		overflow-wrap: break-word;
+		word-wrap: break-word; /*ie*/
 	}
 	a {
 		color: #fff;
@@ -265,7 +266,7 @@ blink {
 	#mn a:last-child {
 		padding-right: .5em;
 	}
-	#mn a:not(:last-child):after {
+	#mn a:not(:last-child)::after {
 		content: '';
 		width: 1.05em;
 		height: 1.05em;
@@ -359,7 +360,7 @@ blink {
 		background: #282828;
 		border: .07em dashed #444;
 	}
-	html.dark #mn a:not(:last-child):after {
+	html.dark #mn a:not(:last-child)::after {
 		border-color: rgba(255,255,255,0.3);
 	}
 	html.dark #mn a {
@@ -378,19 +379,19 @@ blink {
 	}
 }
 
-@media screen and (min-width: 70em) {
+@media screen and (min-width: 66em) {
 	#mw {
 		position: fixed;
 		overflow-y: auto;
 		left: 14em;
-		left: calc(100% - 57em);
+		left: calc(100% - 55em);
 		max-width: none;
 		bottom: 0;
 		scrollbar-color: #eb0 #f7f7f7;
 	}
 	#toc {
 		width: 13em;
-		width: calc(100% - 57.3em);
+		width: calc(100% - 55.3em);
 		max-width: 30em;
 		background: #eee;
 		position: fixed;
@@ -445,26 +446,64 @@ blink {
 		background: #0a0a0a;
 	}
 }
-@media screen and (min-width: 87.5em) {
+@media screen and (min-width: 85.5em) {
 	#toc { width: 30em }
 	#mw { left: 30.5em }
 }
 @media print {
+	@page {
+		size: A4;
+		padding: 0;
+		margin: .5in .2in;
+		mso-header-margin: .2in;
+		mso-footer-margin: .2in;
+		mso-paper-source: 0;
+	}
 	a {
 		color: #079;
 		text-decoration: none;
 		border-bottom: .07em solid #4ac;
 		padding: 0 .3em;
 	}
-	#toc {
-		margin: 0 !important;
-	}
 	#toc>ul {
 		border-left: .1em solid #84c4dd;
+		text-decoration: underline;
 	}
 	#mn, #mh {
 		display: none;
 	}
+	html, body, #toc, #mw {
+		margin: 0 !important;
+		word-break: break-word;
+		width: 52em;
+	}
+	#toc {
+		margin-left: 1em !important;
+	}
+	pre code::before {
+		color: #058;
+	}
+	h1 {
+		margin: 2em 0;
+	}
+	table {
+		page-break-inside: auto;
+	}
+	tr {
+		page-break-inside: avoid;
+		page-break-after: auto;
+	}
+	thead {
+		display: table-header-group;
+	}
+	tfoot {
+		display: table-footer-group;
+	}
+	#mp a.vis::after {
+		content: ' (' attr(href) ')';
+		border-bottom: 1px solid #bbb;
+		color: #777;
+	}
 }
 
 /*

copyparty/web/md.html

@@ -21,6 +21,7 @@
 		{%- else %}
 			<a href="?edit">edit (basic)</a>
 			<a href="?edit2">edit (fancy)</a>
+			<a href="?raw">view raw</a>
 		{%- endif %}
 	</div>
 	<div id="toc"></div>
@@ -41,14 +42,14 @@
 	<div id="helpbox">
 		<textarea>
 
-write markdown (html is permitted)
+write markdown (most html is 🙆 too)
 
-### hotkey list
+## hotkey list
 * `Ctrl-S` to save
 * `Ctrl-H` / `Ctrl-Shift-H` to create a header
 * `TAB` / `Shift-TAB` to indent/dedent a selection
 
-### toolbar
+## toolbar
 1. toggle dark mode
 2. show/hide navigation bar
 3. save changes on server
@@ -56,8 +57,56 @@ write markdown (html is permitted)
 5. toggle editor/preview
 6. this thing :^)
 
-.
+## markdown
+|||
+|--|--|
+|`**bold**`|**bold**|
+|`_italic_`|_italic_|
+|`~~strike~~`|~~strike~~|
+|`` `code` ``|`code`|
+|`[](#hotkey-list)`|[](#hotkey-list)|
+|`[](/foo/bar.md#header)`|[](/foo/bar.md#header)|
+|`<blink>💯</blink>`|<blink>💯</blink>|
 
+## tables
+    |left-aligned|centered|right-aligned
+    | ---------- | :----: | ----------:
+    |one         |two     |three
+
+|left-aligned|centered|right-aligned
+| ---------- | :----: | ----------:
+|one         |two     |three
+
+## lists
+	* one
+	* two
+	1. one
+	1. two
+* one
+* two
+1. one
+1. two
+
+## headers
+	# level 1
+	## level 2
+	### level 3
+
+## quote
+	> hello
+> hello
+
+## codeblock
+		four spaces (no tab pls)
+
+## code in lists
+	* foo
+	  bar
+          six spaces total
+* foo
+  bar
+      six spaces total
+.
 		</textarea>
 	</div>
 	{%- endif %}

copyparty/web/md.js

@@ -35,6 +35,19 @@ function static(obj) {
 }
 
 
+// dodge browser issues
+(function () {
+    var ua = navigator.userAgent;
+    if (ua.indexOf(') Gecko/') !== -1 && ua.indexOf('Linux') !== -1) {
+        // necessary on ff-68.7 at least
+        var s = document.createElement('style');
+        s.innerHTML = '@page { margin: .6in .2in .8in .2in; }';
+        console.log(s.innerHTML);
+        document.head.appendChild(s);
+    }
+})();
+
+
 // add navbar
 (function () {
     var n = document.location + '';
@@ -141,7 +154,7 @@ function copydom(src, dst, lv) {
 }
 
 
-function convert_markdown(md_text) {
+function convert_markdown(md_text, dest_dom) {
     marked.setOptions({
         //headerPrefix: 'h-',
         breaks: true,
@@ -229,7 +242,7 @@ function convert_markdown(md_text) {
         el.innerHTML = '<a href="#' + id + '">' + el.innerHTML + '</a>';
     }
 
-    copydom(md_dom, dom_pre, 0);
+    copydom(md_dom, dest_dom, 0);
 }
 
 
@@ -344,7 +357,7 @@ function init_toc() {
 
 
 // "main" :p
-convert_markdown(dom_src.value);
+convert_markdown(dom_src.value, dom_pre);
 var toc = init_toc();
 
 

copyparty/web/md2.css

@@ -4,12 +4,12 @@
 #mtw {
     display: block;
     position: fixed;
-    left: 0;
+    left: .5em;
     bottom: 0;
-    width: calc(100% - 58em);
+    width: calc(100% - 56em);
 }
 #mw {
-    left: calc(100% - 57em);
+    left: calc(100% - 55em);
     overflow-y: auto;
     position: fixed;
     bottom: 0;
@@ -30,11 +30,11 @@
 #mw.single {
     margin: 0;
     left: 1em;
-    left: max(1em, calc((100% - 58em) / 2));
+    left: max(1em, calc((100% - 56em) / 2));
 }
 #mtw.single {
-    width: 57em;
+    width: 55em;
-    width: min(57em, calc(100% - 2em));
+    width: min(55em, calc(100% - 2em));
 }
 
 
@@ -43,7 +43,7 @@
 }
 #mt, #mtr {
     width: 100%;
-    height: calc(100% - 5px);
+    height: calc(100% - 1px);
     color: #444;
     background: #f7f7f7;
     border: 1px solid #999;

copyparty/web/md2.js

@@ -70,7 +70,7 @@ var draw_md = (function () {
     function draw_md() {
         var t0 = new Date().getTime();
         var src = dom_src.value;
-        convert_markdown(src);
+        convert_markdown(src, dom_pre);
 
         var lines = hesc(src).replace(/\r/g, "").split('\n');
         nlines = lines.length;
@@ -552,8 +552,10 @@ document.getElementById('help').onclick = function (e) {
     if (e) e.preventDefault();
     var dom = document.getElementById('helpbox');
     var dtxt = dom.getElementsByTagName('textarea');
-    if (dtxt.length > 0)
+    if (dtxt.length > 0) {
-        dom.innerHTML = '<a href="#" id="helpclose">close</a>' + marked(dtxt[0].value);
+        convert_markdown(dtxt[0].value, dom);
+        dom.innerHTML = '<a href="#" id="helpclose">close</a>' + dom.innerHTML;
+    }
 
     dom.style.display = 'block';
     document.getElementById('helpclose').onclick = function () {