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

getting an item page to work

Browse Source
This commit is contained in:
Richard Rutter
2014-02-26 21:57:54 +00:00
parent fb4f6825bc
commit b3ca56c75a
5 changed files with 102 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
css/screen.css
View File

@@ -8,6 +8,11 @@ BODY {
background: #FFF8E5;
font-size: 100%;
text-rendering: optimizeLegibility;
-moz-font-feature-settings:"onum" 1;
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;
font-feature-settings:"onum" 1;
}
HTML>BODY, HTML>BODY#cover {
@@ -16,7 +21,11 @@ HTML>BODY, HTML>BODY#cover {
ABBR, ACRONYM, .caps {
text-transform: lowercase;
font-variant:small-caps;
-moz-font-feature-settings:"smcp" 1;
-ms-font-feature-settings:"smcp" 1;
-o-font-feature-settings:"smcp" 1;
-webkit-font-feature-settings:"smcp" 1;
font-feature-settings:"smcp" 1;
font-style: normal;
border-bottom: 0;
letter-spacing:0.1em;
@@ -24,11 +33,11 @@ ABBR, ACRONYM, .caps {
cite, CITE ABBR, CITE ACRONYM, CITE .caps, em {
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
}
strong {
font-family: 'premiera bold', georgia, serif;
font-family: 'Antwerp Bold', georgia, serif;
font-weight: bold;
}
@@ -65,12 +74,7 @@ H1 SPAN, #supp SPAN, #toc LI SPAN, .quote-from-book .ic, .thumb {
H1 SPAN, #toc LI SPAN, .thumb {
left: -0.75em;
width:7.29%;
font-family: 'Premiera Book', georgia, serif;
-moz-font-feature-settings:"onum" 1;
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;
font-feature-settings:"onum" 1;
font-family: 'Antwerp Regular', georgia, serif;
}
h1 span {
@@ -89,16 +93,18 @@ h1 span {
/* @group typography */
#main, #supp, #footer, #cover, .amzbox {
font: 1.0em/1.375em 'Premiera Book', georgia, serif;
font-size: 1em;
line-height: 1.375em;
font-family: 'Antwerp Regular', georgia, serif;
}
h1, h2, h3, #header, #big-title #ts {
font-family: 'Premiera Book', Georgia, serif;}
font-family: 'Antwerp Regular', Georgia, serif;}
h1#big-title span {
font-style: italic;
font-family: 'premiera Italic', Georgia, serif;
font-family: 'Antwerp Italic', Georgia, serif;
}
a, a:visited, a:link, a:active, a:hover {
@@ -174,7 +180,7 @@ BLOCKQUOTE {
margin-left: 0;
margin-right: 0;
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
}
.quote-from-book {
@@ -218,7 +224,7 @@ p.imgholder {
Q {
font-style:italic;
quotes: '\2018' '\2019' '\201C' '\201D';
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
}
Q:before {
@@ -252,7 +258,7 @@ PRE {
BLOCKQUOTE EM {
font-style: normal;
font-family: 'Premiera Book', georgia, serif;
font-family: 'Antwerp Regular', georgia, serif;
}
UL UL, OL OL {
@@ -311,7 +317,7 @@ OL#annotations {
#header a span {
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
}
span.of {
@@ -402,11 +408,15 @@ FORM DD {
margin: 0 0 1em 0;
}
INPUT, TEXTAREA {
font: 1.0em/1.375em georgia, "times new roman", serif;
font-size: 1em;
line-height: 1.375em;
font-family: inherit;
}
INPUT.textbox, TEXTAREA {
border: 1px solid #999;
font: 1.0em/1.375em georgia, "times new roman", serif;
font-size: 1em;
line-height: 1.375em;
font-family: inherit;
width:100%;
}
INPUT.button {
@@ -473,7 +483,7 @@ div.ex2-1-9 {
.ex2-1-10-toc1 td {
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
text-align: right;
padding: 0 0 0 0.5em;
}
@@ -495,7 +505,7 @@ div.ex2-1-9 {
.ex2-1-10-toc2 td {
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
text-align: left;
padding:0;
}
@@ -587,7 +597,7 @@ div.ex2-1-9 {
.amzbox P {
padding: 1.5em 38px 38px 51px;
font-style: italic;
font-family: 'premiera italic', georgia, serif;
font-family: 'Antwerp Italic', georgia, serif;
background: url(/i/amz-drop.png) bottom no-repeat;
}

BIN
i/fontdeck.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

218
item.php
View File

@@ -1,225 +1,69 @@
<?php
$dr = $_SERVER["DOCUMENT_ROOT"];
$dr2 = preg_replace("/\/[^\/]+$/","/includes_webtype",$dr);
include($dr2 . "/db_connect.php");
// Turn on PHP Error Reporting
ini_set("display_errors","2");
ERROR_REPORTING(E_ALL);
// format text function
include($dr . "/includes/format.php");
$dr = str_replace($_SERVER['SCRIPT_NAME'], '/includes/', $_SERVER['SCRIPT_FILENAME']);
$dr2 = str_replace("/includes/", "", $dr);
$data = require_once($dr . "data.inc.php");
$chapters = $data['chapters'];
$sections = $data['sections'];
$items = $data['items'];
// get variables from query
$item_number = $_REQUEST["item"];
$item_num = isset($_REQUEST["item_num"])?$_REQUEST["item_num"]:false;
// if there is a valid looking ID present
if (preg_match("/[0-9]+/", $item_number)) {
$number = $item_number;
} else {
if (!array_key_exists ($item_num, $items)) {
die("Bad or missing id.");
}
// get item
$sql = "SELECT item_id, title, quote, item, chapters.chapter AS chapter, sections.section AS section, sections.number AS section_number, chapters.number AS chapter_number FROM items, chapters,chapters AS sections WHERE items.number='$number' AND sections.chapter_id = items.chapter_id AND chapters.chapter_id = sections.chapter";
#echo "<textarea>$sql</textarea>";
$result = mysql_query($sql);
if ($myitem = mysql_fetch_array($result)) {;
$item_id = $myitem["item_id"];
$title = $myitem["title"];
$quote = trim($myitem["quote"]);
$item = $myitem["item"];
$chapter_number = $myitem["chapter_number"];
$section_number = $myitem["section_number"];
$chapter = $myitem["chapter"];
$section = $myitem["section"];
$chapter_dir = str_replace(" ", "_", $chapter);
$section_dir = str_replace(" ", "_", $section);
// format item
$title = trim(strip_tags(format($title)));
//$title = preg_replace("/\s(\S+)$/", "&nbsp;$1", $title);
if ($quote != "") {
$quote = "<span class='ic'>&#8220;</span>" . $quote . "&#8221;";
$quote = format($quote);
}
$item = format($item);
$chapter = strip_tags(format($chapter));
$section = strip_tags(format($section));
$chapter = str_replace(" and", " &amp;", $chapter);
$chapter = str_replace("_ ", ", ", $chapter);
$section = str_replace(" and", " &amp;", $section);
$section = str_replace("_ ", ", ", $section);
// get next/prev item
$nexttitle = false;
$prevtitle = false;
$sql = "SELECT item_id, title, items.number, sections.section AS section_name, chapters.chapter AS chapter_name, RIGHT(items.number, 2) AS itemnum, sections.number AS chapternum FROM items, chapters, chapters AS sections WHERE items.live='true' AND sections.chapter_id = items.chapter_id AND chapters.chapter_id = sections.chapter ORDER BY chapternum, itemnum";
#echo "<textarea>$sql</textarea>";
$result = mysql_query($sql);
if ($myitems = mysql_fetch_array($result)) {
do {
$myitem_id = $myitems["item_id"];
$mytitle = $myitems["title"];
$mynumber = $myitems["number"];
$mychapter = $myitems["chapter_name"];
$mysection = $myitems["section_name"];
$allitems_id[] = $myitem_id;
$allitems_number[] = $mynumber;
$allitems_title[] = $mytitle;
$allitems_chapter[] = $mychapter;
$allitems_section[] = $mysection;
} while ($myitems = mysql_fetch_array($result));
// loop through array of items
for($i = 0; $i < count($allitems_id); $i++) {
if($allitems_id[$i] == $item_id) {
$nexttitle = (isset($allitems_title[$i+1]))?$allitems_title[$i+1]:"";
$prevtitle = $allitems_title[$i-1];
$nextnumber = (isset($allitems_number[$i+1]))?$allitems_number[$i+1]:"";
$prevnumber = $allitems_number[$i-1];
$nextchapter = (isset($allitems_chapter[$i+1]))?$allitems_chapter[$i+1]:"";
$nextchapter = str_replace(" ", "_", $nextchapter);
$prevchapter = (isset($allitems_chapter[$i-1]))?$allitems_chapter[$i-1]:"";
$prevchapter = str_replace(" ", "_", $prevchapter);
$nextsection = (isset($allitems_section[$i+1]))?$allitems_section[$i+1]:"";
$nextsection = str_replace(" ", "_", $nextsection);
$prevsection = (isset($allitems_section[$i-1]))?$allitems_section[$i-1]:"";
$prevsection = str_replace(" ", "_", $prevsection);
break;
}
}
# format next/prev titles
$nexttitle = trim(strip_tags(format($nexttitle)));
$prevtitle = trim(strip_tags(format($prevtitle)));
} else {
$error .= "badNextPrev";
$mySQLsaid = mysql_error();
}
# get annotations
/*
$sql = "SELECT annotation_id, name, url, annotation, UNIX_TIMESTAMP(annotationstamp) AS annotationstamp FROM annotations WHERE item_id = '$item_id' ORDER BY annotationstamp";
$annotationresult = mysql_query($sql);
*/
} else {
$error = "badItemNumber";
$mySQLsaid = mysql_error();
$item_ar = explode("." , $item_num);
$item_chapter = $item_ar[0];
$item_section = $item_ar[0] . "." . $item_ar[1];
$title = htmlentities($items[$item_num]);
}
?>
<!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">
<head>
<title><?php echo $title?> | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "/includes/headlinks.inc") ?>
<!DOCTYPE html>
<html lang="en-gb">
<title><?php echo $title ?> | The Elements of Typographic Style Applied to the Web</title>
<?php include($dr . "headlinks.inc.php") ?>
</head>
<body>
<?php include($dr . "/includes/header.inc") ?>
<?php
if (!isset($error) || $error != "badItemNumber") { # good guideline number
?>
<?php include($dr . "header.inc.php") ?>
<div id="main">
<h1><span><?php echo $number?> </span><?php echo $title?></h1>
<h1><span><?php echo $item_num ?> </span><?php echo $title?></h1>
<?php
if ($quote != "") {
echo "<blockquote class='quote-from-book'>" . $quote . "</blockquote>";
}
?>
<?php echo $item?>
<?php include($dr2 . "/items/$item_num" . ".html") ?>
</div> <!-- /main -->
<div id="supp">
<h2><a href="/toc#<?php echo $chapter_dir?>" title="View chapter contents"><?php echo $chapter?></a></h2>
<h3><span>&#167; </span><a href="/toc#<?php echo $section_dir?>" title="View section contents"><?php echo $section?></a></h3>
<h2><a href="/toc#<?php echo $item_chapter?>" title="View chapter contents"><?php echo $chapters[$item_chapter] ?></a></h2>
<h3><span>&#167; </span><a href="/toc#<?php echo $item_section?>" title="View section contents"><?php echo $sections[$item_section] ?></a></h3>
<?php
if (!isset($error) || $error != "badNextPrev") { # good guideline number
?>
<ul id="nextprev">
<?php
if ($nexttitle) {
echo "<li><span>&#8594;</span><a href='/$nextchapter/$nextsection/$nextnumber/' title='Read next guideline'>$nexttitle</a></li>";
echo "<li><span>&#8594;</span><a href='/$nextnumber/' title='Read next guideline'>$nexttitle</a></li>";
}
if ($prevtitle) {
echo "<li><span>&#8592;</span><a href='/$prevchapter/$prevsection/$prevnumber/' title='Read previous guideline'>$prevtitle</a></li>";
echo "<li><span>&#8592;</span><a href='/$prevnumber/' title='Read previous guideline'>$prevtitle</a></li>";
}
?>
</ul>
<?php
}
include($dr . "references.inc.php");
include($dr . "fontdeck.inc.php");
?>
<!-- /annotations
<div id="annotations">
<h3>Annotations</h3>
<?php /*
// pull annotations from database
$sql = "SELECT annotation_id,author,web,annotation,UNIX_TIMESTAMP(annotationstamp) AS annotationstamp FROM annotations WHERE item_id = $item_id ORDER BY annotationstamp DESC";
$result = mysql_query($sql);
if($myannotation = mysql_fetch_array($result)) {
echo "<ol id='annotations'>\n";
do {
// get and format annotation
$annotationdate = date('j M Y, H:i', $myannotation["annotationstamp"]);
#get annotation
$theannotation_id = $myannotation["annotation_id"];
$theannotation = $myannotation["annotation"];
# turn all HTML to entities
$theannotation = htmlentities($theannotation);
# strip PHP and HTML tags to be sure
$theannotation = strip_tags($theannotation);
# put quotes back so textile works
$theannotation = str_replace("&quot;", "\"", $theannotation);
# turn non-Textile URLs into HTML links
$theannotation = preg_replace("/(\s)((http(s?):\/\/)|(www\.))(\S+)/i", "$1<a href=\"http$4://$5$6\">$3$5$6</a>", $theannotation);
# Textilise annotation
$theannotation = textile($theannotation);
# strip tags again
$theannotation = strip_tags($theannotation);
# split annotation into sentences
$sentences = preg_split("/\./", $theannotation);
# get first 2 sentences
$theannotation = $sentences[0] . ".";
if ($sentences[1]) {$theannotation .= $sentences[1] . ".";}
# add ellipsis if required
if (count($sentences)>2) {$theannotation .= "&#8230;";}
echo "<li>";
printf("<a href='/$chapter_dir/$section_dir/$number/comments/#%s' title='View this comment.'>%s</a>\n", $theannotation_id, $theannotation);
echo "</li>";
} while ($myannotation = mysql_fetch_array($result));
echo "</ol>\n";
} else {
echo "\n<ol id='annotations'><li><a href='/$chapter_dir/$section_dir/$number/comments/'>Add the first annotation</a></li></ol>\n";
}*/
?>
</div> -->
<?php include($dr . "/includes/references.inc");
include($dr . "/includes/fontdeck.inc.php"); ?>
</div> <!-- /supp -->
<?php
} else { # bad guildeine number
?>
<div id="main">
<h1>There is no entry for the specified guideline number</h1>
</div>
<div id="supp">
<?php include($dr . "/includes/references.inc") ?>
</div>
<?php
}
?>
<?php include($dr . "/includes/footer.inc") ?>
<?php include($dr . "footer.inc.php") ?>
</body>
</html>

40
items/2.1.1.html Normal file
View File

@@ -0,0 +1,40 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</span>If text is set ragged right, the <em>word space</em> <span class='bracket'>(</span>the space between words<span class='bracket'>)</span> can be fixed and unchanging. If the text is <em>justified</em> <span class='bracket'>(</span>set flush left and right<span class='bracket'>)</span>, the word space must be elastic. In either case the size of the ideal word space varies from one circumstance to another, depending on factors such as letterfit, type color, and size. A loosely fitted or bold face will need a larger interval between the words. At larger sizes, when letterfit is tightened, the spacing of words can be tightened as well.&#8221;</p>
</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 {
word-spacing:0.25em }
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>
<p>While in theory you could specify <code>word-spacing</code> in pixels or any other allowable unit of length, it is important to specify <code>word-spacing</code> in ems as that is the only way to guarantee the word space changes proportionately to the text size <span class='bracket'>(</span>when readers change their default text size, for&nbsp;example<span class='bracket'>)</span>.</p>
<h2>An explanation of&nbsp;ems</h2>
<p>Ems are so-called because they are thought to approximate the size of an uppercase letter M <span class='bracket'>(</span>and so are pronounced <q>emm</q><span class='bracket'>)</span>, although 1&nbsp;em is actually significantly larger than this. Bringhurst describes the em&nbsp;thus:</p>
<blockquote><p><span class='bracket'>[</span>t<span class='bracket'>]</span>he em is a sliding measure. One em is a distance equal to the type size. In 6&nbsp;point type, an em is 6&nbsp;points; in 12&nbsp;point type an em is 12&nbsp;points and in 60&nbsp;point type an em is 60&nbsp;points. Thus a one em space is proportionately the same in any&nbsp;size.</p></blockquote>
<p>To illustrate this principle in terms of <abbr title="Cascading Style Sheets">CSS</abbr>, consider these&nbsp;styles:</p>
<pre><code>#box1 {
font-size:12px;
width:1em;
height:1em;
border:1px solid black }
#box2 {
font-size:60px;
width:1em;
height:1em;
border:1px solid black }</code></pre>
<p>These styles will render like: </p>
<div id="box1">M</div>
<div id="box2">M</div>
<p>Note that both boxes have a height and width of 1&nbsp;em but because they have different font sizes, one box is bigger than the other. Box 1&nbsp;has a <code>font-size</code> of 12&nbsp;px so its width and height is also 12&nbsp;px; similarly the text of box 2&nbsp;is set to 60&nbsp;px and so its width and height are also&nbsp;60&nbsp;px.</p>

4
toc.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']);
$data = require_once($dr . "data.inc.php");