mirror of
https://github.com/clagnut/webtypography.git
synced 2025-09-09 04:31:05 +02:00
20 lines
2.4 KiB
HTML
20 lines
2.4 KiB
HTML
<blockquote class='quote-from-book'> <p><span class='ic'>“</span>Acronyms such as <abbr>CIA</abbr> and <abbr>PLO</abbr> are frequent in some texts. So are abbreviations such as <abbr>CE</abbr> and <abbr>BCE</abbr> or <abbr>AD</abbr> and <abbr>BC</abbr>. The normal value for letterspacing these sequences of small or full caps is 5% to 10% of the type size.</p>
|
||
|
||
<p>Many typographers like to letterspace all strings of numbers as well. Spacing is essential for rapid reading of long, fundamentally meaningless strings such as serial numbers, and is helpful even for shorter strings such as phone numbers and dates.”</p>
|
||
</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><abbr></code> tags and apply a <abbr title="Cascading Style Sheets">CSS</abbr> rule such as:</p>
|
||
|
||
<pre><code>abbr {
|
||
letter-spacing: 0.1em;
|
||
}</code></pre>
|
||
|
||
<p>If you have created static pages for your website then inserting <code><acronym></code> and <code><abbr></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>
|
||
|
||
<p>I’m not going to explain regular expressions here – there are plenty of resources elsewhere on the web – but in the form of a <abbr title="PHP HyperText Processor">PHP</abbr> function here is an expression to get you started:</p>
|
||
|
||
<pre><code>$search = '/\b<span class='bracket'>(</span><span class='bracket'>[</span>A-Z<span class='bracket'>]</span><span class='bracket'>[</span>A-Z0-9<span class='bracket'>]</span>{2,}<span class='bracket'>)</span>\b/';
|
||
$replace = '<abbr>$1</abbr>';
|
||
$text = preg_replace<span class='bracket'>(</span>$search,$replace,$text<span class='bracket'>)</span>;</code></pre>
|
||
|
||
<p>This function looks for sequences of 3 or more uppercase letters or numbers, such as <abbr title="Cascading Style Sheets">CSS</abbr>, <abbr title="HyperText Mark-up Language">HTML</abbr> and <abbr title="Worldwide Web Consortium">W3C</abbr>, and wraps an <code><abbr></code> tag around them.</p>
|