Improve printing of editor and library page [#53]

README.md

@@ -203,7 +203,8 @@ end Baz
 
 note over Foo, Bar: Using * / !
 
-# * and ! cause agents to be created and destroyed inline
+# * and ! cause agents to be
+# created and destroyed inline
 Bar -> *Baz: make Baz
 Foo <- !Baz: end Baz
 
@@ -257,7 +258,8 @@ Bar -> Baz
 ```
 begin Initiator as I, Receiver as R
 
-# the '...id' syntax allows connections to span multiple lines
+# the '...id' syntax allows connections
+# to span multiple lines
 
 I -> ...fin1
 ...fin1 -> R: FIN

library.htm

@@ -154,7 +154,7 @@ converted when the page loads:
 </pre>
 </div>
 
-<pre data-lang="text/html">
+<pre data-lang="text/html" class="print-reduced">
 &lt;pre class="sequence-diagram"&gt;
   A -&gt; B: foo
   B -&gt; A: bar
@@ -163,6 +163,7 @@ converted when the page loads:
 
 <h2 id="Language">Language</h2>
 
+<section>
 <h3 id="ConnectionTypes">Connection Types</h3>
 <pre class="example" data-lang="sequence">
 title Connection Types
@@ -197,7 +198,9 @@ Foo <- ]: From the right
 [ ~> ]: Wavy left to right!
 # (etc.)
 </pre>
+</section>
 
+<section>
 <h3 id="Dividers">Dividers</h3>
 <pre class="example" data-lang="sequence">
 title Dividers
@@ -218,7 +221,9 @@ divider tear with height 20: Lots of stuff happens
 
 -Bar --> Foo
 </pre>
+</section>
 
+<section>
 <h3 id="NotesState">Notes &amp; State</h3>
 <pre class="example" data-lang="sequence">
 title Note Placements
@@ -234,7 +239,9 @@ text right: "Comments\nOver here!"
 
 state over Foo: Foo is ponderous
 </pre>
+</section>
 
+<section>
 <h3 id="Logic">Logic</h3>
 <pre class="example" data-lang="sequence">
 title At the Bank
@@ -256,7 +263,9 @@ else
   ATM -> Person: Error
 end
 </pre>
+</section>
 
+<section>
 <h3 id="LabelTemplates">Label Templates</h3>
 <pre class="example" data-lang="sequence">
 autolabel "[&lt;inc>] &lt;label>"
@@ -266,7 +275,9 @@ A <- ]: Collect underpants
 A <-> ]: ???
 A <- ]: Profit!
 </pre>
+</section>
 
+<section>
 <h3 id="MultilineText">Multiline Text</h3>
 <pre class="example" data-lang="sequence">
 title "My Multiline
@@ -283,7 +294,9 @@ end
 state over Foo: "Newlines here,
 too!"
 </pre>
+</section>
 
+<section>
 <h3 id="Themes">Themes</h3>
 <pre class="example" data-lang="sequence">
 theme sketch
@@ -304,7 +317,9 @@ end Another thing
 <li>sketch</li>
 <li>sketch left handed</li>
 </ul>
+</section>
 
+<section>
 <h3 id="ShortLivedAgents">Short-Lived Agents</h3>
 <pre class="example" data-lang="sequence">
 title "Baz doesn't live long"
@@ -318,7 +333,8 @@ end Baz
 
 note over Foo, Bar: Using * / !
 
-# * and ! cause agents to be created and destroyed inline
+# * and ! cause agents to be
+# created and destroyed inline
 Bar -> *Baz: make Baz
 Foo <- !Baz: end Baz
 
@@ -326,7 +342,9 @@ Foo <- !Baz: end Baz
 terminators bar
 # (options are: box, bar, cross, fade, none)
 </pre>
+</section>
 
+<section>
 <h3 id="AgentAliases">Agent Aliases</h3>
 <pre class="example" data-lang="sequence">
 define My complicated agent name as A
@@ -336,7 +354,9 @@ and this one's multi-line!" as B
 A -> B: this is much easier
 A <- B: than writing the whole name
 </pre>
+</section>
 
+<section>
 <h3 id="Markdown">Markdown</h3>
 <pre class="example" data-lang="sequence">
 define "Name with
@@ -347,7 +367,9 @@ and ~strikeout~" as B
 A -> B: "_**basic markdown
 is supported!**_"
 </pre>
+</section>
 
+<section>
 <h3 id="AlternativeAgentOrdering">Alternative Agent Ordering</h3>
 <pre class="example" data-lang="sequence">
 define Baz, Foo
@@ -355,12 +377,15 @@ define Baz, Foo
 Foo -> Bar
 Bar -> Baz
 </pre>
+</section>
 
+<section>
 <h3 id="AsynchronousCommunication">Asynchronous Communication</h3>
 <pre class="example" data-lang="sequence">
 begin Initiator as I, Receiver as R
 
-# the '...id' syntax allows connections to span multiple lines
+# the '...id' syntax allows connections
+# to span multiple lines
 
 I -> ...fin1
 ...fin1 -> R: FIN
@@ -374,7 +399,9 @@ R -> ...fin2
 !I -> ...ack2
 ...ack2 -> !R: ACK
 </pre>
+</section>
 
+<section>
 <h3 id="LanguageMore">More</h3>
 
 <p>
@@ -382,8 +409,9 @@ More features are supported. See the
 <a href="." target="_blank">online editor</a>&rsquo;s library and autocomplete
 features to discover them.
 </p>
+</section>
 
-<h2 id="BrowserSupport">Browser Support</h2>
+<h2 id="BrowserSupport" class="no-forced-break">Browser Support</h2>
 
 <p>
 This has been tested in the latest versions of Google Chrome, Mozilla Firefox,
@@ -401,11 +429,13 @@ For more advanced usage, an API is available:
 
 <div id="hold1" class="right"></div>
 
-<pre data-lang="javascript">
+<pre data-lang="javascript" class="print-reduced">
 var diagram = new SequenceDiagram();
 diagram.set('A -> B\nB -> A');
 document.body.appendChild(diagram.dom());
-diagram.setHighlight(1); // Highlight elements created in line 1 (0-based)
+
+// Highlight elements created in line 1 (0-based)
+diagram.setHighlight(1);
 </pre>
 
 <h3 id="API_Constructor">Constructor</h3>

web/styles/editor.css

@@ -388,3 +388,36 @@ html, body {
 	background: #99EE99;
 	box-sizing: border-box;
 }
+
+@media print {
+	.drop-target:after {
+		display: none;
+	}
+
+	.pane-side {
+		display: none;
+	}
+
+	.pane-view {
+		min-width: 100%;
+	}
+
+	.pane-view-scroller {
+		overflow: visible;
+	}
+
+	.pane-view-inner {
+		/* https://bugs.chromium.org/p/chromium/issues/detail?id=449512 */
+		/* (not using this workaround for now
+		 * due to drastically lowered resolution) */
+		/*-webkit-filter: opacity(1);*/
+	}
+
+	.pane-view .region .outline {
+		stroke: none !important;
+	}
+
+	.options {
+		display: none;
+	}
+}

web/styles/library.css

@@ -21,14 +21,16 @@ article > header {
 	padding: 10px 20px;
 	background: linear-gradient(#DDEEFF, #FFFFFF);
 	border-radius: 2px;
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 article > header > h1 {
 	margin: 0 0 10px;
 	padding: 0;
 	font: 3.5em 'Vollkorn', serif;
-	text-align: center;
 	clear: both;
+	text-align: center;
 }
 
 article > header > .sequence-diagram {
@@ -40,19 +42,32 @@ article > h2 {
 	padding: 5px 20px 0;
 	font: 2em 'Vollkorn', serif;
 	clear: both;
+	page-break-before: always;
+	break-before: page;
+	page-break-after: avoid;
+	break-after: avoid;
 }
 
-article > h3 {
+article h3 {
 	margin: 25px -20px 10px;
 	padding: 5px 20px 0;
 	font: 1.5em 'Vollkorn', serif;
 	clear: both;
+	page-break-after: avoid;
+	break-after: avoid;
 }
 
-article > h4 {
+article h4 {
 	margin: 15px -20px 10px;
 	padding: 5px 20px 0;
 	font: 1.1em 'Vollkorn', serif;
+	page-break-after: avoid;
+	break-after: avoid;
+}
+
+.no-forced-break {
+	page-break-before: auto;
+	break-before: auto;
 }
 
 article > p {
@@ -64,6 +79,19 @@ article > p {
 article > ul {
 	margin: 10px 0;
 	padding: 0 0 0 30px;
+	page-break-before: avoid;
+	page-break-inside: avoid;
+	break-before: avoid;
+	break-inside: avoid;
+}
+
+section {
+	display: block;
+	margin: 0;
+	padding: 0;
+	clear: both;
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 a:link, a:visited {
@@ -87,6 +115,8 @@ a:hover, a:active {
 	margin-left: 20px;
 	background: #F8F8F8;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 .region.focus .outline {
@@ -114,6 +144,7 @@ pre {
 	min-width: 150px;
 	font-size: 1.1em;
 	line-height: 1.2;
+	page-break-inside: avoid;
 }
 
 nav {
@@ -139,3 +170,91 @@ nav a {
 nav a:hover {
 	background: #EEEEEE;
 }
+
+@media print {
+	body {
+		background: transparent;
+		margin: 0;
+	}
+
+	article {
+		max-width: none;
+		background: transparent;
+		box-shadow: none;
+		margin: 0;
+		padding: 0;
+		border-radius: 0;
+		color: #000000;
+	}
+
+	article > header {
+		margin: 0 0 30px;
+		background: transparent;
+		border-radius: 0;
+	}
+
+	article > header > h1 {
+		margin: 50px 0 80px;
+	}
+
+	article > h2 {
+		margin: 35px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article h3 {
+		margin: 25px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article h4 {
+		margin: 15px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article > header > .sequence-diagram {
+		/* filters print with low resolution */
+		filter: none;
+	}
+
+	a:link, a:visited, a:hover, a:active {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	pre {
+		background: #FFFFFF;
+		overflow: visible;
+		box-shadow: none;
+		border: 1px solid #666666;
+	}
+
+	pre.print-reduced {
+		display: inline-block;
+	}
+
+	pre.example {
+		font-size: 0.8em;
+		width: 50%;
+		box-sizing: border-box;
+		display: inline-block;
+	}
+
+	.example-diagram {
+		max-width: 50%;
+		max-height: 400px;
+		box-sizing: border-box;
+		margin-left: 0;
+		background: #FFFFFF;
+		box-shadow: none;
+	}
+
+	.right {
+		background: #FFFFFF;
+		margin: -2px;
+	}
+
+	nav {
+		display: none;
+	}
+}