Update based on upstream changes

bibliography.php

@@ -25,6 +25,8 @@
 	<dl>
 	<dt><span class="thumb"><img src="/i/tiny/bringhurst.png" alt="Book cover" /></span> <a href="http://www.amazon.co.uk/exec/obidos/ASIN/0881792128/jalfrezi-21/"><cite>The Elements of Typographic Style</cite></a> by Robert Bringhurst </dt>
 <dd>The book which sparked this website.</dd>
+	<dt><span class="thumb"><img src="/i/tiny/web-typography-book.png" alt="Web Typography book cover" /></span> <a href="http://book.webtypography.net"><cite>Web Typography</cite></a> by Richard Rutter </dt>
+<dd>A handbook for designing beautiful and effective responsive typography. The book this website grew into.</dd>
 <dt><span class="thumb"><img src="/i/tiny/gridsystems.png" alt="Book cover" /></span> <a href="http://www.amazon.co.uk/exec/obidos/ASIN/3721201450/jalfrezi-21/"><cite>Grid Systems in Graphic Design</cite></a> by Josef Muller-Brockmann </dt>
 <dd>The definitive word on using grid systems in graphic design. With examples on how to work correctly at a conceptual level and exact instructions for using all of the systems, this is as valid for the Web as it is for print.</dd>
 </dl>

css/screen.css

