info/webtypography
1
0
Fork 0
mirror of https://github.com/clagnut/webtypography.git synced 2025-09-03 01:52:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Removed extraneous parts, added in all existing items, bibliography, intro

Browse Source
This commit is contained in:
Richard Rutter
2014-02-27 22:47:44 +00:00
parent b3ca56c75a
commit 01ef5ab5ea
53 changed files with 930 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.htaccess Normal file
View File

@@ -0,0 +1,11 @@
RewriteEngine on
RewriteBase /
Options +MultiViews
RewriteCond %{HTTP_HOST} ^www\.webtypography\.net$
RewriteRule (.*) http://webtypography.net/$1 [R=Permanent]
RewriteRule ^.+/([0-9]+\.[0-9]+\.[0-9]+)$ $1 [R=Permanent]
RewriteRule ^.+/([0-9]+\.[0-9]+\.[0-9]+)/$ $1 [R=Permanent]
RewriteRule ^([0-9]+\.[0-9]+\.[0-9]+)$ item.php?item_num=$1

123
bibliography.php
View File

@@ -1,61 +1,100 @@
<?php
$dr = $_SERVER["DOCUMENT_ROOT"];
$dr2 = preg_replace("/\/[^\/]+$/","/includes_webtype",$dr);
include($dr2 . "/db_connect.php");
// format text function
include($dr . "/includes/format.php");
// get item
$sql = "SELECT title, item FROM items WHERE filename='bibliography'";
$result = mysql_query($sql);
if ($myitem = mysql_fetch_array($result)) {;
$title = $myitem["title"];
$item = $myitem["item"];
// format item
$title = strip_tags(format($title));
$item = format($item);
} else {
$error = "badFilename";
$mySQLsaid = mysql_error();
}
<?php
// Turn on PHP Error Reporting
#ini_set("display_errors","2");
#ERROR_REPORTING(E_ALL);
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title><?php echo $title?> | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "/includes/headlinks.inc") ?>
<title>Bibliography | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "headlinks.inc.php") ?>
</head>
<body class="bits">
<?php include($dr . "/includes/header.inc") ?>
<?php
if (!isset($error) || $error != "badFilename") { # good filename
?>
<?php include($dr . "header.inc.php") ?>
<div id="main">
<h1><?php echo $title?></h1>
<?php echo $item?>
<h1> Bibliography
</h1>
<h2>Books</h2>
<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/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>
<h2>References &#38;&nbsp;Tutorials</h2>
<dl>
<dt><a href="http://www.alanwood.net/unicode/index.html#links"><cite>Alan Wood&#8217;s Unicode Tests</cite></a> </dt>
<dd>Massively comprehensive resource for locating and testing Unicode characters.</dd>
<dt><a href="http://www.clagnut.com/blog/348/"><cite>How to size text using ems</cite></a> </dt>
<dd>Tutorial on Clagnut which explains in detail how to size text on websites using ems. Covers the issues of inheritance and transitioning from pixel-based text sizing.</dd>
<dt><a href="http://riddle.pl/emcalc/"><cite>Em Calculator</cite></a> </dt>
<dd>Handy online tool for converting pixels to ems.</dd>
<dt><a href="http://www.alistapart.com/articles/howtosizetextincss/"><cite>How to Size Text in <abbr title="Cascading Style Sheets">CSS</abbr></cite></a> </dt>
<dd>A best practice that satisfies designers and users and works across browsers and platforms.</dd>
<dt><a href="http://www.w3.org/WAI/GL/css2em.htm"><cite>The amazing em unit and other best practices</cite></a> </dt>
<dd>Font sizing tutorial from the <abbr title="Worldwide Web Consortium">W3C</abbr>.</dd>
<dt><a href="http://www.fontshop.com/fontfeed/archives/figuring-it-out-osf-lf-and-tf-explained/"><cite>Figuring It Out: <abbr>OSF</abbr>, LF, and <abbr>TF</abbr> Explained</cite></a> </dt>
<dd>Great explanation of lining, old-style <span class='bracket'>(</span>text<span class='bracket'>)</span> and tabular figures from FontShop.</dd>
</dl>
<h2>Weblogs</h2>
<dl>
<dt><a href="http://www.typographi.com/"><cite>Typographica</cite></a> </dt>
<dd>A journal of typography featuring news, observations, and open commentary on fonts and typographic design.</dd>
<dt><a href="http://www.typographer.org/"><cite>Typographer.org</cite></a> </dt>
<dd>A regular digest and commentary on the typography and design industry, written by designers from around the world.</dd>
<dt><a href="http://typophile.com/"><cite>Typophile</cite></a> </dt>
<dd>Collaborative blog with typographic news and views from around the world. Also present is a forum and a gradually evolving wiki.</dd>
<dt><a href="http://ilovetypography.com/"><cite>I Love Typography</cite></a> </dt>
<dd>Bold, graphical blog devoted to typography, type, fonts and typefaces.</dd>
<dt><a href="http://blog.fawny.org/category/typography/"><cite>Joe Clark on typography</cite></a> </dt>
<dd>Typography found and discussed.</dd>
<dt><a href="http://www.clagnut.com/archive/typography/"><cite>Clagnut on typography</cite></a> </dt>
<dd>An ever growing list of typographic links at Clagnut.</dd>
<dt><a href="http://www.ministryoftype.co.uk/"><cite>Ministry of Type</cite></a> </dt>
<dd>Fabulous blog on published type from Aegir Hallmundur.</dd>
<dt><a href="http://www.typeforyou.org/"><cite>Type For You</cite></a> </dt>
<dd>More great typographic blogging.</dd>
<dt><a href="http://typesites.com/"><cite>Typesites</cite></a> </dt>
<dd>Critiques of typographically eminent websites.</dd>
</dl>
<h2>Specifications</h2>
<dl>
<dt><a href="http://www.w3.org/TR/html4"><cite><abbr title="HyperText Mark-up Language">HTML</abbr> 4.01</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/xhtml1"><cite><abbr title="eXtensible HyperText Mark-up Language">XHTML</abbr> 1.0</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/CSS21"><cite><abbr>CSS2</abbr>.1</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-background"><cite><abbr>CSS3</abbr> Backgrounds and Borders Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-box"><cite><abbr>CSS3</abbr> Box Model Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-fonts"><cite><abbr>CSS3</abbr> Fonts Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-content"><cite><abbr>CSS3</abbr> Generated and Replaced Content Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-linebox"><cite><abbr>CSS3</abbr> Line Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-lists"><cite><abbr>CSS3</abbr> Lists Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-multicol"><cite><abbr>CSS3</abbr> Multi-column Layout Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-page"><cite><abbr>CSS3</abbr> Paged Media Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-text"><cite><abbr>CSS3</abbr> Text Effects Module</cite></a> </dt>
<dt><a href="http://www.w3.org/TR/css3-webfonts"><cite><abbr>CSS3</abbr> Web Fonts Module</cite></a> </dt>
</dl>
</div> <!-- /main -->
<div id="supp">
<h2><a href="/toc/#reference">Reference</a></h2>
<?php include($dr . "/includes/references.inc") ?>
<?php include($dr . "/includes/book.inc") ?>
<?php include($dr . "references.inc.php") ?>
<?php include($dr . "book.inc.php") ?>
</div> <!-- /supp -->
<?php
}
?>
<?php include($dr . "/includes/footer.inc") ?>
<?php include($dr . "footer.inc.php") ?>
</body>
</html>

4
css/css3.css
View File

@@ -1,4 +0,0 @@
#main p {
hyphenate:auto;
hyphenate-lines:3;
}

3
css/ie-lte-7.css
View File

@@ -1,3 +1,2 @@
.ex2-3-4 pre {
text-align: center;
}
text-align: center;

156
css/screen.css
View File

