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 excuse.
-Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.
Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.
In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
+In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
-At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time.
+At the time of writing, this is a work in progress. I am adding to the site in the order presented in Bringhurst’s book, one principle at a time.
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: Give full typographical attention even to incidental details.
Now start with Rhythm & Proportion or dip into the Table of Contents and enjoy pushing a few boundaries to create websites of real typographical worth.
-— Richard Rutter, Brighton, December 2005.
+— Richard Rutter, Brighton, December 2005.
Postscript
In February 2014, I opened up the source code to this website on GitHub, with an invitation 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.
diff --git a/items/2.1.1.html b/items/2.1.1.html index 40d718b..ab59806 100644 --- a/items/2.1.1.html +++ b/items/2.1.1.html @@ -1,4 +1,4 @@ -“If text is set ragged right, the word space (the space between words) can be fixed and unchanging. If the text is justified (set flush left and right), 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.”
+“If text is set ragged right, the word space (the space between words) can be fixed and unchanging. If the text is justified (set flush left and right), 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.”
In CSS, word space is set with the
diff --git a/items/2.1.10.html b/items/2.1.10.html index bc74fc2..f03b07e 100644 --- a/items/2.1.10.html +++ b/items/2.1.10.html @@ -1,13 +1,13 @@ -word-spacingproperty which has a default value ofnormal. The default word space is equivalent to approximately 0.25 em, although the exact value will depend on information encoded within the digital font file. To change the word spacing, you should specify a length in ems. This length is added to the existing word space; that is to sayword-spacingdoes not set the actual space between words, it sets an increment to the existing spacing. For example:“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.”
+“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.”
The dot leader 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 CSS so it is rarely seen in web pages. Bringhurst goes on to present two alternative layouts for tables of contents which are replicated here:
-Example 1 – Table of contents aligned right
+Example 1 – Table of contents aligned right
Introduction 7 - Chapter 1 The Sex of Centaurs 11 + Chapter 2 Poliphilo’s Dream 11 Chapter 2 Poliphilo’s Dream 11 This is a table of contents so it has been marked up as a simple table:
@@ -38,7 +38,7 @@ td {While most of the CSS is straight forward, a point worth highlighting is the
-margindeclaration for thetableitself. There is a right margin of 3 em to set the table in slightly from the right gutter and a left margin ofautoto push the table over towards the right hand side of the page.Example 2 – Centred table of contents
+Example 2 – Centred table of contents
diff --git a/items/2.1.2.html b/items/2.1.2.html index e6a4352..fdc0995 100644 --- a/items/2.1.2.html +++ b/items/2.1.2.html @@ -1,6 +1,6 @@ - Prologue page 5 “Anything from 45 to 75 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 (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
+-“Anything from 45 to 75 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 (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
The measure is the number of characters in a single line of a column of text. HTML doesn’t have a concept of columns per se, instead text is held within boxes. In CSS the width of a box is set using the
+widthproperty with any unit of length, for example:The measure is the number of characters in a single line of a column of text. HTML doesn’t have a concept of columns per se, instead text is held within boxes. In CSS the width of a box is set using the
widthproperty with any unit of length, for example:-DIV#col1 { width:400px } @@ -11,7 +11,7 @@ DIV#col2 { DIV#col3 { width:33em }When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, he can do.
+When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In particular, if your reader wishes to change the text size or the dimensions of the ‘page’, he can do.
In the preceding example, column 1 has a fixed width: it has been set to 400 px wide. With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. Thus when the text size is changed, so the measure changes.
@@ -19,6 +19,6 @@ DIV#col3 {Column 3 has an elastic width: it has been set to 33 em wide. On average one character takes up 0.5 em so this box will have a measure of 66 characters per line. If your reader increases the text size, the width of box will increase accordingly and so the measure remains at 66 regardless of the text size.
-From a typographical perspective, the most appropriate method is to set box width in ems (elastic layout) as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage (liquid layout) 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 control.
+From a typographical perspective, the most appropriate method is to set box width in ems (elastic layout) as it ensures the measure is always set to the typographer’s specification. Setting box width as a percentage (liquid layout) 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 control.
Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as a medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged & embraced, and built into website designs from the ground up.
\ No newline at end of file diff --git a/items/2.1.3.html b/items/2.1.3.html index 6190b71..168450e 100644 --- a/items/2.1.3.html +++ b/items/2.1.3.html @@ -1,9 +1,9 @@ -“In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.
+“In justified text, there is always a trade-off between evenness of word spacing and frequency of hyphenation.
-Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.
+Narrow measures – which prevent good justification – are commonly used when the text is set in multiple columns. Setting ragged right under these conditions will lighten the page and decrease its stiffness.
-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.”
+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.”
Setting text justified or ragged is accomplished in CSS through the
@@ -18,7 +18,7 @@ P {text-alignproperty, as follows:Effective justification of text can only be achieved if long words are hyphenated. HTML and CSS 2 do not have any provision for automatic hyphenation and current Web browsers support, even for manual hyphenation, is poor.
-So don’t justify text on the web.
+So don’t justify text on the web.
Future considerations
diff --git a/items/2.1.4.html b/items/2.1.4.html index a1cdab7..3286362 100644 --- a/items/2.1.4.html +++ b/items/2.1.4.html @@ -1,8 +1,8 @@ -“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 [full stop]. 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.”
+“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 [full stop]. 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.”
All white space in HTML, 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 typist.
-If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many space characters available in Unicode. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space,
+ , as this has a meaning in and of itself.If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many space characters available in Unicode. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space,
, as this has a meaning in and of itself.
- diff --git a/items/2.1.5.html b/items/2.1.5.html index e3d59e3..c41a347 100644 --- a/items/2.1.5.html +++ b/items/2.1.5.html @@ -1,6 +1,6 @@ -
 en space“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 [full stops]. A normal word space follows the last period in the string.”
+-“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 [full stops]. A normal word space follows the last period in the string.”
Hair spaces and thin spaces are two of the many space characters available in Unicode. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Here’s how to use hair spaces and thin spaces, respectively:
+Hair spaces and thin spaces are two of the many space characters available in Unicode. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Here’s how to use hair spaces and thin spaces, respectively:
diff --git a/items/2.1.6.html b/items/2.1.6.html index b00503b..8aa38f3 100644 --- a/items/2.1.6.html +++ b/items/2.1.6.html @@ -1,6 +1,6 @@ -W. B. Yeats J. C. L. Prillwitz“Acronyms such as CIA and PLO are frequent in some texts. So are abbreviations such as CE and BCE or AD and BC. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.
+“Acronyms such as CIA and PLO are frequent in some texts. So are abbreviations such as CE and BCE or AD and BC. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.
-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.”
+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.”
Letter spacing in CSS is achieved with the aptly named
@@ -8,7 +8,7 @@letter-spacingproperty. To letter space abbreviations at 10% of the type size you could wrap the abbreviations in<abbr>tags and apply a CSS rule such as:If you have created static pages for your website then inserting
-<acronym>and<abbr>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 CMS developer would probably turn to regular expressions.I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a PHP function here is an expression to get you started:
+I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a PHP function here is an expression to get you started:
$search = '/\b([A-Z][A-Z0-9]{2,})\b/'; $replace = '<abbr>$1</abbr>'; diff --git a/items/2.1.7.html b/items/2.1.7.html index c3ca8cb..ece0e4c 100644 --- a/items/2.1.7.html +++ b/items/2.1.7.html @@ -1,5 +1,5 @@ -“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’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed more legible rather than less.”
+“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’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed more legible rather than less.”
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 transforming.
diff --git a/items/2.1.8.html b/items/2.1.8.html index 2ce7e6e..2ef6963 100644 --- a/items/2.1.8.html +++ b/items/2.1.8.html @@ -1,4 +1,4 @@ -“Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations Wa and To are kerned.”
+“Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations Wa and To are kerned.”
At present there is no mechanism within HTML or CSS 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 involved.
@@ -17,7 +17,7 @@ and <span class="kern">T</span>orontoNotice that the
-spanwas applied around the first letter of the pair, not around both letters. This is because theletter-spacingproperty adds or removes space after each letter. Notice also that theletter-spacingis specified inemsto ensure that the amount of kerning is applied in proportion to the text size.As with letterspacing strings of capitals, adding a
+spanevery time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This PHP function uses a regular expression to replace insert aspaninto any string of ‘To’ or ‘Wa’:As with letterspacing strings of capitals, adding a
spanevery time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This PHP function uses a regular expression to replace insert aspaninto any string of ‘To’ or ‘Wa’:$search = '/(T)(o)|(W)(a)/'; $replace = '<span class="kern">$1$3</span>$2$4'; diff --git a/items/2.1.9.html b/items/2.1.9.html index a46abef..916e6f3 100644 --- a/items/2.1.9.html +++ b/items/2.1.9.html @@ -1,5 +1,5 @@ -“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.”
+“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.”
CSS does not offer many opportunities for altering the width or shapes of letters. In fact only the
diff --git a/items/2.2.1.html b/items/2.2.1.html index c369919..7bff3ff 100644 --- a/items/2.2.1.html +++ b/items/2.2.1.html @@ -1,7 +1,7 @@ -letter-spacingproperty can be applied at all for this purpose, and that simply changes the width of the letters (but not their shape). Theletter-spacingproperty can however be particularly destructive. Consider this maltreatment of a heading:“Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”
+-“Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.”
Leading (pronounced “ledding”) 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 CSS through the
+line-heightproperty. For example 12 point text can be given 3 points of lead in the following manner:Leading (pronounced “ledding”) 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 CSS through the
line-heightproperty. For example 12 point text can be given 3 points of lead in the following manner:p { font-size: 12pt; diff --git a/items/2.2.2.html b/items/2.2.2.html index af3394c..daa04de 100644 --- a/items/2.2.2.html +++ b/items/2.2.2.html @@ -1,4 +1,4 @@ -“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.”
+“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.”
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 px with a
@@ -37,13 +37,13 @@line-heightof 1.5 em, making each line 18 px in height. In order to keep the rhythm of the text, the vertical spacing between blocks should also be 18 px. This is achieved by setting top- and bottom-margins equal to the line height.Sidenotes (and footnotes for that matter) 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 example:
-+Daniel is roused by a rooster on the forecastle* deck that is growing certain it’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.
The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.
Daniel is roused by a rooster on the forecastle* deck that is growing certain it’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.
The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.
The main body text again has a text size of 12 px and a line height of 18 px. The sidenotes are set at 10 px and so their line-height must be increased to 18 ÷ 10 = 1.8.
Images
-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 px tall – precisely 10 lines in height.
+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 px tall – precisely 10 lines in height.
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
diff --git a/items/2.3.1.html b/items/2.3.1.html index b2a2095..3830752 100644 --- a/items/2.3.1.html +++ b/items/2.3.1.html @@ -1,4 +1,4 @@ -heightof 180 ÷ 12 = 15 em (12 px being the text size).“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.”
+“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.”
Paragraphs, and other block level elements, are indented using the
diff --git a/items/2.3.2.html b/items/2.3.2.html index 18659d0..8c1637a 100644 --- a/items/2.3.2.html +++ b/items/2.3.2.html @@ -1,4 +1,4 @@ -text-indentproperty. To ensure a paragraph is set flush left, the text-indent should be set to zero:“Ornaments […] drop lines […] outdented paragraphs […] and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.”
+“Ornaments […] drop lines […] outdented paragraphs […] and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.”
Indenting the first line of a paragraph, or any block element is achieved in CSS using the text-indent property:
@@ -26,7 +26,7 @@ p + p {Block Paragraphs
-As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in §2.2.2 the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.
+As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in §2.2.2 the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.
Outdenting
diff --git a/items/2.3.3.html b/items/2.3.3.html index 7702583..3cb8858 100644 --- a/items/2.3.3.html +++ b/items/2.3.3.html @@ -1,5 +1,5 @@ -“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.”
+“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.”
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 margins.
diff --git a/items/2.3.4.html b/items/2.3.4.html index 38dddec..cfa9aef 100644 --- a/items/2.3.4.html +++ b/items/2.3.4.html @@ -1,6 +1,6 @@ -“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.”
+-“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.”
When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure (as this is considered, in many poetic works, to be at least as important as the words themselves). As such, a
+pre(pre-formatted) element is most apt to setting verse.When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure (as this is considered, in many poetic works, to be at least as important as the words themselves). As such, a
pre(pre-formatted) element is most apt to setting verse.<blockquote class="verse"> <pre>God guard me from those thoughts men think @@ -14,7 +14,7 @@ Thinks in a marrow bone.</pre>-.verse pre { font-family: inherit; }A logical way to center the verse on the longest line would be to simply specify
+width:autoandmargin:0 auto. Unfortunately, due to browsers’ 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 thepreelement to display as atableas follows:A logical way to center the verse on the longest line would be to simply specify
width:autoandmargin:0 auto. Unfortunately, due to browsers’ 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 thepreelement to display as atableas follows:-.verse pre { font-family: inherit; @@ -55,7 +55,7 @@ Thinks in a marrow bone.</span></pre> <link rel="stylesheet" type="text/css" href="ie-lte-7.css" /> <![endif]->Here’s the final rendered example of prose, set flush left & ragged right, and centered on the longest line:
+Here’s the final rendered example of prose, set flush left & ragged right, and centered on the longest line:
God guard me from those thoughts men think In the mind alone; diff --git a/items/2.4.1.html b/items/2.4.1.html index 99af6be..9032452 100644 --- a/items/2.4.1.html +++ b/items/2.4.1.html @@ -1,5 +1,5 @@ -“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.”
+“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.”
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 manually.
@@ -20,7 +20,7 @@-p { hyphenate: auto; }At the time of writing, the latest Working Draft of March 2007, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’s likely that advanced hyphenation controls will be introduced. The CSS 3 Paged Media module has more details of the hyphenation properties originally proposed, among these are the
+hyphenate-beforeandhyphenate-afterproperties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:At the time of writing, the latest Working Draft of March 2007, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’s likely that advanced hyphenation controls will be introduced. The CSS 3 Paged Media module has more details of the hyphenation properties originally proposed, among these are the
hyphenate-beforeandhyphenate-afterproperties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:p { hyphenate-before:2; diff --git a/items/2.4.5.html b/items/2.4.5.html index 4a24270..c829b9b 100644 --- a/items/2.4.5.html +++ b/items/2.4.5.html @@ -1,4 +1,4 @@ -“In English one hyphenates cab-ri-o-let but in French ca-brio-let. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.”
+“In English one hyphenates cab-ri-o-let but in French ca-brio-let. The conventions of the individual language should, ideally, be followed even for single foreign words or brief quotations.”
This guideline can be achieved on the Web when hyphenating manually. See §2.4.1 for more information on manual hyphenation.
diff --git a/items/2.4.6.html b/items/2.4.6.html index 7b39bff..7800704 100644 --- a/items/2.4.6.html +++ b/items/2.4.6.html @@ -1,4 +1,4 @@ -“Hard spaces are useful for preventing line-breaks within phrases such as 6.2 mm, 3 in., 4 × 4, or in phrases like page 3 and chapter 5.”
+“Hard spaces are useful for preventing line-breaks within phrases such as 6.2 mm, 3 in., 4 × 4, or in phrases like page 3 and chapter 5.”
In HTML the hard space character is known as a non-breaking space and is inserted using the entity
diff --git a/items/2.4.8.html b/items/2.4.8.html index c6c0795..52f1b7e 100644 --- a/items/2.4.8.html +++ b/items/2.4.8.html @@ -1,4 +1,4 @@ - , for example:“The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn.”
+“The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn.”
Comprehensive control for page breaks was introduced in CSS 2, however browser support is currently limited to Opera 9. The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are
diff --git a/items/3.1.1.html b/items/3.1.1.html index 5d2897f..49139ff 100644 --- a/items/3.1.1.html +++ b/items/3.1.1.html @@ -1,6 +1,6 @@ -page-break-beforeandpage-break-after(this is also true of IE8 beta and Firefox 3 beta at time of writing).“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 years. […] 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.”
+-“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 years. […] 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.”
Sizing text in CSS is achieved using the
+font-sizeproperty. In print, font sizes are specified absolutely, for example setting text at 12 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’s more, most web browsers enable the reader to resize the text to suit their own reading environment and requirements.Sizing text in CSS is achieved using the
font-sizeproperty. In print, font sizes are specified absolutely, for example setting text at 12 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’s more, most web browsers enable the reader to resize the text to suit their own reading environment and requirements.For text which is to be printed, the
@@ -8,7 +8,7 @@font-sizeproperty can and should be used to set in text in points, for example: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 (although IE7 does provide full page zooming), so we need to look to other units.
-Sizing text using the
+emunit is the next most appropriate approach. The em is a true typographic unit and was recommended by the W3C from the outset of CSS. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if thebodyof a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at0.75em.Sizing text using the
emunit is the next most appropriate approach. The em is a true typographic unit and was recommended by the W3C from the outset of CSS. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if thebodyof a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at0.75em.diff --git a/items/3.2.1.html b/items/3.2.1.html index e4378a4..a113fbe 100644 --- a/items/3.2.1.html +++ b/items/3.2.1.html @@ -1,17 +1,17 @@ -p { font-size:0.75em; /* 16x0.75=12 */ }“When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former text figures, hanging figures, lowercase figures, or old-style figures (OSF for short) and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called titling figures, ranging figures or lining figures, because they range or align with the upper case.
+“When arabic numerals joined the roman alphabet, they too were given both lowercase and uppercase forms. Typographers call the former text figures, hanging figures, lowercase figures, or old-style figures (OSF for short) and make a point of using them whenever the surrounding text is set in lowercase letters or small caps. The alternative forms are called titling figures, ranging figures or lining figures, because they range or align with the upper case.
+[Text figures] 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. […] However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.”
[…]
-[Text figures] 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. […] However common it may be, the use of titling figures in running text is illiterate: it spurns the truth of letters.”Many core web fonts (indeed most digital fonts) 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 (but lacks titling figures).
-Microsoft’s new ‘C’ fonts however, are very strong with respect to their numerals. All six typefaces (including the fixed-width Consolas) have both titling and text figures included in the base fonts. Further, three of the fonts default to titling figures (Calibri, Cambria, and Consolas), the other three to text figures (Candara, Constantia, and Corbel). Constantia and Corbel even include small variants of their lining figures for use with text set in small capitals.
+Microsoft’s new ‘C’ fonts however, are very strong with respect to their numerals. All six typefaces (including the fixed-width Consolas) have both titling and text figures included in the base fonts. Further, three of the fonts default to titling figures (Calibri, Cambria, and Consolas), the other three to text figures (Candara, Constantia, and Corbel). Constantia and Corbel even include small variants of their lining figures for use with text set in small capitals.
-Despite the bright hope for the future brought by Microsoft’s ‘C’ fonts, CSS currently makes no provision for the control of numeral case, this means the default figures will always be used, regardless of context.
+Despite the bright hope for the future brought by Microsoft’s ‘C’ fonts, CSS currently makes no provision for the control of numeral case, this means the default figures will always be used, regardless of context.
The Future
-The CSS3 fonts module is still a working draft, but is being actively revised. The current editor’s draft includes a proposal for supporting specification of lining or old-style numbers through the
+font-variant-numericproperty.The CSS3 fonts module is still a working draft, but is being actively revised. The current editor’s draft includes a proposal for supporting specification of lining or old-style numbers through the
font-variant-numericproperty.For example, one could specify old-style figures using the
oldstyle-numsvalue as follows: