mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-03 01:52:48 +02:00
fixing a bunch of broken links and a broken image
This commit is contained in:
Nevan Scott
@@ -22,7 +22,7 @@ P {
|
||||
|
||||
<h2>Future considerations</h2>
|
||||
|
||||
<p><abbr>CSS3</abbr> provides further refinement of justification within the <a href="/web/20140209213835/http://www.w3.org/TR/css3-text">Text Module</a>. For European languages, the <code>text-justify</code> property provides two justification options: <code>inter-word</code> and <code>inter-character</code>.</p>
|
||||
<p><abbr>CSS3</abbr> provides further refinement of justification within the <a href="http://www.w3.org/TR/css3-text">Text Module</a>. For European languages, the <code>text-justify</code> property provides two justification options: <code>inter-word</code> and <code>inter-character</code>.</p>
|
||||
|
||||
<p>Setting <code>inter-word</code> selects the simplest and fastest full justification behavior, which spreads the text evenly across the line by increasing the width of the space between words only. No expansion or compression occurs within the words, i.e. no additional letter spacing is created.</p>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
</blockquote>
|
||||
<p>All white space in <abbr title="HyperText Mark-up Language">HTML</abbr>, in any combination of spaces, tabs or line breaks, is automatically collapsed to a single word space. Therefore this guideline is automatically adhered to regardless of your training as a typist.</p>
|
||||
|
||||
<p>If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many <a href="/web/20140209214008/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&nbsp;</code>, as this has a meaning in and of itself.</p>
|
||||
<p>If you do need to insert more than a single word space between sentences, or any other characters, then use one of the many <a href="http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&nbsp;</code>, as this has a meaning in and of itself.</p>
|
||||
|
||||
<ul class='nobullets'>
|
||||
<li><code>&#8194;</code> en space <span class="inex"> </span></li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Names such as W.B. Yeats and J.C.L. Prillwitz need hair spaces, thin spaces or no spaces at all after the intermediary periods <span class='bracket'>[</span>full stops<span class='bracket'>]</span>. A normal word space follows the <em>last</em> period in the string.”</p>
|
||||
</blockquote>
|
||||
<p>Hair spaces and thin spaces are two of the many <a href="/web/20140209230324/http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’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:</p>
|
||||
<p>Hair spaces and thin spaces are two of the many <a href="http://www.alanwood.net/unicode/general_punctuation.html" title="General Punctuation - Test for Unicode support in Web browsers">space characters available in Unicode</a>. Even if the character itself isn’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:</p>
|
||||
|
||||
<pre><code>W.&#8202;B. Yeats
|
||||
J.&#8201;C.&#8201;L. Prillwitz</code></pre>
|
||||
|
||||
@@ -17,7 +17,7 @@ and <span class="kern">T</span>oronto
|
||||
|
||||
<p>Notice that the <code>span</code> was applied around the first letter of the pair, not around both letters. This is because the <code>letter-spacing</code> property adds or removes space <strong>after each letter</strong>. Notice also that the <code>letter-spacing</code> is specified in <code>ems</code> to ensure that the amount of kerning is applied in proportion to the text size.</p>
|
||||
|
||||
<p>As with <a href="/web/20140209204454/http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.6/">letterspacing strings of capitals</a>, adding a <code>span</code> every time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This <abbr title="PHP HyperText Processor">PHP</abbr> function uses a regular expression to replace insert a <code>span</code> into any string of ‘To’ or ‘Wa’:</p>
|
||||
<p>As with <a href="/2.1.6">letterspacing strings of capitals</a>, adding a <code>span</code> every time you need to kern a letter pair could become tedious and so regular expressions could come to the rescue once more. This <abbr title="PHP HyperText Processor">PHP</abbr> function uses a regular expression to replace insert a <code>span</code> into any string of ‘To’ or ‘Wa’:</p>
|
||||
|
||||
<pre><code>$search = '/<span class='bracket'>(</span>T<span class='bracket'>)</span><span class='bracket'>(</span>o<span class='bracket'>)</span>|<span class='bracket'>(</span>W<span class='bracket'>)</span><span class='bracket'>(</span>a<span class='bracket'>)</span>/';
|
||||
$replace = '<span class="kern">$1$3</span>$2$4';
|
||||
@@ -25,5 +25,5 @@ $text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span cl
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>The <a href="/web/20140209204454/http://www.w3.org/TR/2003/CR-css3-text-20030514/#kerning-props"><abbr>CSS3</abbr> Text Module</a> may contain the <code>kerning-mode</code> and <code>kerning-pair-threshold</code> properties to aid control over kerning, although these properties have yet to be fully defined.</p>
|
||||
<p>The <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#kerning-props"><abbr>CSS3</abbr> Text Module</a> may contain the <code>kerning-mode</code> and <code>kerning-pair-threshold</code> properties to aid control over kerning, although these properties have yet to be fully defined.</p>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<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½ lines could be combined with a bottom margin of half a line as follows:</p>
|
||||
|
||||
<p class='imgholder'><img src="/web/20140209214917im_/http://webtypography.net/i/2-2-2i.png" alt="Diagram of text showing how the basic leading is retained with a heading and asymmetrical margins" /></p>
|
||||
<p class='imgholder'><img src="/i/2-2-2i.png" alt="Diagram of text showing how the basic leading is retained with a heading and asymmetrical margins" /></p>
|
||||
|
||||
<pre><code>h2 {
|
||||
line-height: 1.286;
|
||||
|
||||
@@ -26,7 +26,7 @@ p + p {
|
||||
|
||||
<h2>Block Paragraphs</h2>
|
||||
|
||||
<p>As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in <a href="/web/20140209211703/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">§2.2.2</a> the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.</p>
|
||||
<p>As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in <a href="/2.2.2">§2.2.2</a> the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.</p>
|
||||
|
||||
<h2>Outdenting</h2>
|
||||
|
||||
|
||||
@@ -6,5 +6,5 @@
|
||||
<pre><code>blockquote {
|
||||
margin:1.5em }</code></pre>
|
||||
|
||||
<p>As explained in <a href="/web/20140209223524/http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/" title="Add and delete vertical space in measured intervals">§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>
|
||||
<p>As explained in <a href="/2.2.2" title="Add and delete vertical space in measured intervals">§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>
|
||||
|
||||
@@ -49,7 +49,7 @@ Thinks in a marrow bone.</span></pre>
|
||||
display: inline-block;
|
||||
white-space: pre; }</code></pre>
|
||||
|
||||
<p>The <code>display:inline-block</code> in the preceding rule causes Gecko-based browsers such as Firefox and Camino to incorrectly render the contents. Fortunately these rules are only required for Internet Explorer, so we can write them in a separate style sheet, included using conditional comments <span class='bracket'>(</span>see <a href="/web/20140209225810/http://www.quirksmode.org/css/condcom.html" title="Quirksmode: 
Conditional comments">Quirksmode</a> for more info<span class='bracket'>)</span>:</p>
|
||||
<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="http://www.quirksmode.org/css/condcom.html" title="Quirksmode: 
Conditional comments">Quirksmode</a> for more info<span class='bracket'>)</span>:</p>
|
||||
|
||||
<pre><code><!-<span class='bracket'>[</span>if lte IE 7<span class='bracket'>]</span>>
|
||||
<link rel="stylesheet" type="text/css" href="ie-lte-7.css" />
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<p>Liquid layouts and resizable text mean that, on the Web, one never knows which word will be at the end of a line. To deal with this in <abbr title="HyperText Mark-up Language">HTML</abbr>, there are two types of hyphens: the plain hyphen and the soft hyphen. Browsers treat the plain hyphen as just another character. The soft hyphen tells the browser where a word break can occur, and should only be displayed when a word is being broken across two lines.</p>
|
||||
|
||||
<p>The soft hyphen has existed since <abbr title="HyperText Mark-up Language">HTML</abbr> 3.2, and is <a href="/web/20140209230237/http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.3">explained well in the <abbr title="HyperText Mark-up Language">HTML</abbr> 4.0</a> recommendation. Its entity code is <code>&shy;</code> or <code>&#173;</code> and is used as follows:</p>
|
||||
<p>The soft hyphen has existed since <abbr title="HyperText Mark-up Language">HTML</abbr> 3.2, and is <a href="http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3.3">explained well in the <abbr title="HyperText Mark-up Language">HTML</abbr> 4.0</a> recommendation. Its entity code is <code>&shy;</code> or <code>&#173;</code> and is used as follows:</p>
|
||||
|
||||
<pre><code>anti&shy;dis&shy;est&shy;ab&shy;lish&shy;ment&shy;arian&shy;ism</code></pre>
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>Until recently, the <a href="/web/20140209230237/http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a> contained the <code>hyphenate</code> property which could be set to <code>auto</code> or <code>none</code>. This property introduced the concept of automatic hyphenation to browsers, and would require that the web browser has a hyphenation dictionary for the language of the text being hyphenated. For example:</p>
|
||||
<p>Until recently, the <a href="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 example:</p>
|
||||
|
||||
<pre><code>p {
|
||||
hyphenate: auto; }</code></pre>
|
||||
|
||||
<p>At the time of writing, the latest <a href="/web/20140209230237/http://www.w3.org/TR/2007/WD-css3-text-20070306/">Working Draft of March 2007</a>, states that the definition of the hyphenation feature is still very much up-in-the-air, but it’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 example:</p>
|
||||
<p>At the time of writing, the latest <a href="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="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 example:</p>
|
||||
|
||||
<pre><code>p {
|
||||
hyphenate-before:2;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<p>This guideline can be achieved easily when hyphenating manually. See <a href="/web/20140209201628/http://webtypography.net/Rhythm_and_Proportion/Etiquette_of_Hypenation_and_Pagination/2.4.1/" title="At hyphenated line-ends, leave at least two characters behind and take at least three forward">§2.4.1</a> for more information on manual hypenation.</p>
|
||||
<p>This guideline can be achieved easily when hyphenating manually. See <a href="/2.4.1" title="At hyphenated line-ends, leave at least two characters behind and take at least three forward">§2.4.1</a> for more information on manual hypenation.</p>
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>Hyphenation will be included in the <a href="/web/20140209201628/http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a>, but at the time of writing, the definition of the hyphenation feature is still very much up-in-the-air. Currently the <a href="/web/20140209201628/http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, and among these is the <code>hyphenate-lines</code> property which specifies the maximum number of successive hyphenated lines in an element. For example:</p>
|
||||
<p>Hyphenation will be included in the <a href="http://www.w3.org/TR/css3-text/#hyphenate"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Text module</a>, but at the time of writing, the definition of the hyphenation feature is still very much up-in-the-air. Currently the <a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070205/#hyphenation"><abbr title="Cascading Style Sheets">CSS</abbr> 3 Paged Media module</a> has more details of the hyphenation properties originally proposed, and among these is the <code>hyphenate-lines</code> property which specifies the maximum number of successive hyphenated lines in an element. For example:</p>
|
||||
|
||||
<pre><code>p {
|
||||
hyphenate: auto;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<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 does provide full page zooming<span class='bracket'>)</span>, so we need to look to other units.</p>
|
||||
|
||||
<p>Sizing text using the <code>em</code> unit is the next most appropriate approach. The em is a true typographic unit and was <a href="/web/20140209211729/http://www.w3.org/WAI/GL/css2em.htm">recommended by the <abbr title="Worldwide Web Consortium">W3C</abbr></a> from the outset of <abbr title="Cascading Style Sheets">CSS</abbr>. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if the <code>body</code> of a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at <code>0.75em</code>.</p>
|
||||
<p>Sizing text using the <code>em</code> unit is the next most appropriate approach. The em is a true typographic unit and was <a href="http://www.w3.org/WAI/GL/css2em.htm">recommended by the <abbr title="Worldwide Web Consortium">W3C</abbr></a> from the outset of <abbr title="Cascading Style Sheets">CSS</abbr>. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if the <code>body</code> of a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at <code>0.75em</code>.</p>
|
||||
|
||||
<pre><code>p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<h2>The Future</h2>
|
||||
|
||||
<p>The <a href="/web/20140207235105/http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr> fonts module</a> is still a working draft, but is being actively revised. The current <a href="/web/20140207235105/http://dev.w3.org/csswg/css3-fonts/">editor’s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code> property.</p>
|
||||
<p>The <a href="http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr> fonts module</a> is still a working draft, but is being actively revised. The current <a href="http://dev.w3.org/csswg/css3-fonts/">editor’s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code> property.</p>
|
||||
|
||||
<p>For example, one could specify old-style figures using the <code>oldstyle-nums</code> value as follows:</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user