@@ -1,11 +1,8 @@
@import "/css/css3.css";
BODY {
body {
margin:0;
padding:0;
color: #000;
background: #FFF8E5;
background: #fff8e5;
font-size: 100%;
text-rendering: optimizeLegibility;
-moz-font-feature-settings:"onum" 1;
@@ -15,11 +12,11 @@ BODY {
font-feature-settings:"onum" 1;
}
HTML>BODY, HTML>BODY#cover {
html>body, html>body#cover {
font-size: 16px;
}
ABBR, ACRONYM, .caps {
abbr, acronym, .caps {
text-transform: lowercase;
-moz-font-feature-settings:"smcp" 1;
-ms-font-feature-settings:"smcp" 1;
@@ -28,16 +25,15 @@ ABBR, ACRONYM, .caps {
font-feature-settings:"smcp" 1;
font-style: normal;
border-bottom: 0;
letter-spacing:0.1em;
}
cite, CITE ABBR, CITE ACRONYM, CITE .caps, em {
cite, cite abbr, cite acronym, cite .caps, em {
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
}
strong {
font-family: 'Antwerp Bold', georgia, serif;
font-family: premiera, 'premiera bold', georgia, serif;
font-weight: bold;
}
@@ -61,32 +57,32 @@ img {
margin-left:61.8%;
}
#main H1, #main H2, #main P, #main PRE, #main UL, #main OL, #main DL, #supp UL, #supp H3, #supp OL, #supp P, FORM, .example, #supp #deck {
#main h1, #main h2, #main p, #main pre, #main ul, #main ol, #main dl, #supp ul, #supp h3, #supp ol, #supp p, form, .example, #supp #deck {
padding: 0 11.8%;
}
H1 SPAN, #supp SPAN, #toc LI SPAN, .quote-from-book .ic, .thumb {
h1 span, #supp span, #toc li span, .quote-from-book .ic, .thumb {
position: absolute;
text-align:right;
display:block;
}
H1 SPAN, #toc LI SPAN, .thumb {
h1 span, #toc li span, .thumb {
left: -0.75em;
width:7.29%;
font-family: 'Antwerp Regular', georgia, serif;
font-family: premiera, 'premiera regular', georgia, serif;
}
h1 span {
left: -0.3em;
}
#supp SPAN {
#supp span {
left: -0.5em;
width: 11.8%;
}
#nextprev, H3 {
#nextprev, h3 {
position: relative;
}
/* @end */
@@ -95,21 +91,21 @@ h1 span {
#main, #supp, #footer, #cover, .amzbox {
font-size: 1em;
line-height: 1.375em;
font-family: 'Antwerp Regular', georgia, serif;
font-family: premiera, 'premiera regular', georgia, serif;
}
h1, h2, h3, #header, #big-title #ts {
font-family: 'Antwerp Regular', Georgia, serif;}
font-family: premiera, 'premiera regular', georgia, serif;}
h1#big-title span {
font-style: italic;
font-family: 'Antwerp Italic', Georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
}
a, a:visited, a:link, a:active, a:hover {
color: #00408F;
color: #00408f;
text-decoration: underline;
}
@@ -119,10 +115,10 @@ a:visited {
}
html>body a, html>body a:visited, html>body a:link, html>body a:active, html>body a:hover {
/* Need to hide borders on links from IE6 due to text-jog bug */
/* need to hide borders on links from ie6 due to text-jog bug */
text-decoration: none;
border-bottom: 1px solid #F2ECDA;
border-bottom: 1px solid #f2ecda;
}
@@ -132,26 +128,26 @@ html>body a:active, html>body a:hover {
border-bottom: 1px solid #999;
}
H1 {
h1 {
font-weight: normal;
font-size: 1.5em;
line-height: 1.083333333333333em;
margin: 0 0 1.5em 0;
}
H2, H3 {
h2, h3 {
font-weight: normal;
font-size: 1.1875em; /* 19px */
margin: 1.157894736842105em 0; /* 22px */
text-indent: -0.052631578947368em; /* 1px */
}
H4 {
h4 {
font-weight: normal;
font-size: 1em;
margin: 0 0 0.6875em 0;
}
#supp H2 { /* header*/
#supp h2 { /* header*/
font-weight: normal;
font-size: 1em;
margin: 0;
@@ -176,11 +172,11 @@ H4 {
}
BLOCKQUOTE {
blockquote {
margin-left: 0;
margin-right: 0;
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
}
.quote-from-book {
@@ -192,24 +188,24 @@ BLOCKQUOTE {
width: 11.8%;
}
UL, OL, DL {
ul, ol, dl {
margin: 1.375em 0 1.375em 0;
}
LI, DD, DT {
li, dd, dt {
margin: 0;
}
DD {
dd {
margin-left: 1.375em;
}
P {
p {
margin-top: 1.375em;
margin-bottom: 0;
}
P + P {
p + p {
margin-top: 0;
text-indent: 1.375em;
}
@@ -221,75 +217,75 @@ p.imgholder {
text-indent: 0;
}
Q {
q {
font-style:italic;
quotes: '\2018' '\2019' '\201C' '\201D';
font-family: 'Antwerp Italic', georgia, serif;
quotes: '\2018' '\2019' '\201c' '\201d';
font-family: premiera, 'premiera italic', georgia, serif;
}
Q:before {
q:before {
content: '\2018';
}
Q:after {
q:after {
content: '\2019';
}
HTML > BODY Q {
html > body q {
font-style:normal;
}
BODY BLOCKQUOTE Q {
body blockquote q {
font-style:italic;
}
CODE {
font-family: 'lucida console', 'andale mono', 'monotype.com', monospace;
font-size: 0.875em;
code {
font-family: inconsolata, consolas, "andale mono", "droid sans mono", menlo, monospace;
font-size-adjust: 0.457;
}
code code {
font-size: 1em;
}
PRE {
pre {
margin: 1.375em 0 0 1.375em;
}
BLOCKQUOTE EM {
blockquote em {
font-style: normal;
font-family: 'Antwerp Regular', georgia, serif;
font-family: premiera, 'premiera regular', georgia, serif;
}
UL UL, OL OL {
ul ul, ol ol {
margin-left: 1.375em;
}
#main LI P {
#main li p {
padding: 0;
}
H1 A:link, H1 A:visited, H1 A:hover, H1 A:active {
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
color: #333;
border: 0;
}
H2 A:link, H2 A:visited, H2 A:hover, H2 A:active {
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
text-decoration:none;
color: #fff;
border: 0;
}
#supp UL {
#supp ul {
list-style:circle;
margin-top: 0.6875em;
}
OL#annotations {
ol#annotations {
list-style:lower-roman;
}
#nextprev LI {
#nextprev li {
list-style: none;
}
/* @end */
@@ -317,7 +313,7 @@ OL#annotations {
#header a span {
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
}
span.of {
@@ -330,7 +326,7 @@ span.of {
font-size: 0.875em;
clear:both;
margin: 0;
padding: 4.714285714285714em 0 1.571428571428571em 7.29%;
padding: 4.571428571em 7.29% 1.571428571em;
color: #999;
}
@@ -338,11 +334,11 @@ span.of {
color: #999;
}
html>body #footer a {
border-bottom: 1px solid #F2ECDA;
border-bottom: 1px solid #f2ecda;
}
/* @end */
/* @group Bits and pieces */
/* @group bits and pieces */
.author {
text-indent:0;
margin-top: 1em;
@@ -362,18 +358,18 @@ html>body #footer a {
margin-bottom: 0.578947368421053em; /* 11px */
}
OL#toc {
ol#toc {
padding-right:0;
}
OL#toc OL {
ol#toc ol {
margin-left: 0;
padding-left:0;
padding-right:0;
margin-top: 0;
}
OL#toc OL OL {
ol#toc ol ol {
margin-top: 0;
}
@@ -382,10 +378,10 @@ OL#toc OL OL {
}
.highlight {
background: #F2ECDA;
background: #f2ecda;
}
.thumb IMG {
.thumb img {
height: 2.5em;
position: relative;
top: 2px;
@@ -398,33 +394,33 @@ OL#toc OL OL {
/* @end */
/* @group forms */
FORM {
form {
margin: 0 0 1.375em 0;
}
FORM DT {
form dt {
margin:1em 0 0 0;
}
FORM DD {
form dd {
margin: 0 0 1em 0;
}
INPUT, TEXTAREA {
input, textarea {
font-size: 1em;
line-height: 1.375em;
font-family: inherit;
}
INPUT.textbox, TEXTAREA {
input.textbox, textarea {
border: 1px solid #999;
font-size: 1em;
line-height: 1.375em;
font-family: inherit;
width:100%;
}
INPUT.button {
input.button {
border-width: 1px;
}
/* @end */
/* @group Examples */
/* @group examples */
#main #box1, #main #box2 { /* 2.1.1 */
font-size:12px;
width:1em;
@@ -483,7 +479,7 @@ div.ex2-1-9 {
.ex2-1-10-toc1 td {
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
text-align: right;
padding: 0 0 0 0.5em;
}
@@ -505,7 +501,7 @@ div.ex2-1-9 {
.ex2-1-10-toc2 td {
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
text-align: left;
padding:0;
}
@@ -584,37 +580,37 @@ div.ex2-1-9 {
/* @end */
/* @group Amazon box */
/* @group amazon box */
.amzbox {
position:absolute;
width:380px;
}
.amzbox P, .amzbox UL {
.amzbox p, .amzbox ul {
margin: 0;
}
.amzbox P {
.amzbox p {
padding: 1.5em 38px 38px 51px;
font-style: italic;
font-family: 'Antwerp Italic', georgia, serif;
font-family: premiera, 'premiera italic', georgia, serif;
background: url(/i/amz-drop.png) bottom no-repeat;
}
.amzbox P.first {
.amzbox p.first {
padding: 36px 38px 1.5em 38px;
background:url(/i/amz-drop.png) top no-repeat;
font-style: normal;
}
.amzbox IMG {
.amzbox img {
float:left;
width: 57px;
height: 24px;
margin: 3px 1em 1em 0;
}
.amzbox UL {
.amzbox ul {
padding: 0 38px 0 51px;
list-style-type: square;
background: url(/i/amz-drop.png) center no-repeat;
@@ -627,7 +623,7 @@ div.ex2-1-9 {
/* @group Deck ad */
/* @group deck ad */
#deck {
margin-top: 3em;

BIN
i/amz-drop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
i/amz.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 732 B

BIN
i/bg-home.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
i/bg-home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
i/book.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
i/drop.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 932 B

BIN
i/drop.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 193 B

BIN
i/drop2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
i/elements-shot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
i/fontdeck.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
i/tiny/bringhurst.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 571 B

BIN
i/tiny/bringhurst.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
i/tiny/gridsystems.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 807 B

BIN
i/tiny/gridsystems.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
i/tiny/newtypography.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1008 B

4
includes/book.inc.php
View File

@@ -1,3 +1,3 @@
<div id="thebook">
<p><a href="/bibliography/" title="More information on &#8216;The Elements of Typographic Style&#8217; at Amazon"><img src="/i/book.png" alt="Cover of &#8216;The Elements of Typographic Style&#8217; by Robert Bringhurst" title="" /></a></p>
<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 &#8216;The Elements of Typographic Style&#8217; at Amazon"><img src="/i/book.png" alt="Cover of &#8216;The Elements of Typographic Style&#8217; by Robert Bringhurst" style="width:100px" /></a></p>
</div> <!-- /thebook -->

8
includes/data.inc.php
View File

@@ -42,4 +42,12 @@ return array(
)
);
function preventOrphans($string) {
$string = htmlentities($string);
$pattern = '/(.*) (\S*)$/i';
$replacement = '$1&nbsp;$2';
$string = preg_replace($pattern, $replacement, $string);
return $string;
}
?>

5
includes/fontdeck.inc.php
View File

@@ -1,5 +0,0 @@
<div id="deck">
<a href="http://fontdeck.com/"><img src="/i/fontdeck.png" alt="Fontdeck" /></a>
<p>Real typography for your website<br />
<a href="http://fontdeck.com/">Free to use</a>, <a href="http://fontdeck.com/typefaces">pro fonts</a>, <a href="http://fontdeck.com/">easy setup</a></p>
</div>

1
includes/footer.inc.php
View File

@@ -1,4 +1,3 @@
<div><br /></div>
<p id="footer">
This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>. It was <a href="http://www.clagnut.com/blog/1600/">created</a> and is maintained by <a href="http://www.clagnut.com/">Richard Rutter</a>. Please feel free to contribute by <a href="https://github.com/clagnut/webtypography">forking it on Github</a>.
</p>

8
includes/headlinks.inc.php
View File

@@ -1,11 +1,5 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/screen.css" />
<!--[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"
/>
<script type="text/javascript" src="/js/global.js"></script>
<link rel="stylesheet" href="http://fontdeck.com/s/css/p+zwVqq4agQiKsiAkUNVfzsNquo/<?php echo $_SERVER['SERVER_NAME']; ?>/1575.css" type="text/css" />

52
index.php
View File

@@ -1,26 +1,37 @@
<?php
// Turn on PHP Error Reporting
#ini_set("display_errors","2");
#ERROR_REPORTING(E_ALL);
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
$data = require_once($dr . "data.inc.php");
$items = $data['items'];
$keys = array_keys($items);
$latest_num = $keys[count($keys)-1];
$latest = $items[$latest_num];
?>
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>The Elements of Typographic Style Applied to the Web &ndash; a practical guide to web typography</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/screen.css" />
<!--[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"
/>
<script type="text/javascript" src="/js/global.js"></script>
<?php include($dr . "headlinks.inc.php") ?>
<style type="text/css">
html {
min-height: 100%; /* force gradient to cover whole page */
}
#cover {
color: #fff;
background: #400300 url(/i/bg-home.gif) repeat-x top;
background-color: #400300;
background-image: -webkit-linear-gradient(top, #000, #400300); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, #000, #400300); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, #000, #400300); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, #000, #400300); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, #000, #400300); /* Standard syntax; must be last */
padding: 4.5076% 7.2924%;
}
#cover H1 {
#cover h1 {
font-size: 2.0625em;
line-height: 1.666666666666667em;
margin:0;
@@ -45,7 +56,7 @@ h1#big-title span#ts {
line-height1.375em;
}
#cover H2 {
#cover h2 {
font-size: 1.5em;
line-height: 1.083333333333333em;
margin:0;
@@ -65,12 +76,12 @@ html>body #entrance a:hover {
border-bottom: 1px solid #fff;
}
#entrance UL {
#entrance ul {
list-style:none;
padding-left: 0;
}
LI SPAN {
li span {
position:absolute;
}
</style>
@@ -88,14 +99,9 @@ Applied <span>to the</span> Web
<div id="entrance">
<h2>A practical guide to web typography</h2>
<ul>
<li>Will return as soon as possible</li>
<?php /*
<li><a href="/intro/">Read the Introduction
</a></li>
<li><a href="/intro/">Read the Introduction</a></li>
<li><a href="/toc/">Table of Contents</a></li>
<li><span style="left:-3.5em">Latest: </span><a href="/Harmony_and_Counterpoint/Numerals__Capitals_and_Small_Caps/3.2.1/">3.2.1 Use titling figures with full caps, and text figures in all other&nbsp;circumstances
</a></li>
*/ ?>
<li><span style="left:-3.5em">Latest: </span><a href="/<?php echo $latest_num ?>"><?php echo $latest_num." ".$latest ?></a></li>
</ul>
</div>
</body>

73
intro.php
View File

@@ -1,61 +1,50 @@
<?php
$dr = $_SERVER["DOCUMENT_ROOT"];
$dr2 = preg_replace("/\/[^\/]+$/","/includes_webtype",$dr);
include($dr2 . "/db_connect.php");
// format text function
include($dr . "/includes/format.php");
// get item
$error = false;
$sql = "SELECT title, item FROM items WHERE filename='intro'";
$result = mysql_query($sql);
if ($myitem = mysql_fetch_array($result)) {;
$intro_title = $myitem["title"];
$item = $myitem["item"];
// format item
$intro_title = strip_tags(format($intro_title));
$item = format($item);
} else {
$error = "badFilename";
$mySQLsaid = mysql_error();
}
<?php
// Turn on PHP Error Reporting
#ini_set("display_errors","2");
#ERROR_REPORTING(E_ALL);
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title><?php echo $intro_title?> | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "/includes/headlinks.inc") ?>
<title>Introduction | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "headlinks.inc.php") ?>
</head>
<body class="bits">
<?php include($dr . "/includes/header.inc") ?>
<?php
if ($error != "badFilename") { # good filename
?>
<?php include($dr . "header.inc.php") ?>
<div id="main">
<h1><?php echo $intro_title?></h1>
<h1> Introduction
</h1>
<?php echo $item?>
<p>For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an&nbsp;excuse.</p>
<p>Robert Bringhurst&#8217;s book <cite>The Elements of Typographic Style</cite> is on many a designer&#8217;s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be <q>a must for everybody in the graphic arts, and especially for our new friends entering the field.</q></p>
<p>In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst&#8217;s working principles, explaining how to accomplish each using techniques available in <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>. The future is considered with coverage of <abbr>CSS3</abbr>, and practicality is ever present with workarounds, alternatives and compromises for less able&nbsp;browsers.</p>
<p>At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst&#8217;s book, one principle at a time.</p>
<p>I am excluding those principles which are not relevant to the Web or that do not require a technical explanation. Unfortunately this excludes the entire opening chapter, the Grand Design, which I heartily recommend you read as it lays down the foundations, philosophy and approach to good typography in any medium. If you were to take any working principle from the Grand Design, it would be this: <q>Give full typographical attention even to incidental details.</q></p>
<p>Now start with <a href="/2.1.1">Rhythm &#38; Proportion</a> or dip into the <a href="/toc">Table of Contents</a> and enjoy pushing a few boundaries to create websites of real typographical&nbsp;worth.</p>
<p style="text-align:right; margin-top:2.75em">&#8212; Richard Rutter, Brighton, December 2005.</p>
<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>
</div> <!-- /main -->
<div id="supp">
<h2><?php echo $title?></h2>
<?php include($dr . "/includes/references.inc") ?>
<?php include($dr . "/includes/book.inc") ?>
<?php include($dr . "references.inc.php") ?>
<?php include($dr . "book.inc.php") ?>
</div> <!-- /supp -->
<?php
}
?>
<?php include($dr . "/includes/footer.inc") ?>
<?php include($dr . "footer.inc.php") ?>
</body>
</html>

28
item.php
View File

@@ -1,8 +1,4 @@
<?php
// Turn on PHP Error Reporting
ini_set("display_errors","2");
ERROR_REPORTING(E_ALL);
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
$dr2 = str_replace("/includes/", "", $dr);
@@ -21,7 +17,19 @@ if (!array_key_exists ($item_num, $items)) {
$item_ar = explode("." , $item_num);
$item_chapter = $item_ar[0];
$item_section = $item_ar[0] . "." . $item_ar[1];
$title = htmlentities($items[$item_num]);
$title = preventOrphans($items[$item_num]);
}
$keys = array_keys($items);
$next_num = false;
if (isset($keys[array_search($item_num, $keys)+1])) {
$next_num = $keys[array_search($item_num, $keys)+1];
$next_item = preventOrphans($items[$next_num]);
}
$prev_num = false;
if (isset($keys[array_search($item_num, $keys)-1])) {
$prev_num = $keys[array_search($item_num, $keys)-1];
$prev_item = preventOrphans($items[$prev_num]);
}
?>
<!DOCTYPE html>
@@ -48,18 +56,18 @@ if (!array_key_exists ($item_num, $items)) {
<ul id="nextprev">
<?php
if ($nexttitle) {
echo "<li><span>&#8594;</span><a href='/$nextnumber/' title='Read next guideline'>$nexttitle</a></li>";
if ($next_num) {
echo "<li><span>&#8594;</span><a href='/$next_num' title='Read next guideline'>$next_item</a></li>";
}
if ($prevtitle) {
echo "<li><span>&#8592;</span><a href='/$prevnumber/' title='Read previous guideline'>$prevtitle</a></li>";
if ($prev_num) {
echo "<li><span>&#8592;</span><a href='/$prev_num' title='Read previous guideline'>$prev_item</a></li>";
}
?>
</ul>
<?php
include($dr . "references.inc.php");
include($dr . "fontdeck.inc.php");
include($dr . "book.inc.php");
?>
</div> <!-- /supp -->

4
items/2.1.1.html
View File

@@ -2,9 +2,9 @@
</blockquote>
<p>In <abbr title="Cascading Style Sheets">CSS</abbr>, word space is set with the <code>word-spacing</code> property which has a default value of <code>normal</code>. The default word space is equivalent to approximately 0.25&nbsp;em, although the exact value will depend on information encoded within the digital font file. To change the word spacing, you should specifiy a length in ems. This length is added to the existing word space; that is to say <code>word-spacing</code> does not set the actual space between words, it sets an increment to the existing spacing. For&nbsp;example:</p>
<pre><code>P {
<pre><code>p {
word-spacing:0.25em }
H1 {
h1 {
word-spacing:-0.125em }</code></pre>
<p>In the preceding example, word space in paragraphs is increased by 0.25&nbsp;em <span class='bracket'>(</span>effectively doubling it<span class='bracket'>)</span> and the word space in top level headings is decreased by 0.125&nbsp;em <span class='bracket'>(</span>effectively halving&nbsp;it<span class='bracket'>)</span>.</p>

83
items/2.1.10.html Normal file
View File

@@ -0,0 +1,83 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Lists, such as contents pages and recipes, are opportunities to build architectural structures in which space between the elements both separates and binds. The two favourite ways of destroying such an opportunity are setting great chasms of space that the eye cannot leap without help from the hand, and setting unenlightening rows of dots that force the eye to walk the width of the page like a prisoner being escorted back to its cell.&#8221;</p>
</blockquote>
<p>The <dfn>dot leader</dfn> approach to which Bringhurst alludes is the default presentation for tables of contents in Microsoft Word. Fortunately this kind of layout is tricky to accomplish in <abbr title="Cascading Style Sheets">CSS</abbr> so it is rarely seen in web pages. Bringhurst goes on to present two alternative layouts for tables of contents which are replicated&nbsp;here:</p>
<h2>Example 1 &#8211; Table of contents aligned&nbsp;right</h2>
<div class="example"><table class="ex2-1-10-toc1">
<tr><th>Introduction</th><td>7</td></tr>
<tr><th>Chapter <strong>1</strong> The Sex of Centaurs</th><td>11</td></tr>
<tr><th>Chapter <strong>2</strong> Poliphilo&#8217;s Dream</th><td>11</td></tr>
</table></div>
<p>This is a table of contents so it has been marked up as a simple&nbsp;table:</p>
<pre><code>&lt;table&gt;
&lt;tr&gt;&lt;th&gt;Introduction&lt;/th&gt;
&lt;td&gt;7&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Chapter &lt;strong&gt;1&lt;/strong&gt;
The Sex of Centaurs&lt;/th&gt;&lt;td&gt;11&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Chapter &lt;strong&gt;2&lt;/strong&gt;
Poliphilo&amp;#8217;s Dream&lt;/th&gt;&lt;td&gt;11&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> looks like&nbsp;this:</p>
<pre><code>table {
margin: 0 3em 0 auto; }
th {
font-weight: normal;
text-align: right;
padding:0; }
td {
font-style: italic;
text-align: right;
padding: 0 0 0 0.5em; }</code></pre>
<p>While most of the <abbr title="Cascading Style Sheets">CSS</abbr> is straight forward, a point worth highlighting is the <code>margin</code> declaration for the <code>table</code> itself. There is a right margin of 3&nbsp;em to set the table in slightly from the right gutter and a left margin of <code>auto</code> to push the table over towards the right hand side of the&nbsp;page.</p>
<h2>Example 2 &#8211; Centred table of&nbsp;contents</h2>
<div class="example"><table class="ex2-1-10-toc2">
<tr><th>Prologue</th><td>page 5</td></tr>
<tr><th>Points of Possible Agreement</th><td>page 9</td></tr>
<tr><th>Irreconcilable Differences</th><td>page 11</td></tr>
<tr><th>Conclusion</th><td>page 163</td></tr>
<tr><th>Index</th><td>page 164</td></tr>
</table></div>
<p>Again a simple table has been used for the&nbsp;markup:</p>
<pre><code>&lt;table&gt;
&lt;tr&gt;&lt;th&gt;Prologue&lt;/th&gt;&lt;td&gt;page 5&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Points of Possible Agreement&lt;/th&gt;&lt;td&gt;page 9&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Irreconcilable Differences&lt;/th&gt;&lt;td&gt;page 11&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Conclusion&lt;/th&gt;&lt;td&gt;page 163&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th&gt;Index&lt;/th&gt;&lt;td&gt;page 164&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> looks like&nbsp;this:</p>
<pre><code>table {
margin: 0 auto; }
th {
font-weight: normal;
text-align: right;
padding: 0 0.5em 0 0; }
td:before {
content: "2022";
padding-right: 0.5em; }
td {
font-style: italic;
text-align: left;
padding: 0; }</code></pre>
<p>There a couple of points worth noting in the <abbr title="Cascading Style Sheets">CSS</abbr>. The table has been centered by giving the left and right margins a value of <code>auto</code>. For block-level elements a <code>width</code> declaration would also be required when applying this technique, however tables have an inherent width so one does not need to be specified&nbsp;explicitly.</p>
<p>The bullet points separating chapter titles and page numbers have been generated by the <abbr title="Cascading Style Sheets">CSS</abbr>. Specifically a bullet point <span class='bracket'>(</span>Unicode character 2022<span class='bracket'>)</span> has been inserted before the <code>td</code> element. Generated content is not supported by Internet Explorer 6&nbsp;or 7, so a more cross-browser alternative would be to write a bullet point entity <code>&amp;#8226;</code> into the markup&nbsp;itself.</p>

24
items/2.1.2.html Normal file
View File

@@ -0,0 +1,24 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Anything from 45&nbsp;to 75&nbsp;characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line <span class='bracket'>(</span>counting both letters and spaces<span class='bracket'>)</span> is widely regarded as ideal. For multiple column work, a better average is 40&nbsp;to 50&nbsp;characters.&#8221;</p>
</blockquote>
<p>The <em>measure</em> is the number of characters in single line of a column of text. <abbr title="HyperText Mark-up Language">HTML</abbr> doesn&#8217;t have a concept of columns per se, instead text is held within <em>boxes</em>. In <abbr title="Cascading Style Sheets">CSS</abbr> the width of a box is set using the <code>width</code> property with any unit of length, for&nbsp;example:</p>
<pre><code>DIV#col1 {
width:400px }
DIV#col2 {
width:50% }
DIV#col3 {
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 &#8216;page&#8217;, he 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&#8217;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>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as 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>

37
items/2.1.3.html Normal file
View File

@@ -0,0 +1,37 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>In justified text, there is always a trade-off between evenness of word spacing and frequency of&nbsp;hyphenation.</p>
<p>Narrow measures &#8211; which prevent good justification &#8211; are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its&nbsp;stiffness.</p>
<p>Many unserifed faces look best when set ragged no matter what the length of the measure. And mono-spaced fonts, which are common on typewriters, always look better set ragged.&#8221;</p>
</blockquote>
<p>Setting text justified or ragged is accomplished in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>text-align</code> property, as&nbsp;follows:</p>
<pre><code>P {
text-align:left /* ragged right */ }
P {
text-align:right /* ragged left */ }
P {
text-align:justify }</code></pre>
<p>Effective justification of text can only be achieved if long words are hyphenated. <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> 2&nbsp;do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is&nbsp;poor.</p>
<p>So don&#8217;t justify text on the&nbsp;web.</p>
<h2>Future&nbsp;considerations</h2>
<p><abbr>CSS3</abbr>&nbsp;provides further refinement of justification within the <a href="/web/20140209213835/http://www.w3.org/TR/css3-text">Text Module</a>. For European languages, the <code>text-justify</code> property provides two justification options: <code>inter-word</code> and <code>inter-character</code>.</p>
<p>Setting <code>inter-word</code> selects the simplest and fastest full justification behavior, which spreads the text evenly across the line by increasing the width of the space between words only. No expansion or compression occurs within the words, i.e. no additional letter spacing is&nbsp;created.</p>
<p>Setting <code>inter-character</code> selects the justification behavior in which both inter-word and inter-letter spacing can be expanded or reduced to spread the text across the whole line. This is the significantly slower and more sophisticated type of the full justify behaviour preferred in newspaper and magazines. Typically, compression is tried first. If unsuccessful, expansion occurs: inter-word spaces are expanded up to a threshold, and finally inter-letter expansion is performed. For&nbsp;example:</p>
<pre><code>P {
text-align:justify;
text-justify:inter-character }</code></pre>
<p><abbr>CSS3</abbr>&nbsp;also provides last line alignment with the <code>text-align-last</code> property. Normally the last line in a paragraph of justified text would not be justified, however if <code>text-align-last</code> is set to <code>justify</code> then the last line will be also spread evenly across the line, although in most cases this would be highly undesirable from a typographical&nbsp;perspective.</p>
<p>A potentially more useful purpose for <code>text-align-last</code>, at least for display text, is to set it to <code>size</code>. With <code>size</code> selected, the line content is scaled to fit on the line, so a line with fewer characters will be displayed in a larger&nbsp;font.</p>

19
items/2.1.4.html Normal file
View File

@@ -0,0 +1,19 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>In the nineteenth century, which was a dark and inflationary age in typography and type design, many compositors were encouraged to stuff extra space between sentences. Generations of twentieth century typists were then taught to do the same, by hitting the spacebar twice after every period <span class='bracket'>[</span>full stop<span class='bracket'>]</span>. Your typing as well as your typesetting will benefit from unlearning this quaint Victorian habit. As a general rule, no more than a single space is required after a period, colon or any other mark of punctuation.&#8221;</p>
</blockquote>
<p>All white space in <abbr title="HyperText Mark-up Language">HTML</abbr>, in any combination of spaces, tabs or line breaks, is automatically collapsed to a single word space. Therefore this guideline is automatically adhered to regardless of your training as a&nbsp;typist.</p>
<p>If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many <a href="/web/20140209214008/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&amp;nbsp;</code>, as this has a meaning in and of&nbsp;itself.</p>
<ul class='nobullets'>
<li><code>&amp;#8194;</code> en space <span class="inex">&#8194;</span></li>
<li><code>&amp;#8195;</code> em space <span class="inex">&#8195;</span></li>
<li><code>&amp;#8196;</code> 3-per-em space <span class="inex">&#8196;</span></li>
<li><code>&amp;#8197;</code> 4-per-em space <span class="inex">&#8197;</span></li>
<li><code>&amp;#8198;</code> 6-per-em space <span class="inex">&#8198;</span></li>
<li><code>&amp;#8199;</code> figure space <span class="inex">&#8199;</span></li>
<li><code>&amp;#8200;</code> punctuation space <span class="inex">&#8200;</span></li>
<li><code>&amp;#8201;</code> thin space <span class="inex">&#8201;</span></li>
<li><code>&amp;#8202;</code> hair space <span class="inex">&#8202;</span></li>
</ul>
<p>Another method would be to apply the <code>white-space:pre</code> property in <abbr title="Cascading Style Sheets">CSS</abbr> to retain the white space formatting. However if you are using white space to format a passage of text, for instance computer code or poetry, then you should enclose the passage in a <code>pre</code> element as this is a more semantic way to preserve the white space pre-formatting.</p>

8
items/2.1.5.html Normal file
View File

@@ -0,0 +1,8 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Names such as W.B. Yeats and J.C.L. Prillwitz need hair spaces, thin spaces or no spaces at all after the intermediary periods <span class='bracket'>[</span>full stops<span class='bracket'>]</span>. A normal word space follows the <em>last</em> period in the string.&#8221;</p>
</blockquote>
<p>Hair spaces and thin spaces are two of the many <a href="/web/20140209230324/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Here&#8217;s how to use hair spaces and thin spaces,&nbsp;respectively:</p>
<pre><code>W.&amp;#8202;B. Yeats
J.&amp;#8201;C.&amp;#8201;L. Prillwitz</code></pre>
<p>Which renders as W.&#8202;B. Yeats and J.&#8201;C.&#8201;L. Prillwitz. Unfortunately some browsers which are less Unicode-aware will show square placeholder symbols instead of the required spaces, so until support improves, no space at all is probably the way to go in this&nbsp;instance.</p>

18
items/2.1.6.html Normal file
View File

@@ -0,0 +1,18 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Acronyms such as <abbr>CIA</abbr> and <abbr>PLO</abbr> are frequent in some texts. So are abbreviations such as <abbr>CE</abbr> and <abbr>BCE</abbr> or <abbr>AD</abbr> and <abbr>BC</abbr>. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type&nbsp;size.</p>
<p>Many typographers like to letterspace all strings of numbers as well, Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.&#8221;</p>
</blockquote>
<p>Letter spacing in <abbr title="Cascading Style Sheets">CSS</abbr> is achieved with the aptly named <code>letter-spacing</code> property. To letter space abbreviations at 10% of the type size you could wrap the abbreviations in <code>&lt;abbr&gt;</code> tags and apply a <abbr title="Cascading Style Sheets">CSS</abbr> rule such&nbsp;as:</p>
<pre><code>ABBR {letter-spacing:0.1em}</code></pre>
<p>If you have created static pages for your website then inserting <code>&lt;acronym&gt;</code> and <code>&lt;abbr&gt;</code> elements where appropriate might be slightly tedious but probably feasible. Dealing with text delivered by a content management system, however, is a different kettle of fish and would need some sort of automation. At this point your <abbr title="Content Management System">CMS</abbr> developer would probably turn to regular expressions. </p>
<p>I&#8217;m not going to explain regular expressions here &#8211; there are plenty of resources elsewhere on the web &#8211; but in the form of a <abbr title="PHP HyperText Processor">PHP</abbr> function here is an expression to get you&nbsp;started:</p>
<pre><code>$search = '/\b<span class='bracket'>(</span><span class='bracket'>[</span>A-Z<span class='bracket'>]</span><span class='bracket'>[</span>A-Z0-9<span class='bracket'>]</span>{2,}<span class='bracket'>)</span>\b/';
$replace = '&lt;abbr&gt;$1&lt;/abbr&gt;';
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
<p>This function looks for sequences of 3&nbsp;or more uppercase letters or numbers, such as <abbr title="Cascading Style Sheets">CSS</abbr>, <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Worldwide Web Consortium">W3C</abbr>, and wraps an <code>&lt;abbr&gt;</code> tag around&nbsp;them.</p>

19
items/2.1.7.html Normal file
View File

@@ -0,0 +1,19 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn&#8217;t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed <em>more</em> legible rather than less.&#8221;</p>
</blockquote>
<p>Letterspacing lower case on the Web is particularly risky as only some faces actually benefit from the treatment, and you can rarely guarantee which type face you will actually be&nbsp;transforming.</p>
<p>There are however some fairly common typefaces to which letterspacing could be applied. Vaguely similar to the Univers bold condensed mentioned by Bringhurst are Impact and Haettenschweiler. These faces would only be used for headings and could be letterspaced using the <code>letter-spacing</code> property as&nbsp;follows:</p>
<pre><code>h2 {
font-family: "univers bold condensed",
impact, haettenschweiler, sans-serif;
font-size: 200%;
letter-spacing:0.1em; }</code></pre>
<p>This would render as&nbsp;follows:</p>
<div class="ex2-1-7 example">wharves and warfingers</div>
<p>Notice that the <code>letter-spacing</code> is specified in <code>ems</code> to ensure that the amount of kerning is applied in proportion to the text&nbsp;size.</p>

29
items/2.1.8.html Normal file
View File

@@ -0,0 +1,29 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Kerning &#8211; altering the space between selected pairs of letters &#8211; can increase consistency of spacing in a word like Washington or Toronto, where the combinations <cite>Wa</cite> and <cite>To</cite> are kerned.&#8221;</p>
</blockquote>
<p>At present there is no mechanism within <abbr title="HyperText Mark-up Language">HTML</abbr> or <abbr title="Cascading Style Sheets">CSS</abbr> that specifically enables kerning. However text on the Web does not generally need manual kerning, as all digital fonts have kerning tables built-in. These tables define which letter pairs need adjusting and by how much, and are usually adhered to by operating systems. The only time manual kerning may prove necessary is with larger text such as that in headings, in particular when numbers, italics or punctuation are&nbsp;involved.</p>
<p>It is also important to bear in mind that letter pairs in one font of your <code>font-family</code> list may need kerning whereas in another font they do not. In this case it is advisable not to kern, as too much kerning is almost always worse than none at&nbsp;all.</p>
<p>Where you do wish to kern letter pairs, you must insert a neutral inline element, such as <code>span</code> and apply the <code>letter-spacing</code> property. For&nbsp;example:</p>
<pre><code>&lt;span class="kern"&gt;W&lt;/span&gt;ashington
and &lt;span class="kern"&gt;T&lt;/span&gt;oronto
.kern {letter-spacing: -0.1em }</code></pre>
<p>Which should render&nbsp;as:</p>
<div class="ex2-1-8 example"><span class="ex2-1-8i">W</span>ashington and <span class="ex2-1-8i">T</span>oronto</div>
<p>Notice that the <code>span</code> was applied around the first letter of the pair, not around both letters. This is because the <code>letter-spacing</code> property adds or removes space <strong>after each letter</strong>. Notice also that the <code>letter-spacing</code> is specified in <code>ems</code> to ensure that the amount of kerning is applied in proportion to the text&nbsp;size.</p>
<p>As with <a href="/web/20140209204454/http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.6/">letterspacing strings of capitals</a>, adding a <code>span</code> every time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This <abbr title="PHP HyperText Processor">PHP</abbr> function uses a regular expression to replace insert a <code>span</code> into any string of &#8216;To&#8217; or &#8216;Wa&#8217;:</p>
<pre><code>$search = '/<span class='bracket'>(</span>T<span class='bracket'>)</span><span class='bracket'>(</span>o<span class='bracket'>)</span>|<span class='bracket'>(</span>W<span class='bracket'>)</span><span class='bracket'>(</span>a<span class='bracket'>)</span>/';
$replace = '&lt;span class="kern"&gt;$1$3&lt;/span&gt;$2$4';
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
<h2>The&nbsp;Future</h2>
<p>The <a href="/web/20140209204454/http://www.w3.org/TR/2003/CR-css3-text-20030514/#kerning-props"><abbr>CSS3</abbr> Text Module</a> may contain the <code>kerning-mode</code> and <code>kerning-pair-threshold</code> properties to aid control over kerning, although these properties have yet to be fully&nbsp;defined.</p>

15
items/2.1.9.html Normal file
View File

@@ -0,0 +1,15 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>In the world of digital type, it is very easy for a designer or compositor with no regard for letters to squish them into cattle trains and ship them to slaughter.&#8221;</p>
</blockquote>
<p><abbr title="Cascading Style Sheets">CSS</abbr> does not offer many opportunities for altering the width or shapes of letters. In fact only the <code>letter-spacing</code> property can be applied at all for this purpose, and that simply changes the width of the letters <span class='bracket'>(</span>but not their shape<span class='bracket'>)</span>. The <code>letter-spacing</code> property can however be particularly destructive. Consider this maltreatment of a&nbsp;heading:</p>
<pre><code>&lt;h2 class="squish"&gt;letterfit&lt;/h2&gt;
h2.squish {letter-spacing: -0.1em }</code></pre>
<p>Resulting&nbsp;in:</p>
<div class="ex2-1-9 example">Letterfit is important</div>
<p>The result may differentiate itself stylistically from other websites, and that might be fine if the words are not important; legibility is the real loser in this&nbsp;instance.</p>

37
items/2.2.1.html Normal file
View File

@@ -0,0 +1,37 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Vertical space is metered in a different way <span class='bracket'>[</span>to horizontal space<span class='bracket'>]</span>. You must choose not only the overall measure &#8211; the depth of the column or page &#8211; but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.&#8221;</p>
</blockquote>
<p>Leading <span class='bracket'>(</span>pronounced &#8220;ledding&#8221;<span class='bracket'>)</span> is so called because, in mechanical presses, strips of lead are placed between lines of type to space the lines apart. Leading is achieved in <abbr title="Cascading Style Sheets">CSS</abbr> through the <code>line-height</code> property. For example 12&nbsp;point text can be given 3&nbsp;points of lead in the following&nbsp;manner:</p>
<pre><code>p {
font-size: 12pt;
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>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>
<pre><code>p {
font-size: 12pt;
line-height: 1.25 }</code></pre>
<p>In this example the value of <code>line-height</code> is a multiplier: 1.25&nbsp;x 12 = 15&nbsp;pt. This is a far more reliable method as the line-height <span class='bracket'>(</span>the distance between baselines<span class='bracket'>)</span> will always be proportional to the text size. Line height can be incorporated into the <code>font</code> property using a shorthand familiar to&nbsp;typographers:</p>
<pre><code>p {
font: 12pt/1.25 "Minion Pro", "Minion Web", serif }</code></pre>
<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>
<div class="example"><div class="ex2-2-1i">line-height spacing is added equally above and below the text</div></div>
<p>Negative leading, in other words a <code>line-height</code> value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For&nbsp;example:</p>
<pre><code>.example {
font-size: 1.5em;
line-height: 0.85;
text-indent: -0.5em }</code></pre>
<div class="ex2-2-1ii example">this is an&nbsp;example<br />
of negative leading</div>

51
items/2.2.2.html Normal file
View File

@@ -0,0 +1,51 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.&#8221;</p>
</blockquote>
<p>The most common addition of vertical space on a webpage is that inserted between paragraphs. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic leading. For example, the text on this page is set at 12&nbsp;px with a <code>line-height</code> of 1.5&nbsp;em, making each line 18&nbsp;px in height. In order to keep the rhythm of the text, the vertical spacing between blocks should also be 18&nbsp;px. This is achieved by setting top- and bottom-margins equal to the line&nbsp;height.</p>
<pre><code>p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1.5em }</code></pre>
<p>It should be noted that the default treatment by web browsers of paragraphs <span class='bracket'>(</span>and other block level elements such as blockquotes and lists<span class='bracket'>)</span> is to insert a top- and bottom-margin of 1&nbsp;em. The implication is that margins must always be specified by the&nbsp;designer.</p>
<h2>Variations in text&nbsp;size</h2>
<p>When there is a change in text size, perhaps with a heading or sidenotes, the differing text should take up a multiple of the basic leading. As stated earlier, each line on this page is 18&nbsp;px in height. This means that every diversion from the basic text size should take up multiples of 18&nbsp;px. This can be accomplished by adjusting the <code>line-height</code> and <code>margin</code>&nbsp;accordingly.</p>
<h2>Headings</h2>
<p>The subheadings on this page are set to 14&nbsp;px. In order that the height of each line is 18&nbsp;px, the <code>line-height</code> should be set to 18&nbsp;&divide;&nbsp;14 =&nbsp;1.286. Similarly the margins above and below the heading must be adjusted. The temptation is to set heading margins to a simple 1&nbsp;em, or leave them at the browser default, but this would usually result in breaking the rhythm of the text. In the case of this page, the top and bottom margins are the same size and equal to a full line, so they too should be set at&nbsp;1.286&nbsp;em.</p>
<pre><code>h2 {
line-height: 1.286;
margin-top: 1.286em;
margin-bottom: 1.286em }</code></pre>
<p>One can also set asymmetrical margins for headings, provided the margins combine to be multiples of the basic line height. For example, a top margin of 1&frac12; lines could be combined with a bottom margin of half a line as&nbsp;follows:</p>
<p class='imgholder'><img src="/web/20140209214917im_/http://webtypography.net/i/2-2-2i.png" alt="Diagram of text showing how the basic leading is retained with a heading and asymmetrical margins" /></p>
<pre><code>h2 {
line-height: 1.286;
margin-top: 1.929em;
margin-bottom: 0.643em }</code></pre>
<p>By way of a further example, the main heading of the page you are reading has a text size of 18&nbsp;px, therefore the <code>line-height</code> is set to 1&nbsp;em, as are the&nbsp;margins.</p>
<h2>Sidenotes</h2>
<p>Sidenotes <span class='bracket'>(</span>and footnotes for that matter<span class='bracket'>)</span> are often set at a smaller size to the basic text. This smaller text should still form a rhythm with the basic text, so a calculation similar to that of headings, is required. Consider the following&nbsp;example:</p>
<div class="ex2-2-2"><p class="basictext">Daniel is roused by a rooster on the forecastle* deck that is growing certain it&#8217;s not just imagining the light in the eastern sky. Unfortunately the eastern light is off to port this morning. Yesterday it was to starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into the deep water.</p><p class="sidenote">The forecastledeck is the short deck that, towards the ship&#8217;s bow, is built above the upperdeck.</p></div>
<p>The main body text again has a text size of 12&nbsp;px and a line height of 18&nbsp;px. The sidenotes are set at 10&nbsp;px and so their line-height must be increased to 18&nbsp;&divide;&nbsp;10 =&nbsp;1.8.</p>
<h2>Images</h2>
<p>On the Web, images in sidebars and within the main body of text are almost always guilty of disrupting the rhythm of text. The same rules should be applied to images as to headings: any image and associated caption should take up multiples of the basic line height. For example the image on this page demonstrating asymmetrical headings is 180&nbsp;px tall &#8211; precisely 10&nbsp;lines in height. </p>
<p>Clearly problems would arise when the basic text size changes, for example if a reader changes their default text size. In this situation, if the image is left at its natural size, or has a specific size set in pixels, the image would no longer take up a multiple of the basic line height. This could be avoided if the image is sized in ems rather than pixels. For example, the aforementioned image could be given a <code>height</code> of 180&nbsp;&divide;&nbsp;12 =&nbsp;15&nbsp;em <span class='bracket'>(</span>12&nbsp;px being the text&nbsp;size<span class='bracket'>)</span>.</p>
<p>Sizing images in ems rather than pixels means that they scale up and down with the text size. It is acknowledged, however that this will result in some loss of image quality which may or may not be acceptable. The alternative is to keep the images sized in pixels, and accept that the small proportion of readers who resize their default text size will receive a sub-optimal reading&nbsp;experience.</p>

10
items/2.3.1.html Normal file
View File

@@ -0,0 +1,10 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>The function of a paragraph indent is to mark a pause, setting the paragraph apart from what precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and can therefore be omitted.&#8221;</p>
</blockquote>
<p>Paragraphs, and other block level elements, are indented using the <code>text-indent</code> property. To ensure a paragraph is set flush left, the text-indent should be set to&nbsp;zero:</p>
<pre><code><code>p {
text-indent:0 }
</code></code></pre>
<p>This rule is rarely necessary, however, because <abbr title="Cascading Style Sheets">CSS</abbr> specifies that the default initial value for <code>text-indent</code> should be <code>0</code>.</p>

83
items/2.3.2.html Normal file
View File

@@ -0,0 +1,83 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Ornaments <span class='bracket'>[</span>...<span class='bracket'>]</span> drop lines <span class='bracket'>[</span>...<span class='bracket'>]</span> outdented paragraphs <span class='bracket'>[</span>...<span class='bracket'>]</span> and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.&#8221;</p>
</blockquote>
<p>Indenting the first line of a paragraph, or any block element is achieved in <abbr title="Cascading Style Sheets">CSS</abbr> using the text-indent&nbsp;property:</p>
<pre><code>p {
text-indent:1em }</code></pre>
<p>The preceding rule will indent every paragraph, however we only wish to indent paragraphs that follow another paragraph. To achieve this, an adjacent sibling selector <span class='bracket'>(</span><code>+</code><span class='bracket'>)</span> can be&nbsp;used:</p>
<pre><code>p + p {
text-indent:1em }</code></pre>
<p>Further, the line space between paragraphs which most browsers insert by default should be removed. Browsers create this line break by adding a top and bottom margin to paragraphs; the bottom margin should be removed from all paragraphs, and the top margin removed from those paragraphs which follow another&nbsp;paragraph:</p>
<pre><code>p {
margin-bottom:0 }
p + p {
text-indent:1em;
margin-top:0 }</code></pre>
<p>There is no limit to how much you indent by, but you may wish to start by describing a square. This can be achieved by setting your indent to the same value as your line-height.</p>
<p>It should be noted that Internet Explorer 6&nbsp;does not support the adjacent sibling selector. In the above examples, <abbr title="Internet Explorer">IE</abbr>6&nbsp;will not indent any paragraphs, instead paragraphs will be marked with a line&nbsp;break.</p>
<p>Indentation is not the only way to indicate a paragraph. The many alternatives include: simple block paragraphs, outdenting, ornamented indents, ornamentation within a continuous stream, or&nbsp;droplines.</p>
<h2>Block&nbsp;Paragraphs</h2>
<p>As stated earlier, block paragraphs &#8211; paragraphs separated by line breaks &#8211; are the default method used by web browsers. As explained in <a href="/web/20140209211703/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">&#167;2.2.2</a> the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is&nbsp;maintained.</p>
<h2>Outdenting</h2>
<p class="ex2-3-2i">Marking paragraphs by outdenting them into the margin is achieved in the same manner as indenting: simply use a negative number for the indent.</p>
<pre><code>p {
margin-bottom: 0 }
p + p {
text-indent:-1.5em;
margin-top:0 }</code></pre>
<h2>Ornaments</h2>
<p class="ex2-3-2ii">Ornamented indentation, unlike standard indentation, does not necessarily require the use of <code>text-indent</code> to achieve the primary effect <span class='bracket'>(</span>although it can aid clarity<span class='bracket'>)</span>. The key to achieving this effect is the use of the <abbr title="Cascading Style Sheets">CSS</abbr> 2.1 <code>:before</code> pseudo-element to specify the ornamentation. The following example would insert a floral heart at the beginning of a subsequent paragraph:</p>
<pre><code>p {
margin-bottom: 0 }
p + p:before {
content: "2767";
padding-right: 0.4em;
margin-top:0 }</code></pre>
<div class="example ex2-3-2iii"><p>In the above example, applying a <code>text-indent</code> to the paragraph would cause the ornament to be indented with the first line of the paragraph; to separate the ornament from the content, <code>padding-right</code> has been applied to the generated content.</p><p>Another use of ornaments as paragraph markers is to have a continuous stream of text with paragraphs separated by ornaments. To achieve this, the paragraphs should be set to display as <code>inline</code> elements, with ornamentation specified as before <span class='bracket'>(</span>in this case a decorative pilcrow is used in place of the floral heart bullet<span class='bracket'>)</span>:</p></div>
<pre><code>p { display: inline }
p + p:before {
content: "2761";
padding-right: 0.1em;
padding-left: 0.4em }</code></pre>
<p>It should be noted that the afore mentioned rules for ornaments will not work in Internet Explorer <span class='bracket'>(</span>up to version 7&nbsp;at the time of writing<span class='bracket'>)</span> as it does not support the <code>content</code> property of <abbr title="Cascading Style Sheets">CSS</abbr>. Additionally Firefox on Windows <span class='bracket'>(</span>tested on <abbr>XP</abbr> SP2&nbsp;at the time of writing<span class='bracket'>)</span> will only display those ornaments which are contained within the current font. Essentially these limitations imply that the afore-mentioned technique cannot be relied upon to work on Windows machines at present. Alternative techniques would be to use background image instead, or to include actual images in the code which, if sized in ems, would resize in proportion to the&nbsp;text.</p>
<h2>Droplines</h2>
<p>Dropline paragraphs start one line down, at the horizontal place on the page that the previous paragraph finished. Unlike other styles mentioned, dropline paragraphs for long pieces of text are impossible to achieve consistently in <abbr title="Cascading Style Sheets">CSS</abbr> without exorbitantly long <abbr title="Cascading Style Sheets">CSS</abbr> files or <span class='bracket'>(</span>preferably<span class='bracket'>)</span> the aid of&nbsp;JavaScript.</p>
<p>A technique that can be applied is similar to that used for a continuous stream of text, in that it uses <code>display:inline</code> to achieve the horizontal positioning. Once the paragraphs are positioned horizontally, a relative top position equal to the line height applied to subsequent paragraphs can create the desired vertical positioning <span class='bracket'>(</span>and thus the full drop line&nbsp;effect<span class='bracket'>)</span>:</p>
<pre><code>p {
display: inline;
position: relative }
p + p {top: 1.3em }</code></pre>
<p>The problem with this approach is that the vertical positioning is not relative to the previous paragraph, only the parent box, and so all paragraphs after the first dropped paragraph appear to simply be part of a continuous stream of text. To achieve the full effect requires that each subsequent paragraph have a multiple of the original <code>top</code>&nbsp;position:</p>
<pre><code>p {
display: inline;
position: relative }
p + p {top: 1.3em }
p + p + p {top: 2.6em }
p + p + p + p {top: 3.9em }</code></pre>
<p>Specifying top positions this way is clearly unwieldy, and a perfectly reasonable candidate for implementing in JavaScript. The technique might be applicable to display material where there are only short runs of&nbsp;text.</p>

10
items/2.3.3.html Normal file
View File

@@ -0,0 +1,10 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.&#8221;</p>
</blockquote>
<p>Adding a gap between a block quotation and the main text is best achieved by applying a top and bottom margin to the blockquote. By default, browsers usually apply a left and right margin as well. You may wish to remove this altogether by setting the margins to zero. If you wish to retain the indent, a more consistent layout can be achieved by applying left and right margins equal to the top and bottom&nbsp;margins.</p>
<pre><code>blockquote {
margin:1.5em }</code></pre>
<p>As explained in <a href="/web/20140209223524/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/" title="Add and delete vertical space in measured intervals">&#167;2.2.2</a>, the margins should be sized so that the rhythm of the text is maintained. Where the blockquote text size is the same as the main text, the separating margins should be set equal to the line-height.</p>

64
items/2.3.4.html Normal file
View File

@@ -0,0 +1,64 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.&#8221;</p>
</blockquote>
<p>When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its &#8220;chosen form&#8221;, including matters of spacing and visual structure <span class='bracket'>(</span>as this is considered, in many poetic works, to be at least as important as the words themselves<span class='bracket'>)</span>. As such, a <code>pre</code> <span class='bracket'>(</span>pre-formatted<span class='bracket'>)</span> element is most apt to setting&nbsp;verse.</p>
<pre><code>&lt;blockquote class="verse"&gt;
&lt;pre&gt;God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.&lt;/pre&gt;
&lt;/blockquote&gt;</code></pre>
<p>In its default state the <code>pre</code> element is usually rendered using a monospaced font, so this should normally be changed to a more fitting typeface. Setting the <code>font-family</code> to inherit the typeface from the surrounding text may be a good&nbsp;start:</p>
<pre><code>.verse pre {
font-family: inherit; }</code></pre>
<p>A logical way to center the verse on the longest line would be to simply specify <code>width:auto</code> and <code>margin:0 auto</code>. Unfortunately, due to browsers&#8217; rendering of preformatted elements, the element will still be considered to comprise full-width lines, so no centering will occur. However we can work around this by specifying the <code>pre</code> element to display as a <code>table</code> as&nbsp;follows:</p>
<pre><code>.verse pre {
font-family: inherit;
display: table;
width: auto;
margin: 0 auto; }</code></pre>
<p>The preceding rules achieve the desired layout in Firefox, Safari and Opera 9. However <code>margin:0 auto</code> will not center elements in Internet Explorer 6&nbsp;or 7, without a specific width being set. To work around this, a new <code>span</code> element containing the entire block of verse must be nested within the <code>pre</code> element as&nbsp;follows:</p>
<pre><code>&lt;blockquote class="verse"&gt;
&lt;pre&gt;&lt;span&gt;God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.&lt;/span&gt;&lt;/pre&gt;
&lt;/blockquote&gt;</code></pre>
<p>This <code>span</code> can then be centered in Internet Explorer applying <code>text-align:center</code> to the <code>pre</code> and resetting the text alignment on the <code>span</code>&nbsp;element.</p>
<pre><code>.verse pre {
text-align: center; }
.verse pre span {
text-align: left; }</code></pre>
<p>Much like other browsers, Internet Explorer considers any preformatted content to have full-width lines; to counter this, the <code>span</code> can be set to <code>display:inline-block</code>. This in turn causes Internet Explorer to ignore white-space formatting, so we must re-set the <code>span</code> to <code>white-space:pre</code>. This gives&nbsp;us:</p>
<pre><code>.verse pre {
text-align: center; }
.verse pre span {
text-align: left;
display: inline-block;
white-space: pre; }</code></pre>
<p>The <code>display:inline-block</code> in the preceding rule causes Gecko-based browsers such as Firefox and Camino to incorrectly render the contents. Fortunately these rules are only required for Internet Explorer, so we can write them in a separate style sheet, included using conditional comments <span class='bracket'>(</span>see <a href="/web/20140209225810/http://www.quirksmode.org/css/condcom.html" title="Quirksmode: &#013;Conditional comments">Quirksmode</a> for more&nbsp;info<span class='bracket'>)</span>:</p>
<pre><code>&lt;!-<span class='bracket'>[</span>if lte IE 7<span class='bracket'>]</span>&gt;
&lt;link rel="stylesheet" type="text/css" href="ie-lte-7.css" /&gt;
&lt;!<span class='bracket'>[</span>endif<span class='bracket'>]</span>-&gt;</code></pre>
<p>Here&#8217;s the final rendered example of prose, set flush left &#38; ragged right, and centered on the longest&nbsp;line:</p>
<div class="example"><blockquote class="ex2-3-4"><pre><span>God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.</span></pre></blockquote></div>

28
items/2.4.1.html Normal file
View File

@@ -0,0 +1,28 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.&#8221;</p>
</blockquote>
<p>Unlike much word processing and page-layout software, there is not yet any automatic hyphenation built into web browsers. The next best method is to insert hyphen characters&nbsp;manually.</p>
<p>Liquid layouts and resizable text mean that, on the Web, one never knows which word will be at the end of a line. To deal with this in <abbr title="HyperText Mark-up Language">HTML</abbr>, there are two types of hyphens: the plain hyphen and the soft hyphen. Browsers treat the plain hyphen as just another character. The soft hyphen tells the browser where a word break can occur, and should only be displayed when a word is being broken across two&nbsp;lines.</p>
<p>The soft hyphen has existed since <abbr title="HyperText Mark-up Language">HTML</abbr> 3.2, and is <a href="/web/20140209230237/http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.3">explained well in the <abbr title="HyperText Mark-up Language">HTML</abbr> 4.0</a> recommendation. Its entity code is <code>&amp;shy;</code> or <code>&amp;#173;</code> and is used as&nbsp;follows:</p>
<pre><code>anti&amp;shy;dis&amp;shy;est&amp;shy;ab&amp;shy;lish&amp;shy;ment&amp;shy;arian&amp;shy;ism</code></pre>
<p>Which renders in your browser as: anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism.</p>
<p>By definition, a soft hyphen should only appear when the word is wrapped. Browser support for this was patchy, but the situation has improved recently. Internet Explorer 6&nbsp;treats the soft hyphen correctly, as do Opera, Safari 2&nbsp;and Firefox 3. However older Gecko-based browsers such as Firefox 2&nbsp;hide all soft hyphens and do not perform any hyphenation. By contrast Safari 1&nbsp;displays all soft hyphens regardless of whether the word is&nbsp;wrapping.</p>
<h2>The&nbsp;Future</h2>
<p>Until recently, the <a href="/web/20140209230237/http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a> contained the <code>hyphenate</code> property which could be set to <code>auto</code> or <code>none</code>. This property introduced the concept of automatic hyphenation to browsers, and would require that the web browser has a hyphenation dictionary for the language of the text being hyphenated. For&nbsp;example:</p>
<pre><code>p {
hyphenate: auto; }</code></pre>
<p>At the time of writing, the latest <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-text-20070306/">Working Draft of March 2007</a>, states that the definition of the hyphenation feature is still very much up-in-the-air, but it&#8217;s likely that advanced hyphenation controls will be introduced. The <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, among these are the <code>hyphenate-before</code> and <code>hyphenate-after</code> properties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For&nbsp;example:</p>
<pre><code>p {
hyphenate-before:2;
hyphenate-after:3; }</code></pre>

12
items/2.4.3.html Normal file
View File

@@ -0,0 +1,12 @@
<p>This guideline can be achieved easily when hyphenating manually. See <a href="/web/20140209201628/http://webtypography.net/Rhythm_and_Proportion/Etiquette_of_Hypenation_and_Pagination/2.4.1/" title="At hyphenated line-ends, leave at least two characters behind and take at least three forward">&sect;2.4.1</a> for more information on manual&nbsp;hypenation.</p>
<h2>The&nbsp;Future</h2>
<p>Hyphenation will be included in the <a href="/web/20140209201628/http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a>, but at the time of writing, the definition of the hyphenation feature is still very much up-in-the-air. Currently the <a href="/web/20140209201628/http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, and among these is the <code>hyphenate-lines</code> property which specifies the maximum number of successive hyphenated lines in an element. For&nbsp;example:</p>
<pre><code>p {
hyphenate: auto;
hyphenate-lines: 3; }</code></pre>
<p>A value of <code>none</code> means that there is no limit to the number of successive hyphenated&nbsp;lines.</p>

20
items/2.4.5.html Normal file
View File

@@ -0,0 +1,20 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>In English one hyphenates <em>cab-ri-o-let</em> but in French <em>ca-brio-let</em>. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.&#8221;</p>
</blockquote>
<p>This guideline can be achieved on the Web when hyphenating manually. See <a href="/2.4.1" title="At hyphenated line-ends, leave at least two characters behind and take at least three forward">&sect;2.4.1</a> for more information on manual&nbsp;hyphenation.</p>
<h2>The&nbsp;Future</h2>
<p>Hyphenation will be included in the <a href="http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a>, but at the time of writing, the definition of the hyphenation feature is still very much up-in-the-air. Currently the <a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally&nbsp;proposed.</p>
<p>The choice of which hyphenation dictionary to use should be automatic depending on the natural language of the document. The document language should ordinarily be specified in the <abbr>HTTP</abbr> header, but can also be identified with&nbsp;markup:</p>
<pre><code>&lt;html lang="en"&gt; ... &lt;/html&gt;</code></pre>
<p>The <a href="http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a> may also introduce a <code>hyphenate-dictionary</code> property to specify which hyphenation dictionary to use. For&nbsp;example:</p>
<pre><code>html<span class='bracket'>[</span>lang=en<span class='bracket'>]</span> {
hyphenate-dictionary:url<span class='bracket'>(</span>hyph_en.dic<span class='bracket'>)</span> }
html<span class='bracket'>[</span>lang=fr<span class='bracket'>]</span> {
hyphenate-dictionary:url<span class='bracket'>(</span>hyph_fr.dic<span class='bracket'>)</span> }</code></pre>
<p>A value of <code>auto</code> would indicate that the built-in dictionaries, if any, should be&nbsp;used.</p>

14
items/2.4.6.html Normal file
View File

@@ -0,0 +1,14 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>Hard spaces are useful for preventing line-breaks within phrases such as <em>6.2&nbsp;mm</em>, <em>3&nbsp;in.</em>, <em>4&nbsp;&times;&nbsp;4</em>, or in phrases like <em>page&nbsp;3</em> and <em>chapter&nbsp;5</em>.&#8221;</p>
</blockquote>
<p>In <abbr title="HyperText Mark-up Language">HTML</abbr> the hard space character is known as a non-breaking space and is inserted using the entity <code>&amp;nbsp;</code>, for&nbsp;example:</p>
<pre><code>1&amp;nbsp;inch is equivalent to 2.54&amp;nbsp;cm.</code></pre>
<p>It should not really be expected of authors to type <code>&amp;nbsp;</code> everytime a non-breaking space is required. This is a job that, to some degree, can be performed automatically by a content management system. To demonstrate this by way of simple <abbr title="PHP HyperText Processor">PHP</abbr> example, a regular expression function could automatically insert non-breaking spaces as&nbsp;follows:</p>
<pre><code>$search = '/<span class='bracket'>(</span><span class='bracket'>[</span>0-9<span class='bracket'>]</span><span class='bracket'>)</span> <span class='bracket'>(</span><span class='bracket'>[</span>a-zA-Z<span class='bracket'>]</span><span class='bracket'>)</span>/';
$replace = '$1&amp;nbsp;$2';
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
<p>This function looks for sequences of a number followed by a space followed by a letter and replaces the space with a non-breaking space. This would deal with instances such as <em>2.54&nbsp;cm</em>. For phrases like <em>chapter 5</em> it would be better to create a set of watch-words rather than attaching every number to a preceding string. Additionally rules would need to be created to handle common mathematical operators as in <em>4&nbsp;&times;&nbsp;4</em>.</p>

33
items/2.4.8.html Normal file
View File

@@ -0,0 +1,33 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>The stub-ends left when paragraphs <em>end</em> on the <em>first</em> line of a page are called <em>widows</em>. They have a past but not a future, and they look foreshortened and forlorn.&#8221;</p>
</blockquote>
<p>Comprehensive control for page breaks was introduced in <abbr title="Cascading Style Sheets">CSS</abbr> 2, however browser support is currently limited to Opera 9. The only paging properties supported by Internet Explorer 7, Safari 3&nbsp;and Firefox 2&nbsp;are <code>page-break-before</code> and <code>page-break-after</code> <span class='bracket'>(</span>this is also true of <abbr title="Internet Explorer">IE</abbr>8&nbsp;beta and Firefox 3&nbsp;beta at time of&nbsp;writing<span class='bracket'>)</span>.</p>
<p>The <code>page-break-before</code> and <code>page-break-after</code> properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page everytime an <code>h1</code> heading is encountered and after every <code>.section</code>&nbsp;block.</p>
<pre><code>h1 {
page-break-before:always }
.section {
page-break-after:always }</code></pre>
<p>If you know <span class='bracket'>(</span>or can calculate<span class='bracket'>)</span> when a paragraph will be split over two pages, you could achieve some crude widow and orphan control by giving that paragraph a relevant class and forcing a page break before it, for&nbsp;example:</p>
<pre><code>.dontsplit {
page-break-before:always }</code></pre>
<p>In reality that is not a likely situation and would always be problematic if readers set their browsers to print out different size text, or use different size paper, to your assumptions. </p>
<h2>The&nbsp;Future</h2>
<p>In essence widow and orphan control is not currently possible for the vast majority of people. However <abbr title="Cascading Style Sheets">CSS</abbr> 2&nbsp;support will increase with time so if you are writing a print style sheet it is worth considering the properties already specified in <abbr title="Cascading Style Sheets">CSS</abbr>&nbsp;2.</p>
<p>A relative of the <code>page-break-after</code> property mentioned earlier is <code>page-break-inside</code> which stops elements spanning pages. For example you may like to apply this rule to all&nbsp;headings:</p>
<pre><code>h1, h2, h3, h4, h5, h6 {
page-break-inside:never }</code></pre>
<p>Precise widow and orphan control is also available through the <code>widows</code> and <code>orphans</code> properties. The value of the property is the minimum number of lines which is allowed to be widowed or orphaned. For example you can prevent less than four lines of a paragraph being left behind or printed on a new page using the&nbsp;following:</p>
<pre><code>p {
widows:4;
orphans:4 }</code></pre>

28
items/3.1.1.html Normal file
View File

@@ -0,0 +1,28 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400&nbsp;years. <span class='bracket'>[</span>...<span class='bracket'>]</span> Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.&#8221;</p>
</blockquote>
<p>Sizing text in <abbr title="Cascading Style Sheets">CSS</abbr> is achieved using the <code>font-size</code> property. In print, font sizes are specified absolutely, for example setting text at 12&nbsp;points implies a particular physical height for the printed text. On the web, font sizes can be set absolutely or relatively, and in a number of different units. What&#8217;s more, most web browsers enable the reader to resize the text to suit their own reading environment and&nbsp;requirements.</p>
<p>For text which is to be printed, the <code>font-size</code> property can and should be used to set in text in points, for&nbsp;example:</p>
<pre><code>p { font-size:12pt }</code></pre>
<p>For text which is to be read on screen, the situation is slightly more complicated. Arguably the most appropriate unit is pixels which is a unit relative to the screen resolution. Setting text sizes in pixels gives web designers precision similar to that afforded to print designers. However, Internet Explorer does not allow readers to resize text set in pixels <span class='bracket'>(</span>although <abbr title="Internet Explorer">IE</abbr>7&nbsp;does provide full page zooming<span class='bracket'>)</span>, so we need to look to other&nbsp;units.</p>
<p>Sizing text using the <code>em</code> unit is the next most appropriate approach. The em is a true typographic unit and was <a href="/web/20140209211729/http://www.w3.org/WAI/GL/css2em.htm">recommended by the <abbr title="Worldwide Web Consortium">W3C</abbr></a> from the outset of <abbr title="Cascading Style Sheets">CSS</abbr>. Ems are a relative unit and act as multipliers based on the text element&#8217;s parent element. Thus, if the <code>body</code> of a web page has 16&nbsp;px text by default, making paragraphs render at 12&nbsp;px would require setting paragraphs at <code>0.75em</code>.</p>
<pre><code>p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre>
<p>One further problem arises with this method: <abbr title="Internet Explorer">IE</abbr>6&nbsp;and <abbr title="Internet Explorer">IE</abbr>7&nbsp;unacceptably exaggerate the smallness and largeness of the resized text. This can be solved by setting a percentage <code>font-size</code> on the <code>body</code>.</p>
<p>So choosing from the traditional scale, our final font sizing style sheet could look as&nbsp;follows:</p>
<pre><code>body { font-size:100%; }
h1 { font-size:2.25em; /* 16x2.25=36 */ }
h2 { font-size:1.5em; /* 16x1.5=24 */ }
h3 { font-size:1.125em; /* 16x1.125=18 */ }
h4 { font-size:0.875em; /* 16x0.875=14 */ }
p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre>
<p>More details and analysis of font sizing can be found in <a href="/web/20140209211729/http://www.alistapart.com/articles/howtosizetextincss/">How to Size Text in <abbr title="Cascading Style Sheets">CSS</abbr></a>.</p>

22
items/3.2.1.html Normal file
View File

@@ -0,0 +1,22 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former <cite>text figures</cite>, <cite>hanging figures</cite>, <cite>lowercase figures</cite>, or <cite>old-style figures</cite> <span class='bracket'>(</span>OSF for short<span class='bracket'>)</span> and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called <cite>titling figures</cite>, <cite>ranging figures</cite> or <cite>lining figures</cite>, because they range or align with the upper&nbsp;case.<br />
<span class='bracket'>[</span>...<span class='bracket'>]</span><br />
<span class='bracket'>[</span>Text figures<span class='bracket'>]</span> are basic parts of typographic speech, and they are a sign that dollars are not really twice as important as ideas, and numbers are not afraid to consort on an equal footing with words. <span class='bracket'>[</span>...<span class='bracket'>]</span> However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.&#8221;</p>
</blockquote>
<p>Many core web fonts <span class='bracket'>(</span>indeed most digital fonts<span class='bracket'>)</span> ship with only one case of figures: Arial, Comic Sans, Helvetica, Tahoma, Times, Times New Roman, Trebuchet and Verdana all ship with titling figures only. Georgia is the sole holder of text figures <span class='bracket'>(</span>but lacks titling&nbsp;figures<span class='bracket'>)</span>.</p>
<p>Microsoft&#8217;s new &#8216;C&#8217; fonts however, are very strong with respect to their numerals. All six typefaces <span class='bracket'>(</span>including the fixed-width Consolas<span class='bracket'>)</span> have both titling and text figures included in the base fonts. Further, three of the fonts default to titling figures <span class='bracket'>(</span>Calibri, Cambria, and Consolas<span class='bracket'>)</span>, the other three to text figures <span class='bracket'>(</span>Candara, Constantia, and Corbel<span class='bracket'>)</span>. Constantia and Corbel even include small variants of their lining figures for use with text set in small&nbsp;capitals.</p>
<p>Despite the bright hope for the future brought by Microsoft&#8217;s &#8216;C&#8217; fonts, <abbr title="Cascading Style Sheets">CSS</abbr> currently makes no provision for the control of numeral case, this means the default figures will always be used, regardless of&nbsp;context.</p>
<h2>The&nbsp;Future</h2>
<p>The <a href="/web/20140207235105/http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr>&nbsp;fonts module</a> is still a working draft, but is being actively revised. The current <a href="/web/20140207235105/http://dev.w3.org/csswg/css3-fonts/">editor&#8217;s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code>&nbsp;property.</p>
<p>For example, one could specify old-style figures using the <code>oldstyle-nums</code> value as&nbsp;follows:</p>
<pre><code>p {
font-variant-numeric: oldstyle-nums }</code></pre>
<p>To specify titling figures, one would use a value of <code>lining-nums</code>.</p>

253
js/global.js
View File

@@ -1,252 +1 @@
// highlight targeted id
function highlight() {
loc = window.location;
loc = loc + "";
tstart = loc.indexOf("#");
if (tstart > -1) {
targetId = loc.substring(tstart+1, loc.length);
targetObj = document.getElementById(targetId);
if (targetObj) {
targetObj.className = "highlight";
}
}
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function testCookies() {
createCookie("test","ok",1);
if (readCookie("test")) {
return true;
} else {
return false;
}
}
function getInnerHeight() {
var y;
if (self.innerHeight) // all except Explorer
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
y = document.body.clientHeight;
}
return y;
}
function getInnerWidth() {
var x;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
}
return x;
}
function getVertScroll() {
var y;
if (self.pageYOffset) // all except Explorer
{
y = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
y = document.body.scrollTop;
}
return y;
}
function getHorizScroll() {
var x;
if (self.pageYOffset) // all except Explorer
{
x = self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
x = document.documentElement.scrollLeft;
}
else if (document.body) // all other Explorers
{
x = document.body.scrollLeft;
}
return x;
}
window.onload = function() {
highlight();
initLinks();
}
// Intercept Amazon links to set preferred store
// URL components for the different affiliate schemes
var amz_schemes = new Array("uk", "ca", "com");
var amz_affil = new Array();
amz_affil["uk"] = new Array(".co.uk", "jalfrezi-21", "UK and the rest of Europe");
amz_affil["ca"] = new Array(".ca", "clagnut0d-20", "Canada");
amz_affil["com"] = new Array(".com", "clagnut-20", "US and the rest of the world");
function initLinks() {
// Test for cookies
if (testCookies()) { // if cookies are enabled
// Get existing store setting
var amz_dest = readCookie("amz_dest");
var allLinks = document.getElementsByTagName('a');
for (var i=0; i < allLinks.length; i++) { // loop through all links on page
var aLink = allLinks[i];
var url = aLink.href;
var amzMatch = url.search(/amazon\./);
if (amzMatch > -1) { // crude check for link to Amazon
if (amz_dest) {
// If store is set then rebuild link
var country = amz_affil[amz_dest][0];
var affil = amz_affil[amz_dest][1];
// Change all possible urls to the desired country and affil
for (var j=0; j<amz_schemes.length; j++) {
c2 = amz_affil[amz_schemes[j]][0];
a2 = amz_affil[amz_schemes[j]][1];
url = url.replace(c2,country);
url = url.replace(a2,affil);
}
aLink.href = url
} else { // store is not set
aLink.onclick = function(e) {
return interceptAmzLinks(this);
}
}
}
}
}
}
function interceptAmzLinks(theLink) {
// create new div
var div = document.createElement("div");
// create new img
var amzimg = document.createElement("img");
amzimg.src = "/i/amz.gif";
amzimg.setAttribute("alt","Amazon");
// create new p
var para1 = document.createElement("p");
para1.appendChild(amzimg);
var para1txt = document.createTextNode("You are about to follow a link to Amazon. Which store would you prefer to visit?");
para1.appendChild(para1txt);
para1.className = "first";
div.appendChild(para1);
// create new ul
var ul = document.createElement("ul");
// build list of links
var i, scheme, country, afil, desc, key, func, url, li, litxt, a, atxt;
for (i=0; i < amz_schemes.length; i++) {
scheme = amz_schemes[i];
country = amz_affil[scheme][0];
affil = amz_affil[scheme][1];
desc = amz_affil[scheme][2];
li = document.createElement("li");
a = document.createElement("a");
a.setAttribute("title","Go to product page on Amazon"+country);
a.setAttribute("onclick","setAmzDest('"+scheme+"')");
url = theLink.href;
url = url.replace(/\.co\.uk/,country);
url = url.replace(/jalfrezi-21/,affil);
a.href = url;
atxt = document.createTextNode("Amazon" + country);
a.appendChild(atxt);
li.appendChild(a);
litxt = document.createTextNode(" - " + desc);
li.appendChild(litxt);
ul.appendChild(li);
}
div.appendChild(ul);
// style box
div.className = "amzbox";
// position box
viewportHeight=getInnerHeight();
viewportWidth=getInnerWidth();
downScroll = getVertScroll();
rightScroll = getHorizScroll();
topPos = ((viewportHeight - 200) / 2) + downScroll;
leftPos = ((viewportWidth - 500) / 2) + rightScroll;
div.style.left = leftPos+"px";
div.style.top = topPos+"px";
// create new p
var para2 = document.createElement("p");
var para2txt = document.createTextNode("You will only be bothered with this once.");
para2.appendChild(para2txt);
div.appendChild(para2);
// attach div to body
document.body.appendChild(div);
return false;
}
function setAmzDest(amz_dest) {
createCookie("amz_dest",amz_dest,"365");
initLinks();
return true;
}
function changeLink(theLink) {
}
/* No JS required any more */

6
toc.php
View File

@@ -1,4 +1,8 @@
<?php
// Turn on PHP Error Reporting
#ini_set("display_errors","2");
#ERROR_REPORTING(E_ALL);
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
$data = require_once($dr . "data.inc.php");
@@ -38,7 +42,7 @@ foreach($chapters as $chapter_num => $chapter) {
$item_ar = explode("." , $item_num);
$item_section = $item_ar[0] . "." . $item_ar[1];
if($item_section == $section_num) {
echo "<li id='$item_num'><span>$item_num </span><a href='/$item_num'>".htmlentities($item)."</a></li>\n";
echo "<li id='$item_num'><span>$item_num </span><a href='/$item_num'>".preventOrphans($item)."</a></li>\n";
}
}
echo "</ol>\n</li>\n";