mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-02 09:33:27 +02:00
31 lines
3.4 KiB
HTML
31 lines
3.4 KiB
HTML
|
||
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Fi-nally is a conventionally acceptable line-end hyphenation, but final-ly is not, because it takes too little of the word ahead to the next line.”</p>
|
||
</blockquote>
|
||
<p>Unlike much word processing and page-layout software, there is not yet any automatic hyphenation built into web browsers. The next best method is to insert hyphen characters manually.</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 lines.</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>
|
||
|
||
<p>Which renders in your browser as: anti­dis­est­ab­lish­ment­arian­ism anti­dis­est­ab­lish­ment­arian­ism anti­dis­est­ab­lish­ment­arian­ism.</p>
|
||
|
||
<p>By definition, a soft hyphen should only appear when the word is wrapped. Browser support for this was patchy, but the situation has improved recently. Internet Explorer 6 treats the soft hyphen correctly, as do Opera, Safari 2 and Firefox 3. However older Gecko-based browsers such as Firefox 2 hide all soft hyphens and do not perform any hyphenation. By contrast Safari 1 displays all soft hyphens regardless of whether the word is wrapping.</p>
|
||
|
||
<h2>The Future</h2>
|
||
|
||
<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="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;
|
||
hyphenate-after: 3;
|
||
}</code></pre>
|
||
|