DTR – Dynamic Text Replacement – er en teknik der udskifter standard skrifttyper med dynamisk genererede grafiske skrifttyper. Med andre ord tillader denne teknik dig at udskifte standard skrifttyper med en hvilken som helst skrifttype (du har lov at bruge). Jeg anvender teknikken i denne sides overskrift. Denne udgave er udviklet af Stewart Rosenberger. Han har også beskrevet teknikken her i webdesign magasinet A-List-Apart.

Teknikken består af en kombination af Javascript og PHP. Det går i al sin ‘enkelthed’ ud på, at et PHP script sender billeder af teksten, du vil erstatte til din browser, når den bliver bedt om det. PHP scriptet skal du tilpasse dine ønsker mht. font-navn, størrelse og farve.

$font_file = 'font.ttf'; (skrifttypens navn, skrifttypen skal placeres i samme rodfolder som php-filen)
$font_size = 56; (skrifttypens str. i points)
$text_color = '#ffffff'; (skrifttypens farve)
$background_color = '#000000'; (baggrundsfarve for skrifttypen)
$transparent = true; (hvis ‘true’ vil billedernes kanter blive blended med ‘$background_color’ og forhindre anti-aliasing, samtidig med at baggrundsfarven er usynlig)
$cache_images = true;
$cache_folder = 'cache'; (Ved at sætte $cache_images til true, og $cache_folder til stien til en lokal skrivbar folder på din server vil scriptet gemme billederne i den specificerede cache-folder – så går det hele lidt hurtigere)

I JavaScriptet (replacement.js) er det denne linie: replaceSelector("h1","h1.php",true); du skal konecentrere dig om. Den har tre vigtige parametre:
"h1" CSS tag der fortæller hvilke elementer der skal erstattes. CSS elementet kan være et hvilket som helst CSS element, id, class, element el. attribute elementer.
"h1.php" Det andet parameter er PHP scriptets URL.
true Det tredje parameter er en true/false værdi der angiver hvorvidt orddeling skal anvendes. Hvis ‘true’, bliver teksten ombrudt til flere billeder, et for hvert ord. Hvis ‘false’ bliver der kun genereret et enkelt billede.

Hvis du vil erstatte flere elementer med forskellig formatering skal du modificere og anvende en PHP-fil for hver formatering. Hvis du f. eks. vil erstatte H1 med skrifttype 1, størrelse 50, sort skriftfarve og hvid baggrund og H2 med skrifttype 2, størrelse 40, blå skriftfarve og gul baggrund, skal du have to php-filer liggende på serveren med navnene h1.php og h2.php og henvise til dem i JavaScript-filen (2. parameter).

I JavaScriptet skal du blot indsætte en ny linie som denne, med de ønskede parametre: replaceSelector("h1","h1.php",true); for hvert css element du ønsker erstattet dynamisk.

Filerne du skal bruge kan hentes som zip-fil på Stewart Rosenbergers hjemmeside her.