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

Merge pull request #11 from nevanscott/cssexamples

Browse Source 
cleaning up CSS example code
This commit is contained in:
Richard Rutter
2014-04-24 21:17:34 +01:00
parent 038a3e31b7 a7493d037b
commit c564aefc7f
20 changed files with 166 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
items/2.1.1.html
View File

@@ -3,9 +3,11 @@
<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 specify 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 }
word-spacing: 0.25em;
}
h1 {
word-spacing:-0.125em }</code></pre>
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>
@@ -20,16 +22,18 @@ h1 {
<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 }
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>
font-size: 60px;
width: 1em;
height: 1em;
border: 1px solid black;
}</code></pre>
<p>These styles will render like: </p>

45
items/2.1.10.html
View File

@@ -13,28 +13,43 @@
<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;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; }
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; }</code></pre>
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>
@@ -61,21 +76,25 @@ td {
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> looks like&nbsp;this:</p>
<pre><code>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; }</code></pre>
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>

15
items/2.1.2.html
View File

@@ -2,14 +2,17 @@
</blockquote>
<p>The <em>measure</em> is the number of characters in a single line of a column of text. <abbr title="HyperText Mark-up Language">HTML</abbr> doesn’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 }
<pre><code>#col1 {
width: 400px;
}
DIV#col2 {
width:50% }
#col2 {
width: 50%;
}
DIV#col3 {
width:33em }</code></pre>
#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 ‘page’, he can&nbsp;do.</p>

22
items/2.1.3.html
View File

@@ -7,14 +7,17 @@
</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 */ }
<pre><code>p {
text-align: left; /* ragged right */
}
P {
text-align:right /* ragged left */ }
p {
text-align: right; /* ragged left */
}
P {
text-align:justify }</code></pre>
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>
@@ -28,9 +31,10 @@ 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>
<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>

4
items/2.1.6.html
View File

@@ -4,7 +4,9 @@
</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>
<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>

3
items/2.1.7.html
View File

@@ -9,7 +9,8 @@
font-family: "univers bold condensed",
impact, haettenschweiler, sans-serif;
font-size: 200%;
letter-spacing:0.1em; }</code></pre>
letter-spacing: 0.1em;
}</code></pre>
<p>This would render as&nbsp;follows:</p>

2
items/2.1.8.html
View File

@@ -9,7 +9,7 @@
<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>
.kern { letter-spacing: -0.1em; }</code></pre>
<p>Which should render&nbsp;as:</p>

2
items/2.1.9.html
View File

@@ -5,7 +5,7 @@
<pre><code>&lt;h2 class="squish"&gt;letterfit&lt;/h2&gt;
h2.squish {letter-spacing: -0.1em }</code></pre>
h2.squish { letter-spacing: -0.1em; }</code></pre>
<p>Resulting&nbsp;in:</p>

12
items/2.2.1.html
View File

@@ -5,7 +5,8 @@
<pre><code>p {
font-size: 12pt;
line-height: 15pt }</code></pre>
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>
@@ -13,12 +14,14 @@
<pre><code>p {
font-size: 12pt;
line-height: 1.25 }</code></pre>
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>
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>
@@ -31,7 +34,8 @@
<pre><code>.example {
font-size: 1.5em;
line-height: 0.85;
text-indent: -0.5em }</code></pre>
text-indent: -0.5em;
}</code></pre>
<div class="ex2-2-1ii example">this is an&nbsp;example<br />
of negative leading</div>

9
items/2.2.2.html
View File

@@ -5,7 +5,8 @@
<pre><code>p {
line-height: 1.5;
margin-top: 1.5em;
margin-bottom: 1.5em }</code></pre>
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>
@@ -20,7 +21,8 @@
<pre><code>h2 {
line-height: 1.286;
margin-top: 1.286em;
margin-bottom: 1.286em }</code></pre>
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>
@@ -29,7 +31,8 @@
<pre><code>h2 {
line-height: 1.286;
margin-top: 1.929em;
margin-bottom: 0.643em }</code></pre>
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>

6
items/2.3.1.html
View File

@@ -2,9 +2,9 @@
</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>
<pre><code>p {
text-indent: 0;
}</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>

47
items/2.3.2.html
View File

@@ -3,20 +3,24 @@
<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>
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>
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 }
margin-bottom: 0;
}
p + p {
text-indent:1em;
margin-top:0 }</code></pre>
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>
@@ -33,29 +37,34 @@ p + p {
<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 }
margin-bottom: 0;
}
p + p {
text-indent:-1.5em;
margin-top:0 }</code></pre>
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 }
margin-bottom: 0;
}
p + p:before {
content: "2767";
padding-right: 0.4em;
margin-top:0 }</code></pre>
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 }
<pre><code>p { display: inline; }
p + p:before {
content: "2761";
padding-right: 0.1em;
padding-left: 0.4em }</code></pre>
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>
@@ -67,17 +76,19 @@ p + p:before {
<pre><code>p {
display: inline;
position: relative }
p + p {top: 1.3em }</code></pre>
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>
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>

3
items/2.3.3.html
View File

@@ -4,7 +4,8 @@
<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>
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>

18
items/2.3.4.html
View File

@@ -12,7 +12,8 @@ Thinks in a marrow bone.&lt;/pre&gt;
<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>
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’ 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>
@@ -20,7 +21,8 @@ Thinks in a marrow bone.&lt;/pre&gt;
font-family: inherit;
display: table;
width: auto;
margin: 0 auto; }</code></pre>
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>
@@ -34,20 +36,24 @@ Thinks in a marrow bone.&lt;/span&gt;&lt;/pre&gt;
<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; }
text-align: center;
}
.verse pre span {
text-align: left; }</code></pre>
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; }
text-align: center;
}
.verse pre span {
text-align: left;
display: inline-block;
white-space: pre; }</code></pre>
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>

8
items/2.4.1.html
View File

@@ -18,11 +18,13 @@
<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>
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’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>
hyphenate-before: 2;
hyphenate-after: 3;
}</code></pre>

3
items/2.4.3.html
View File

@@ -6,7 +6,8 @@
<pre><code>p {
hyphenate: auto;
hyphenate-lines: 3; }</code></pre>
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>

6
items/2.4.5.html
View File

@@ -13,8 +13,10 @@
<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> }
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>
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>

17
items/2.4.8.html
View File

@@ -5,14 +5,17 @@
<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 }
page-break-before: always;
}
.section {
page-break-after:always }</code></pre>
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>
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>
@@ -23,11 +26,13 @@
<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>
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>
widows: 4;
orphans: 4;
}</code></pre>

14
items/3.1.1.html
View File

@@ -4,7 +4,7 @@
<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>
<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>
@@ -16,12 +16,12 @@
<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>
<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="http://www.alistapart.com/articles/howtosizetextincss/">How to Size Text in <abbr title="Cascading Style Sheets">CSS</abbr></a>.</p>

3
items/3.2.1.html
View File

@@ -16,7 +16,8 @@
<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>
font-variant-numeric: oldstyle-nums;
}</code></pre>
<p>To specify titling figures, one would use a value of <code>lining-nums</code>.</p>