Typografera dina förkortningar med CSS och PHP

Enligt Typografisk Handbok (Hellmark) så kan versala ord se ut som fläckar i din text. Detta kan avhjälpas genom att spärra dem smått och sätta de i kapitäler. Jag tänkte gå igenom ett snabbt tips hur man enkelt kan lösa detta med hjälp av PHP och CSS.

Flera versaler efter varandra i löpande text blir ofta påträngande […]. Det kan avhjälpas genom att man sätter versalerna en punkt mindre än den övriga texten och spärrar dem lite […].

För det första är denna koden ganska generell och det reguljära uttrycket är på inget sätt optimerat då mina kunskaper inom det fortfarande är ganska låga, det finns säkert en smartare sträng som löser uppgiften.
Först antar vi att din text är i en string:
[code language="php"]$str = "Hej en förkortning kan se ut som detta CSS eller HTML-kod samt PHP";

Sen behöver vi reguljära uttryck och en replace på de förkortningar som finns:
[code language="php"]$pattern = array(
"/s([A-Z][A-Z0-9]{2,})s/",
"/s([A-Z][A-Z0-9]{2,}+)/"
);
$replace = array(
" $1 ",
" $1"
);
$str = preg_replace( $pattern, $replace, $str);

Detta byter ut alla förekomster av förkortningar med tre tecken eller mer i den löpande texten. Att vi har två reguljära uttryck är eftersom en förkortning kan finns som ensamstående, HTML, eller som del av ett ord, HTML-koden.

Det som är kvar är att sätta en stilmall på den nya layouten:
[code language="css"]abbr {
letter-spacing: 0.1em;
font-variant: small-caps;
font-size: 11px;
}

Att vi väljer dessa regler är ganska enkelt. En förkortning ska enligt Hellmark spärras med ungefär 10%, alltså blir det 0.1em. Istället för att använda versaler som ser konstigt ut så kan man istället använda kapitäler som har samma x-höjd som resterande text. Det kan också vara en bra idé att minska textstorleken med 1pixel (eller punkt i print) för att linjera texten ytterligare.

Sammanfattning

[code language="php"]$str = "Hej en förkortning kan se ut som detta CSS eller HTML-kod samt PHP";
$pattern = array(
"/s([A-Z][A-Z0-9]{2,})s/",
"/s([A-Z][A-Z0-9]{2,}+)/"
);
$replace = array(
" $1 ",
" $1"
);
$str = preg_replace( $pattern, $replace, $str);

Och CSS:
[code language="css"]
abbr {
letter-spacing: 0.1em;
font-variant: small-caps;
font-size: 11px;
}