mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-02 17:42:46 +02:00
31 lines
3.2 KiB
HTML
31 lines
3.2 KiB
HTML
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Kerning – altering the space between selected pairs of letters – can increase consistency of spacing in a word like Washington or Toronto, where the combinations <cite>Wa</cite> and <cite>To</cite> are kerned.”</p>
|
||
</blockquote>
|
||
<p>At present there is no mechanism within <abbr title="HyperText Mark-up Language">HTML</abbr> or <abbr title="Cascading Style Sheets">CSS</abbr> that specifically enables kerning. However text on the Web does not generally need manual kerning, as all digital fonts have kerning tables built-in. These tables define which letter pairs need adjusting and by how much, and are usually adhered to by operating systems. The only time manual kerning may prove necessary is with larger text such as that in headings, in particular when numbers, italics or punctuation are involved.</p>
|
||
|
||
<p>It is also important to bear in mind that letter pairs in one font of your <code>font-family</code> list may need kerning whereas in another font they do not. In this case it is advisable not to kern, as too much kerning is almost always worse than none at all.</p>
|
||
|
||
<p>Where you do wish to kern letter pairs, you must insert a neutral inline element, such as <code>span</code> and apply the <code>letter-spacing</code> property. For example:</p>
|
||
|
||
<pre><code><span class="kern">W</span>ashington
|
||
and <span class="kern">T</span>oronto
|
||
|
||
.kern { letter-spacing: -0.1em; }</code></pre>
|
||
|
||
<p>Which should render as:</p>
|
||
|
||
<div class="ex2-1-8 example"><span class="ex2-1-8i">W</span>ashington and <span class="ex2-1-8i">T</span>oronto</div>
|
||
|
||
<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="/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';
|
||
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
|
||
|
||
<h2>The Future</h2>
|
||
|
||
<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>
|
||
|