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

fixing a bunch of broken links and a broken image

Browse Source
This commit is contained in:
Nevan Scott
2014-04-22 13:10:26 -04:00
parent 40acd6bf46
commit e6912a6f04
12 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
items/2.1.3.html
View File

@@ -22,7 +22,7 @@ P {
<h2>Future&nbsp;considerations</h2> <h2>Future&nbsp;considerations</h2>
<p><abbr>CSS3</abbr>&nbsp;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>&nbsp;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&nbsp;created.</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&nbsp;created.</p>

2
items/2.1.4.html
View File

@@ -2,7 +2,7 @@
</blockquote> </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&nbsp;typist.</p> <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&nbsp;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&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&amp;nbsp;</code>, as this has a meaning in and of&nbsp;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&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Avoid the temptation to use a non-breaking space, <code>&amp;nbsp;</code>, as this has a meaning in and of&nbsp;itself.</p>
<ul class='nobullets'> <ul class='nobullets'>
<li><code>&amp;#8194;</code> en space <span class="inex">&#8194;</span></li> <li><code>&amp;#8194;</code> en space <span class="inex">&#8194;</span></li>

2
items/2.1.5.html
View File

@@ -1,6 +1,6 @@
<blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</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.&#8221;</p> <blockquote class='quote-from-book'> <p><span class='ic'>&#8220;</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.&#8221;</p>
</blockquote> </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&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Here&#8217;s how to use hair spaces and thin spaces,&nbsp;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&#8217;t included in the current font, Unicode-aware browsers will display a good approximation. Here&#8217;s how to use hair spaces and thin spaces,&nbsp;respectively:</p>
<pre><code>W.&amp;#8202;B. Yeats <pre><code>W.&amp;#8202;B. Yeats
J.&amp;#8201;C.&amp;#8201;L. Prillwitz</code></pre> J.&amp;#8201;C.&amp;#8201;L. Prillwitz</code></pre>

4
items/2.1.8.html
View File

@@ -17,7 +17,7 @@ and &lt;span class="kern"&gt;T&lt;/span&gt;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&nbsp;size.</p> <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&nbsp;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 &#8216;To&#8217; or &#8216;Wa&#8217;:</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 &#8216;To&#8217; or &#8216;Wa&#8217;:</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>/'; <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 = '&lt;span class="kern"&gt;$1$3&lt;/span&gt;$2$4'; $replace = '&lt;span class="kern"&gt;$1$3&lt;/span&gt;$2$4';
@@ -25,5 +25,5 @@ $text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span cl
<h2>The&nbsp;Future</h2> <h2>The&nbsp;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&nbsp;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&nbsp;defined.</p>

2
items/2.2.2.html
View File

@@ -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&frac12; lines could be combined with a bottom margin of half a line as&nbsp;follows:</p> <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>
<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 { <pre><code>h2 {
line-height: 1.286; line-height: 1.286;

2
items/2.3.2.html
View File

@@ -26,7 +26,7 @@ p + p {
<h2>Block&nbsp;Paragraphs</h2> <h2>Block&nbsp;Paragraphs</h2>
<p>As stated earlier, block paragraphs &#8211; paragraphs separated by line breaks &#8211; 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/">&#167;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&nbsp;maintained.</p> <p>As stated earlier, block paragraphs &#8211; paragraphs separated by line breaks &#8211; are the default method used by web browsers. As explained in <a href="/2.2.2">&#167;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&nbsp;maintained.</p>
<h2>Outdenting</h2> <h2>Outdenting</h2>

2
items/2.3.3.html
View File

@@ -6,5 +6,5 @@
<pre><code>blockquote { <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> <p>As explained in <a href="/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>

2
items/2.3.4.html
View File

@@ -49,7 +49,7 @@ Thinks in a marrow bone.&lt;/span&gt;&lt;/pre&gt;
display: inline-block; 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> <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: &#013;Conditional comments">Quirksmode</a> for more&nbsp;info<span class='bracket'>)</span>:</p>
<pre><code>&lt;!-<span class='bracket'>[</span>if lte IE 7<span class='bracket'>]</span>&gt; <pre><code>&lt;!-<span class='bracket'>[</span>if lte IE 7<span class='bracket'>]</span>&gt;
&lt;link rel="stylesheet" type="text/css" href="ie-lte-7.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="ie-lte-7.css" /&gt;

6
items/2.4.1.html
View File

@@ -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&nbsp;lines.</p> <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&nbsp;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>&amp;shy;</code> or <code>&amp;#173;</code> and is used as&nbsp;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>&amp;shy;</code> or <code>&amp;#173;</code> and is used as&nbsp;follows:</p>
<pre><code>anti&amp;shy;dis&amp;shy;est&amp;shy;ab&amp;shy;lish&amp;shy;ment&amp;shy;arian&amp;shy;ism</code></pre> <pre><code>anti&amp;shy;dis&amp;shy;est&amp;shy;ab&amp;shy;lish&amp;shy;ment&amp;shy;arian&amp;shy;ism</code></pre>
@@ -15,12 +15,12 @@
<h2>The&nbsp;Future</h2> <h2>The&nbsp;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&nbsp;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&nbsp;example:</p>
<pre><code>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&#8217;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> <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&#8217;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&nbsp;example:</p>
<pre><code>p { <pre><code>p {
hyphenate-before:2; hyphenate-before:2;

4
items/2.4.3.html
View File

@@ -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">&sect;2.4.1</a> for more information on manual&nbsp;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">&sect;2.4.1</a> for more information on manual&nbsp;hypenation.</p>
<h2>The&nbsp;Future</h2> <h2>The&nbsp;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&nbsp;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&nbsp;example:</p>
<pre><code>p { <pre><code>p {
hyphenate: auto; hyphenate: auto;

2
items/3.1.1.html
View File

@@ -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&nbsp;does provide full page zooming<span class='bracket'>)</span>, so we need to look to other&nbsp;units.</p> <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>
<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&#8217;s parent element. Thus, if the <code>body</code> of a web page has 16&nbsp;px text by default, making paragraphs render at 12&nbsp;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&#8217;s parent element. Thus, if the <code>body</code> of a web page has 16&nbsp;px text by default, making paragraphs render at 12&nbsp;px would require setting paragraphs at <code>0.75em</code>.</p>
<pre><code>p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre> <pre><code>p { font-size:0.75em; /* 16x0.75=12 */ }</code></pre>

2
items/3.2.1.html
View File

@@ -11,7 +11,7 @@
<h2>The&nbsp;Future</h2> <h2>The&nbsp;Future</h2>
<p>The <a href="/web/20140207235105/http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr>&nbsp;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&#8217;s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code>&nbsp;property.</p> <p>The <a href="http://www.w3.org/TR/css3-fonts/"><abbr>CSS3</abbr>&nbsp;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&#8217;s draft</a> includes a proposal for supporting specification of lining or old-style numbers through the <code>font-variant-numeric</code>&nbsp;property.</p>
<p>For example, one could specify old-style figures using the <code>oldstyle-nums</code> value as&nbsp;follows:</p> <p>For example, one could specify old-style figures using the <code>oldstyle-nums</code> value as&nbsp;follows:</p>