@@ -1,8 +1,33 @@
+@font-face {
+	font-family: 'Premiera';
+	src:	url('/fonts/Premiera-Book.woff2') format('woff2');
+	font-weight: normal;
+	font-style: normal;
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Premiera';
+	src:	url('/fonts/Premiera-Bold.woff2') format('woff2');
+	font-weight: bold;
+	font-style: normal;
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Premiera';
+	src:	url('/fonts/Premiera-Italic.woff2') format('woff2');
+	font-weight: normal;
+	font-style: italic;
+	font-display: fallback;
+}
+
 body {
 	margin:0;
 	padding:0;
 	color: #000;
 	background: #fff8e5;
+	font-family: "Premiera", "Cambria", "Roboto Slab", "Georgia", "Times New Roman", serif;
 	font-size: 100%;
 	text-rendering: optimizeLegibility;
 	-moz-font-feature-settings:"onum" 1;
@@ -13,7 +38,7 @@ body {
 }
 
 html>body, html>body#cover {
-	font-size: 16px;
+	font-size: 19px;
 }
 
 abbr, acronym, .caps {
@@ -23,23 +48,28 @@ abbr, acronym, .caps {
 	-webkit-font-feature-settings:"c2sc" 1, "onum" 1;
 	font-feature-settings:"c2sc" 1, "onum" 1;
 	font-style: normal;
+	font-variant: small-caps;
 	border-bottom: 0;
 }
 
+abbr {
+	text-underline-position: under;
+}
+
 blockquote abbr, blockquote acronym, blockquote .caps,
 em abbr, em acronym, em .caps,
 cite abbr, cite acronym, cite .caps {
-  font-family: 'premiera book', georgia, serif;
-  font-style: normal;
+
+	font-style: normal;
 }
 
 cite, em {
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 }
 
 strong {
-	font-family: 'premiera bold', georgia, serif;
+
 	font-weight: bold;
 }
 
@@ -76,7 +106,7 @@ h1 span, #supp span, #toc li span, .quote-from-book .ic, .thumb {
 h1 span, #toc li span, .thumb {
 	left: -0.75em;
 	width:7.29%;
-	font-family: 'premiera book', georgia, serif;
+
 }
 
 h1 span {
@@ -97,16 +127,16 @@ h1 span {
 #main, #supp, #footer, #cover, .amzbox {
 	font-size: 1em;
 	line-height: 1.375em;
-	font-family: 'premiera book', georgia, serif;
+
 }
 
 h1, h2, h3, #header, #big-title #ts {
-	font-family: 'premiera book', georgia, serif;}
+}
 
 
 h1#big-title span {
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 }
 
 a, a:visited, a:link, a:active, a:hover {
@@ -182,7 +212,7 @@ blockquote {
 	margin-left: 0;
 	margin-right: 0;
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 }
 
 .quote-from-book {
@@ -226,7 +256,7 @@ p.imgholder {
 q {
 font-style:italic;
 quotes: '\2018' '\2019' '\201c' '\201d';
-	font-family: 'premiera italic', georgia, serif;
+
 }
 
 q:before {
@@ -247,6 +277,7 @@ body blockquote q {
 
 code {
 	font-family: inconsolata, consolas, "andale mono", "droid sans mono", menlo, monospace;
+	font-size: 16px;
 	font-size-adjust: 0.457;
 }
 
@@ -260,7 +291,7 @@ pre {
 
 blockquote em {
 	font-style: normal;
-	font-family: 'premiera book', georgia, serif;
+
 }
 
 ul ul, ol ol {
@@ -319,7 +350,7 @@ ol#annotations {
 
 #header a span {
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 }
 
 span.of {
@@ -485,7 +516,7 @@ div.ex2-1-9 {
 
 .ex2-1-10-toc1 td {
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 	text-align: right;
 	padding: 0 0 0 0.5em;
 }
@@ -507,7 +538,7 @@ div.ex2-1-9 {
 
 .ex2-1-10-toc2 td {
 	font-style: italic;
-	font-family: 'premiera italic', georgia, serif;
+
 	text-align: left;
 	padding:0;
 }

includes/book.inc.php

@@ -1,3 +1,5 @@
 <div id="thebook"> <!-- Amazon referrals help RR pay for hosting -->
 <p><a href="http://www.amazon.co.uk/exec/obidos/ASIN/0881792128/jalfrezi-21/" title="More information on ‘The Elements of Typographic Style’ at Amazon"><img src="/i/book.png" alt="Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst" style="width:100px" /></a></p>
+
+<p style="text-indent: 0"><a href="http://book.webtypography.net/" title="Buy Web Typography book"><img src="/i/web-typography-book.png" alt="Cover of ‘Web Typography’ by Richard Rutter" style="width:120px" /></a></p>
 </div> <!-- /thebook -->

includes/data.inc.php

@@ -39,7 +39,8 @@
 		'2.4.8' => "Never begin a page with the last line of a multi-line paragraph",
 		'3.1.1' => "Don’t compose without a scale",
 		'3.2.1' => "Use titling figures with full caps, and text figures in all other circumstances",
-
+    '3.2.2' => "For abbreviations and acronyms in the midst of normal text, use spaced small caps",
+
     )
 );
 

includes/headlinks.inc.php

@@ -3,4 +3,3 @@
 <!--[if lte IE 7]>
 <link rel="stylesheet" type="text/css" href="/css/ie-lte-7.css" />
 <![endif]-->
-<link rel="stylesheet" href="http://fontdeck.com/s/css/p+zwVqq4agQiKsiAkUNVfzsNquo/<?php echo $_SERVER['SERVER_NAME']; ?>/1575.css" type="text/css" />

intro.php

@@ -35,6 +35,9 @@
 
 	<h2>Postscript</h2>
 	<p>In February 2014, I opened up the <a href="https://github.com/clagnut/webtypography">source code to this website</a> on GitHub, with <a href="http://clagnut.com/blog/2375/">an invitation</a> to web typography enthusiasts to take on the project, update the content and add the missing items. I will continue to maintain the website and update as changes are submitted.</p>
+
+	<h2>Post postscript</h2>
+	<p>In 2017, after two years work, I released my book <cite><a href="http://book.webtypography.net">Web Typography</a></cite> as a handbook for designing beautiful and effective responsive typography. This website is the genesis of that book, and the book the natural (and hugely extended) result of this website.</p>
 
 </div> <!-- /main -->
 

item.php

@@ -58,10 +58,10 @@
 <ul id="nextprev">
 <?php
 if ($next_num) {
-	echo "<li><span>&#8594;</span><a href='/$next_num' title='Read next guideline'>$next_item</a></li>";
+	echo "<li><span>&#8594;</span><a href='/$next_num' title='Read next guideline' id='next_guideline'>$next_item</a></li>";
 }
 if ($prev_num) {
-	echo "<li><span>&#8592;</span><a href='/$prev_num' title='Read previous guideline'>$prev_item</a></li>";
+	echo "<li><span>&#8592;</span><a href='/$prev_num' title='Read previous guideline' id='previous_guideline'>$prev_item</a></li>";
 }
 ?>
 </ul>
@@ -74,5 +74,6 @@
 
 
 <?php include($dr . "footer.inc.php") ?>
+<script src="/js/global.js"></script>
 </body>
 </html>

items/2.1.2.html

@@ -14,14 +14,14 @@
   width:33em;
 }</code></pre>
 
-	<p>When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, he can&nbsp;do.</p>
+	<p>When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, they can&nbsp;do.</p>
 
 	<p>In the preceding example, column 1&nbsp;has a fixed width: it has been set to 400&nbsp;px wide.  With text rendering at 12&nbsp;px this would result in a measure of approximately 66&nbsp;characters per line. If your reader increases the text size to 16&nbsp;px then the measure reduces to 50&nbsp;characters per line. Thus when the text size is changed, so the measure&nbsp;changes.</p>
 
 	<p>Column 2&nbsp;has a liquid width: it has been set to 50% wide. Assuming your reader is browsing with a window 1000&nbsp;px wide, the box would be rendered as 500&nbsp;px wide, resulting in a measure of about 83&nbsp;characters per line. A measure of 83&nbsp;may be a little too wide for your reader, but because the box is liquid, your reader could reduce their window size to 800&nbsp;px, thus narrowing the box to 400&nbsp;px and creating a more comfortable measure of 66&nbsp;characters per&nbsp;line.</p>
 
 	<p>Column 3&nbsp;has an elastic width: it has been set to 33&nbsp;em wide. On average one character takes up 0.5&nbsp;em so this box will have a measure of 66&nbsp;characters per line. If your reader increases the text size, the width of box will increase accordingly and so the measure remains at 66&nbsp;regardless of the text&nbsp;size.</p>
 
-	<p>From a typographical perspective, the most appropriate method is to set box width in ems <span class='bracket'>(</span>elastic layout<span class='bracket'>)</span> as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage <span class='bracket'>(</span>liquid layout<span class='bracket'>)</span> gives the typographer approximate control over measure but also allows the reader to adjust the layout to suit his or her comfort. This website has been designed with liquid layout to afford readers this&nbsp;control.</p>
+	<p>From a typographical perspective, the most appropriate method is to set box width in ems <span class='bracket'>(</span>elastic layout<span class='bracket'>)</span> as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage <span class='bracket'>(</span>liquid layout<span class='bracket'>)</span> gives the typographer approximate control over measure but also allows the reader to adjust the layout to suit their comfort. This website has been designed with liquid layout to afford readers this&nbsp;control.</p>
 
-	<p>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged &#38; embraced, and built into website designs from the ground&nbsp;up.</p>
+	<p>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged &#38; embraced, and built into website designs from the ground&nbsp;up.</p>

items/2.2.1.html

@@ -8,9 +8,9 @@
   line-height: 15pt;
 }</code></pre>
 
-	<p>However <strong>that example is bad</strong> as <code>line-height</code> should never be applied using absolute units such as points or pixels. In the prior example, when text is resized in a browser, the font-size increases <span class='bracket'>(</span>to 18&nbsp;pt for example<span class='bracket'>)</span> but the line-height may remain at 15&nbsp;pt. So instead of the lines being spaced apart, they would actually&nbsp;overlap.</p>
+	<p>That example will give you the same line-height throughout all your paragraphs, however it does introduce the danger that, when the browser text size is increased by your reader <span class='bracket'>(</span>to 18&nbsp;pt for example<span class='bracket'>)</span> the line-height may remain at 15&nbsp;pt. The result being that, instead of the lines being spaced apart, they would actually&nbsp;overlap.</p>
 
-	<p>A better approach is to make use of a unique characteristic of the <code>line-height</code> property: it is the only <abbr title="Cascading Style Sheets">CSS</abbr> property for which non-zero numeric values are allowed without units. The preceding example could also be coded&nbsp;as:</p>
+	<p>A safer approach is to use a unitless value. The preceding example could also be coded&nbsp;as:</p>
 
 <pre><code>p {
   font-size: 12pt;
@@ -25,7 +25,7 @@
 
 	<p>It should be noted that some browsers add a little leading by default: Safari and Internet Explorers for example; whereas others, such as Camino and Firefox, do not. Text on the web almost always benefits from an increase in line height, and figures upwards of 1.3&nbsp;are common <span class='bracket'>(</span>this page has a <code>line-height</code> of 1.5&nbsp;for&nbsp;example<span class='bracket'>)</span>.</p>
 
-	<p>Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text. To illustrate this the following example has a <code>line-height</code> of 3&nbsp;and shows the text sat midway between two&nbsp;borders:</p>
+	<p>Unlike in mechanical presses, where one line of lead is added below the text, the spacing added on the Web is divided equally above and below the text. To illustrate this the following example has a <code>line-height</code> of 3&nbsp;and shows the text set midway between two&nbsp;borders:</p>
 
 	<div class="example"><div class="ex2-2-1i">line-height spacing is added equally above and below the text</div></div>
 
@@ -38,4 +38,4 @@
 }</code></pre>
 
 	<div class="ex2-2-1ii example">this is an&nbsp;example<br />
-of negative leading</div>
+of negative leading</div>

items/3.2.2.html

@@ -0,0 +1,17 @@
+<blockquote class='quote-from-book'>
+<p><span class='ic'>“</span>This is a good rule for just about everything except two-letter geographical acronyms and acronyms that stand for personal names. Thus: <span class="caps">3:00 AM</span>, <span class="caps">3:00 PM</span>, the ninth century <abbr>CE</abbr>, <span class="caps">450</span> <abbr>BC</abbr> to <abbr>AD</abbr> <span class="caps">450</span>, the <abbr>OAS</abbr> and <abbr>NATO</abbr>; World War <span class="caps">II</span> or <abbr>WWII</abbr>; but JFK and Fr J.A.S. O'Brien, <abbr>OMI</abbr>; <abbr>HMS</abbr> <em>Hypothesis</em> and <abbr>USS</abbr> <em>Ticonderoga</em>; Washington, DC, and Mexico, DF.<br />
+<span class='bracket'>[</span>…<span class='bracket'>]</span><br />
+Genuine small caps are not simply shrunken versions of the full caps. They differ from large caps in stroke weight, letterfit, and internal proportions as well as in height. Any good set of small caps is designed as such from the ground up. Thickening, shrinking and squashing the full caps with digital modification routines will only produce a parody.”</p></blockquote>
+
+<p><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/">OpenType</a> supports the necessary features for this. These are well-supported by <code>font-variant-caps</code> and <code>font-variant-numeric</code> CSS properties from <a href="https://www.w3.org/TR/css-fonts-3/">Fonts Module Level 3</a>. These properties have wide support in browsers. The trickier part of applying them is to make sure you are enabling these features on fonts that support these features rather than asking the browser to create the shrunken ‘parody’ versions Bringhust mentions. For example even fonts that support small caps and oldstyle numbers are served without them by Google Fonts.</p>
+
+<pre><code>abbr {
+  font-variant-caps: all-small-caps;
+  font-variant-numeric: oldstyle-nums;
+  font-style: normal;
+}</code></pre>
+
+<p>For <code>font-variant-caps</code> the difference between <code>small-caps</code> and <code>all-small-caps</code> is that the former only affects lowercase letters. The latter will convert all text to small caps. <code>font-style: normal</code> is because vanishingly small numbers of fonts provide italicized small caps.</p>
+
+<blockquote class='quote-from-book'>
+<p><span class='ic'>“</span>They can be faked with digital machinery, by sloping the roman small caps, but it is better to choose a face … which includes them, or to live without.”</p></blockquote>

js/global.js

@@ -1 +1,18 @@
-/* No JS required any more */
+/* No JS required any more */
+
+document.onkeydown = function (e) {
+  switch (e.keyCode) {
+    case 37:
+        if (document.getElementById('previous_guideline') !== null)
+                window.location = document.getElementById('previous_guideline').href;
+        break;
+
+    case 39:
+        if (document.getElementById('next_guideline') !== null)
+                window.location = document.getElementById('next_guideline').href;
+        break;
+
+    default:
+        return; // Do nothing for the rest
+  }
+};