In CSS, word space is set with the word-spacing property which has a default value of normal. 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 say word-spacing does not set the actual space between words, it sets an increment to the existing spacing. For example:
p {
- word-spacing:0.25em }
+ word-spacing: 0.25em;
+}
h1 {
- word-spacing:-0.125em }In the preceding example, word space in paragraphs is increased by 0.25 em (effectively doubling it) and the word space in top level headings is decreased by 0.125 em (effectively halving it).
@@ -20,16 +22,18 @@ h1 {To illustrate this principle in terms of CSS, consider these styles:
#box1 {
- font-size:12px;
- width:1em;
- height:1em;
- border:1px solid black }
+ font-size: 12px;
+ width: 1em;
+ height: 1em;
+ border: 1px solid black;
+}
#box2 {
- font-size:60px;
- width:1em;
- height:1em;
- border:1px solid black }These styles will render like:
diff --git a/items/2.1.10.html b/items/2.1.10.html index f03b07e..1b1709b 100644 --- a/items/2.1.10.html +++ b/items/2.1.10.html @@ -13,28 +13,43 @@This is a table of contents so it has been marked up as a simple table:
<table>
- <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’s Dream</th><td>11</td></tr>
+ <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’s Dream
+ </th>
+ <td>11</td>
+ </tr>
</table>The CSS looks like this:
table {
- margin: 0 3em 0 auto; }
+ margin: 0 3em 0 auto;
+}
th {
font-weight: normal;
text-align: right;
- padding:0; }
+ padding: 0;
+}
td {
font-style: italic;
text-align: right;
- padding: 0 0 0 0.5em; }While most of the CSS is straight forward, a point worth highlighting is the margin declaration for the table itself. There is a right margin of 3 em to set the table in slightly from the right gutter and a left margin of auto to push the table over towards the right hand side of the page.
The CSS looks like this:
table {
- margin: 0 auto; }
+ margin: 0 auto;
+}
th {
font-weight: normal;
text-align: right;
- padding: 0 0.5em 0 0; }
+ padding: 0 0.5em 0 0;
+}
td:before {
content: "2022";
- padding-right: 0.5em; }
+ padding-right: 0.5em;
+}
td {
font-style: italic;
text-align: left;
- padding: 0; }There a couple of points worth noting in the CSS. The table has been centered by giving the left and right margins a value of auto. For block-level elements a width declaration would also be required when applying this technique, however tables have an inherent width so one does not need to be specified explicitly.
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 width property with any unit of length, for example:
DIV#col1 {
- width:400px }
+#col1 {
+ width: 400px;
+}
-DIV#col2 {
- width:50% }
+#col2 {
+ width: 50%;
+}
-DIV#col3 {
- width:33em }
+#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.
diff --git a/items/2.1.3.html b/items/2.1.3.html index 168450e..8fa718e 100644 --- a/items/2.1.3.html +++ b/items/2.1.3.html @@ -7,14 +7,17 @@Setting text justified or ragged is accomplished in CSS through the text-align property, as follows:
P {
- text-align:left /* ragged right */ }
+p {
+ text-align: left; /* ragged right */
+}
-P {
- text-align:right /* ragged left */ }
+p {
+ text-align: right; /* ragged left */
+}
-P {
- text-align:justify }
+p {
+ text-align: justify;
+}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.
@@ -28,9 +31,10 @@ P {Setting inter-character 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 example:
P {
- text-align:justify;
- text-justify:inter-character }p {
+ text-align: justify;
+ text-justify: inter-character;
+}CSS3 also provides last line alignment with the text-align-last property. Normally the last line in a paragraph of justified text would not be justified, however if text-align-last is set to justify then the last line will be also spread evenly across the line, although in most cases this would be highly undesirable from a typographical perspective.
Letter spacing in CSS is achieved with the aptly named letter-spacing property. 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:
ABBR {letter-spacing:0.1em}abbr {
+ letter-spacing: 0.1em;
+}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.
This would render as follows:
diff --git a/items/2.1.8.html b/items/2.1.8.html index 2ef6963..9c0162d 100644 --- a/items/2.1.8.html +++ b/items/2.1.8.html @@ -9,7 +9,7 @@<span class="kern">W</span>ashington
and <span class="kern">T</span>oronto
-.kern {letter-spacing: -0.1em }Which should render as:
diff --git a/items/2.1.9.html b/items/2.1.9.html index 916e6f3..e610816 100644 --- a/items/2.1.9.html +++ b/items/2.1.9.html @@ -5,7 +5,7 @@<h2 class="squish">letterfit</h2>
-h2.squish {letter-spacing: -0.1em }Resulting in:
diff --git a/items/2.2.1.html b/items/2.2.1.html index 7bff3ff..660f406 100644 --- a/items/2.2.1.html +++ b/items/2.2.1.html @@ -5,7 +5,8 @@p {
font-size: 12pt;
- line-height: 15pt }However that example is bad as line-height 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 (to 18 pt for example) but the line-height may remain at 15 pt. So instead of the lines being spaced apart, they would actually overlap.
p {
font-size: 12pt;
- line-height: 1.25 }In this example the value of line-height is a multiplier: 1.25 x 12 = 15 pt. This is a far more reliable method as the line-height (the distance between baselines) will always be proportional to the text size. Line height can be incorporated into the font property using a shorthand familiar to typographers:
p {
- font: 12pt/1.25 "Minion Pro", "Minion Web", serif }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 are common (this page has a line-height of 1.5 for example).
.example {
font-size: 1.5em;
line-height: 0.85;
- text-indent: -0.5em }p {
line-height: 1.5;
margin-top: 1.5em;
- margin-bottom: 1.5em }It should be noted that the default treatment by web browsers of paragraphs (and other block level elements such as blockquotes and lists) is to insert a top- and bottom-margin of 1 em. The implication is that margins must always be specified by the designer.
@@ -20,7 +21,8 @@h2 {
line-height: 1.286;
margin-top: 1.286em;
- margin-bottom: 1.286em }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½ lines could be combined with a bottom margin of half a line as follows:
@@ -29,7 +31,8 @@h2 {
line-height: 1.286;
margin-top: 1.929em;
- margin-bottom: 0.643em }By way of a further example, the main heading of the page you are reading has a text size of 18 px, therefore the line-height is set to 1 em, as are the margins.
Paragraphs, and other block level elements, are indented using the text-indent property. To ensure a paragraph is set flush left, the text-indent should be set to zero:
p {
- text-indent:0 }
-p {
+ text-indent: 0;
+}This rule is rarely necessary, however, because CSS specifies that the default initial value for text-indent should be 0.
Indenting the first line of a paragraph, or any block element is achieved in CSS using the text-indent property:
p {
- text-indent:1em }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 (+) can be used:
p + p {
- text-indent:1em }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 paragraph:
p {
- margin-bottom:0 }
+ margin-bottom: 0;
+}
p + p {
- text-indent:1em;
- margin-top:0 }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.
@@ -33,29 +37,34 @@ p + p {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 {
- margin-bottom: 0 }
+ margin-bottom: 0;
+}
p + p {
- text-indent:-1.5em;
- margin-top:0 }Ornamented indentation, unlike standard indentation, does not necessarily require the use of text-indent to achieve the primary effect (although it can aid clarity). The key to achieving this effect is the use of the CSS 2.1 :before pseudo-element to specify the ornamentation. The following example would insert a floral heart at the beginning of a subsequent paragraph:
p {
- margin-bottom: 0 }
+ margin-bottom: 0;
+}
p + p:before {
content: "2767";
padding-right: 0.4em;
- margin-top:0 }In the above example, applying a text-indent to the paragraph would cause the ornament to be indented with the first line of the paragraph; to separate the ornament from the content, padding-right has been applied to the generated content.
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 inline elements, with ornamentation specified as before (in this case a decorative pilcrow is used in place of the floral heart bullet):
p { display: inline }
+p { display: inline; }
p + p:before {
content: "2761";
padding-right: 0.1em;
- padding-left: 0.4em }
+ padding-left: 0.4em;
+}It should be noted that the afore mentioned rules for ornaments will not work in Internet Explorer (up to version 7 at the time of writing) as it does not support the content property of CSS. Additionally Firefox on Windows (tested on XP SP2 at the time of writing) 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 text.
p {
display: inline;
- position: relative }
-p + p {top: 1.3em }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 top position:
p {
display: inline;
- position: relative }
-p + p {top: 1.3em }
-p + p + p {top: 2.6em }
-p + p + p + p {top: 3.9em }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 text.
\ No newline at end of file diff --git a/items/2.3.3.html b/items/2.3.3.html index 3cb8858..7319092 100644 --- a/items/2.3.3.html +++ b/items/2.3.3.html @@ -4,7 +4,8 @@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.
blockquote {
- margin:1.5em }As explained in §2.2.2, 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.
\ No newline at end of file diff --git a/items/2.3.4.html b/items/2.3.4.html index cfa9aef..0a42173 100644 --- a/items/2.3.4.html +++ b/items/2.3.4.html @@ -12,7 +12,8 @@ Thinks in a marrow bone.</pre>In its default state the pre element is usually rendered using a monospaced font, so this should normally be changed to a more fitting typeface. Setting the font-family to inherit the typeface from the surrounding text may be a good start:
.verse pre {
- font-family: inherit; }A logical way to center the verse on the longest line would be to simply specify width:auto and margin: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 the pre element to display as a table as follows:
The preceding rules achieve the desired layout in Firefox, Safari and Opera 9. However margin:0 auto will not center elements in Internet Explorer 6 or 7, without a specific width being set. To work around this, a new span element containing the entire block of verse must be nested within the pre element as follows:
This span can then be centered in Internet Explorer applying text-align:center to the pre and resetting the text alignment on the span element.
.verse pre {
- text-align: center; }
+ text-align: center;
+}
.verse pre span {
- text-align: left; }Much like other browsers, Internet Explorer considers any preformatted content to have full-width lines; to counter this, the span can be set to display:inline-block. This in turn causes Internet Explorer to ignore white-space formatting, so we must re-set the span to white-space:pre. This gives us:
.verse pre {
- text-align: center; }
+ text-align: center;
+}
.verse pre span {
text-align: left;
display: inline-block;
- white-space: pre; }The display:inline-block 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 (see Quirksmode for more info):
Until recently, the CSS 3 Text module contained the hyphenate property which could be set to auto or none. 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 example:
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-before and hyphenate-after properties which specify the minimum number of characters in a hyphenated word before and after the hyphenation character. For example:
p {
- hyphenate-before:2;
- hyphenate-after:3; }p {
hyphenate: auto;
- hyphenate-lines: 3; }A value of none means that there is no limit to the number of successive hyphenated lines.
The CSS 3 Text module may also introduce a hyphenate-dictionary property to specify which hyphenation dictionary to use. For example:
html[lang=en] {
- hyphenate-dictionary:url(hyph_en.dic) }
+ hyphenate-dictionary:url(hyph_en.dic);
+}
html[lang=fr] {
- hyphenate-dictionary:url(hyph_fr.dic) }A value of auto would indicate that the built-in dictionaries, if any, should be used.
The page-break-before and page-break-after 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 h1 heading is encountered and after every .section block.
h1 {
- page-break-before:always }
+ page-break-before: always;
+}
.section {
- page-break-after:always }If you know (or can calculate) 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 example:
.dontsplit {
- page-break-before:always }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.
@@ -23,11 +26,13 @@A relative of the page-break-after property mentioned earlier is page-break-inside which stops elements spanning pages. For example you may like to apply this rule to all headings:
h1, h2, h3, h4, h5, h6 {
- page-break-inside:never }Precise widow and orphan control is also available through the widows and orphans 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 following:
p {
- widows:4;
- orphans:4 }For text which is to be printed, the font-size property can and should be used to set in text in points, for example:
p { font-size:12pt }p { font-size: 12pt; }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.
@@ -16,12 +16,12 @@So choosing from the traditional scale, our final font sizing style sheet could look as follows:
-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 */ }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 */ }More details and analysis of font sizing can be found in How to Size Text in CSS.
diff --git a/items/3.2.1.html b/items/3.2.1.html index a113fbe..71420e8 100644 --- a/items/3.2.1.html +++ b/items/3.2.1.html @@ -16,7 +16,8 @@For example, one could specify old-style figures using the oldstyle-nums value as follows:
p {
- font-variant-numeric: oldstyle-nums }To specify titling figures, one would use a value of lining-nums.