Adjustments for print

meyerweb · meyerweb · commit 8678c5fc3196 · 2023-05-06T23:20:26.000-04:00
diff --git a/01-css-fundamentals/external-stylesheet-representation.html b/01-css-fundamentals/external-stylesheet-representation.html
@@ -14,7 +14,7 @@
 #css2 {top: 23em; left: 38em; width: 25em;}
 
 section h1 {position: absolute; width: 100%; bottom: 0.15em; left: 0; margin: 0;
-	font: bold 2em "Proxima Sans", Helvetica, sans-serif; text-align: center;}
+	font: italic 2em "Proxima Sans", Helvetica, sans-serif; text-align: center;}
 
 section img {position: absolute;
 	z-index: -1;}
@@ -35,8 +35,8 @@
 &lt;head&gt;
 &lt;title&gt;Eric’s World of Waffles&lt;/title&gt;
 &lt;meta charset="utf-8"&gt;
-<strong>&lt;link rel="stylesheet" media="screen,print"
-      href="sheet1.css"&gt;</strong>
+<strong>&lt;link rel="stylesheet" href="sheet1.css"
+      media="screen,print"&gt;</strong>
 &lt;style type="text/css"&gt;
 /* These are my styles! Yay! */
 <strong>@import url(sheet2.css);</strong>
diff --git a/01-css-fundamentals/structure-of-a-rule.html b/01-css-fundamentals/structure-of-a-rule.html
@@ -52,7 +52,7 @@
 }
 .above span {
 	padding-block-end: 4ch;
-	margin-block-end: -1.75ch;
+	margin-block-end: -1.5ch;
 	background-position: 50% 100%;
 }
 .above span:nth-child(1) {
@@ -64,7 +64,7 @@
 }
 .above span:nth-child(2) {
 	grid-column: span 2;
-	margin-block-end: -4ch;
+	margin-block-end: -4.33ch;
 	padding-block-end: 4ch;
 	color: #AAA;
 }
@@ -86,8 +86,8 @@
 	grid-template-columns: 24ch 15ch;
 }
 .below > span > span {
-	padding-block-start: 5ch;
-	margin-block-start: -1.5ch;
+	padding-block-start: 5.5ch;
+	margin-block-start: -2.2ch;
 	background-position: 50% 0%;
 
 }
diff --git a/06-basic-visual-formatting/horizontal-formatting-subtractive-padding-margin.html b/06-basic-visual-formatting/horizontal-formatting-subtractive-padding-margin.html
@@ -5,17 +5,17 @@
 <title>Subtractive padding</title>
 <link rel="stylesheet" type="text/css" href="base.css">
 <style type="text/css">
-header {width: 260px; border: 1px solid gray; border-bottom: 0; margin-bottom: 2px; text-align: center; height: 10px;}
+header {width: 240px; border: 1px solid gray; border-bottom: 0; margin-bottom: 2px; text-align: center; height: 10px;}
 header b {font: italic 0.9em sans-serif; background: white; padding: 0 0.33em; line-height: 1px; vertical-align: top;}
-div {float: left; border: 1px dotted gray;}
+div {max-width: max-content; border: 1px dotted gray;}
 p {background: #DDD;}
 </style>
 </head>
 <body>
 
-<header><b>260px</b></header>
+<header><b>240px</b></header>
 <div>
-<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>
+<p style="width: 200px; padding: 10px; margin: 20px; box-sizing: border-box;">wideness?</p>
 </div>
 
 </body>
diff --git a/06-basic-visual-formatting/showing-lines-different-alignments-writing-modes.html b/06-basic-visual-formatting/showing-lines-different-alignments-writing-modes.html
@@ -6,10 +6,10 @@
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="c/base.css">
 <style type="text/css">
-body {width: 60em;}
+body {width: 61em;}
 .arena {display: flex; justify-content: start; gap: 2em; width: 100%; font-size: 1.33em;}
-div.hor {width: 24em; flex: 0 0 auto;}
-div.ver {writing-mode: vertical-rl; height: 21em; margin-top: 1em;}
+div.hor {width: 20em; flex: 0 0 auto;}
+div.ver {writing-mode: vertical-rl; height: 25em; margin-top: 1em;}
 p {border: 1px dashed gray;}
 .cl1 {text-align: left;}
 .cl2 {text-align: right;}
diff --git a/11-flexbox/justify-content-values.html b/11-flexbox/justify-content-values.html
@@ -66,7 +66,7 @@
 }
 
 figcaption {
-	font: bold 1.67em monospace;
+	font: bold 2em monospace;
 }
 div > p {
 	border: 1px solid; 
diff --git a/15-text-properties/text-align-justify.html b/15-text-properties/text-align-justify.html
@@ -5,17 +5,18 @@
 <title>Justified text</title>
 <link rel="stylesheet" type="text/css" href="ch06.css">
 <style type="text/css">
-p {width: 500px; border: 1px dotted gray; float: left; margin-left: 2em; text-align: justify;}
-p + p {width: 300px;}
+body {display: flex; align-items: start;}
+p {width: 30em; border: 1px dotted gray; margin-left: 2em; text-align: justify;}
+p + p {width: 24em;}
 </style>
 </head>
 <body>
 
 <p class="cl4">
-This paragraph is styled <code>text-align: justify;</code>, which causes the line boxes within the element to align their left and right edges to the left and right inner content edges of the paragraph.  The exception is the last line box, whose right edge does not align with the right content edge of the paragraph.  (In right-to-left languages, the left edge of the last line box would not be so aligned.)
+This paragraph is styled <code>text-align: justify</code>, which causes the line boxes within the element to align their left and right edges to the left and right inner content edges of the paragraph.  The exception is the last line box, whose right edge does not align with the right content edge of the paragraph.  (In right-to-left languages, the left edge of the last line box would not be so aligned.)
 </p>
 <p class="cl4">
-This paragraph is styled <code>text-align: justify;</code>, which causes the line boxes within the element to align their left and right edges to the left and right inner content edges of the paragraph.  The exception is the last line box, whose right edge does not align with the right content edge of the paragraph.  (In right-to-left languages, the left edge of the last line box would not be so aligned.)
+This paragraph is styled <code>text-align: justify</code>, which causes the line boxes within the element to align their left and right edges to the left and right inner content edges of the paragraph.  The exception is the last line box, whose right edge does not align with the right content edge of the paragraph.  (In right-to-left languages, the left edge of the last line box would not be so aligned.)
 </p>
 
 </body>
diff --git a/15-text-properties/text-emphasis-various.html b/15-text-properties/text-emphasis-various.html
@@ -5,29 +5,31 @@
 <title>Various emphasis marks</title>
 <link rel="stylesheet" type="text/css" href="ch06.css">
 <style type="text/css">
-body {width: 80em; font-size: 1rem;}
-table {border-collapse: collapse; border-spacing: 0;}
+body {width: 60em; font-size: 1rem;}
+table {border-collapse: collapse; border-spacing: 0; margin-block-end: 3em;}
+table + table {margin: 0;}
 th, td {border: 1px solid; border-width: 0 2px 2px 0;}
-th {padding: 0.5em; font: bold 1.5em Consolas, monospace;}
-tbody td div {display: flex; justify-content: space-between;}
-td p {font-size: 1.5em; margin: 0.25em; padding: 0.25em; width: 50%; box-sizing: border-box;}
+th {padding: 0.5em; font: bold 1.75em Consolas, monospace;}
+tbody td div {display: flex; justify-content: space-evenly;}
+td p {font-size: 1.75em; margin: 0.25em; padding: 0.25em; width: 40%; box-sizing: border-box;}
 td p.v {writing-mode: vertical-rl; max-height: 5em; border-left: 1px dashed gray;}
 thead th {vertical-align: bottom; padding-block-start: 0;}
 tbody th {padding-inline-start: 0;}
 
 tbody tr.filled td:nth-of-type(1) span {-webkit-text-emphasis-style: sesame; text-emphasis-style: sesame;}
 tbody tr.filled td:nth-of-type(2) span {-webkit-text-emphasis-style: dot; text-emphasis-style: dot;}
-tbody tr.filled td:nth-of-type(3) span {-webkit-text-emphasis-style: circle; text-emphasis-style: circle;}
-tbody tr.filled td:nth-of-type(4) span {-webkit-text-emphasis-style: double-circle; text-emphasis-style: double-circle;}
-tbody tr.filled td:nth-of-type(5) span {-webkit-text-emphasis-style: triangle; text-emphasis-style: triangle;}
-tbody tr.filled td:nth-of-type(6) span {-webkit-text-emphasis-style: "cool"; text-emphasis-style: "cool";}
-
+tbody tr.filled td:nth-of-type(3) span {-webkit-text-emphasis-style: triangle; text-emphasis-style: triangle;}
 tbody tr.open td:nth-of-type(1) span {-webkit-text-emphasis-style: open sesame; text-emphasis-style: open sesame;}
 tbody tr.open td:nth-of-type(2) span {-webkit-text-emphasis-style: open dot; text-emphasis-style: open dot;}
-tbody tr.open td:nth-of-type(3) span {-webkit-text-emphasis-style: open circle; text-emphasis-style: open circle;}
-tbody tr.open td:nth-of-type(4) span {-webkit-text-emphasis-style: open double-circle; text-emphasis-style: open double-circle;}
-tbody tr.open td:nth-of-type(5) span {-webkit-text-emphasis-style: open triangle; text-emphasis-style: open triangle;}
-tbody tr.open td:nth-of-type(6) span {-webkit-text-emphasis-style: "cool"; text-emphasis-style: "cool";}
+tbody tr.open td:nth-of-type(3) span {-webkit-text-emphasis-style: open triangle; text-emphasis-style: open triangle;}
+
+table + table tbody tr.filled td:nth-of-type(1) span {-webkit-text-emphasis-style: circle; text-emphasis-style: circle;}
+table + table tbody tr.filled td:nth-of-type(2) span {-webkit-text-emphasis-style: double-circle; text-emphasis-style: double-circle;}
+table + table tbody tr.filled td:nth-of-type(3) span {-webkit-text-emphasis-style: "cool"; text-emphasis-style: "cool";}
+table + table tbody tr.open td:nth-of-type(1) span {-webkit-text-emphasis-style: open circle; text-emphasis-style: open circle;}
+table + table tbody tr.open td:nth-of-type(2) span {-webkit-text-emphasis-style: open double-circle; text-emphasis-style: open double-circle;}
+table + table tbody tr.open td:nth-of-type(3) span {-webkit-text-emphasis-style: "cool"; text-emphasis-style: "cool";}
+
 </style>
 </head>
 <body>
@@ -39,10 +41,7 @@
 <th></th>
 <th>sesame</th>
 <th>dot</th>
-<th>circle</th>
-<th>double-circle</th>
 <th>triangle</th>
-<th>"cool"</th>
 </tr>
 </thead>
 <tbody>
@@ -66,6 +65,9 @@
 <p class="v"><span>세로</span> 언어 마크</p>
 </div>
 </td>
+</tr>
+<tr class="open">
+<th>open</th>
 <td>
 <div>
 <p class="h"><span>horizontal</span> language marks</p>
@@ -84,8 +86,22 @@
 <p class="v"><span>세로</span> 언어 마크</p>
 </div>
 </td>
-<tr class="open">
-<th>open</th>
+</tr>
+</tbody>
+</table>
+
+<table>
+<thead>
+<tr>
+<th></th>
+<th>circle</th>
+<th>double-circle</th>
+<th>"cool"</th>
+</tr>
+</thead>
+<tbody>
+<tr class="filled">
+<th>filled</th>
 <td>
 <div>
 <p class="h"><span>horizontal</span> language marks</p>
@@ -104,6 +120,9 @@
 <p class="v"><span>세로</span> 언어 마크</p>
 </div>
 </td>
+</tr>
+<tr class="open">
+<th>open</th>
 <td>
 <div>
 <p class="h"><span>horizontal</span> language marks</p>

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`}`
`53`	`53`	`.above span {`
`54`	`54`	`padding-block-end: 4ch;`
`55`		`- margin-block-end: -1.75ch;`
	`55`	`+ margin-block-end: -1.5ch;`
`56`	`56`	`background-position: 50% 100%;`
`57`	`57`	`}`
`58`	`58`	`.above span:nth-child(1) {`
`@@ -64,7 +64,7 @@`
`64`	`64`	`}`
`65`	`65`	`.above span:nth-child(2) {`
`66`	`66`	`grid-column: span 2;`
`67`		`- margin-block-end: -4ch;`
	`67`	`+ margin-block-end: -4.33ch;`
`68`	`68`	`padding-block-end: 4ch;`
`69`	`69`	`color: #AAA;`
`70`	`70`	`}`
`@@ -86,8 +86,8 @@`
`86`	`86`	`grid-template-columns: 24ch 15ch;`
`87`	`87`	`}`
`88`	`88`	`.below > span > span {`
`89`		`- padding-block-start: 5ch;`
`90`		`- margin-block-start: -1.5ch;`
	`89`	`+ padding-block-start: 5.5ch;`
	`90`	`+ margin-block-start: -2.2ch;`
`91`	`91`	`background-position: 50% 0%;`
`92`	`92`
`93`	`93`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`figcaption {`
`69`		`- font: bold 1.67em monospace;`
	`69`	`+ font: bold 2em monospace;`
`70`	`70`	`}`
`71`	`71`	`div > p {`
`72`	`72`	`border: 1px solid;`