Stel, je hebt een weblog en je zou ieder artikel of je navigatiestructuur willen voorzien van een kopje met een elegant lettertype. Hoe zou je dan te werk gaan? Een oplossing zou kunnen zijn dat je met een teken- of fotobewerkingsprogramma een afbeelding maakt met daarin de tekst in een lettertype naar keuze. Daarna zul je de afbeelding moeten opslaan in het gewenste formaat en uploaden naar je webruimte. In de html-code moet je vervolgens aangeven dat het betreffende artikel deze afbeelding als kopje moet tonen. Best een tijdrovende klus als je dagelijks artikelen plaatst.

En wat nu als je bijvoorbeeld van template verandert? Passen de artikelkopjes dan nog wel bij je template? Dit moet toch anders kunnen? Gelukkig kan dat!

Ik heb de website http://www.text2png.com/ gevonden waar wordt uitgelegd hoe je kopjes automatisch kunt laten omzetten naar een PNG-afbeelding. Het werkt supersimpel. Je voegt een stukje javascript toe aan je pagina waarin je aangeeft welke html-tag omgezet moet worden naar een afbeelding in PNG-formaat. De opmaak geef je middels een stukje CSS aan.

Je kunt dit op twee manieren toepassen. Ze hebben een versie die op hun servers gehost wordt en een versie die je zelf kunt downloaden en uploaden naar je webruimte. Daarna kun je de installatieprocedure starten in een browser. Bij deze versie is een database noodzakelijk. We gaan in dit artikel de eerste versie uitwerken.

De eerste stap is het invoegen van het stukje javascript. Die moet je tussen de < head> en < /head> tags van je html-document plaatsen. De javascript-code ziet er als volgt uit:

<script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js" mce_src="http://www.text2png.com/text_script.js"></script>
<script type="text/javascript" language="javascript">
text2png.onLoad = function(){
// HIER KOMEN DE REPLACE FUNCTIES
};
</script>

* Klik hier voor meer uitleg over hoe je deze code op je website kunt plaatsen.

Vervolgens geven we aan welke HTML-tags omgezet moeten worden naar afbeeldingen. Dit kan gedaan worden via drie verschillende replace-functies, namelijk:

1) text2png.replace(element_id);
Hiermee kun je een html-tag met een css-id omzetten naar een afbeelding. Voorbeeld:

<div id="kopje">Dit is een voorbeeld</div>

De javascript-functie ziet er dan als volgt uit:

text2png.replace('kopje');

Je kunt meerdere id's opgeven. Die voeg je dan gewoon toe, gescheiden door een komma, dus:

text2png.replace('kopje', 'een_ander_kopje');

2) text2png.replaceTags(tag_name);
Hiermee kun je één of meerdere html-tags omzetten naar een afbeelding. Voorbeeld:

<h1>Dit is een voorbeeld</h1>

De javascript-functie ziet er dan als volgt uit:

text2png.replaceTags('h1');

Wil je de h2-tag ook laten vervangen, dan voeg je die ook gewoon toe aan de javascript-functie, dus:

text2png.replaceTags('h1', 'h2');

3) text2png.replaceAll(element_id);
Hiermee kun je een html-tag met een css-id omzetten naar een afbeelding. Het enige verschil met de eerste functie is dat onderliggende html-tags ook door een afbeelding vervangen worden. Voorbeeld:

<div id="menu">
<a href="#">Menu item 1</a>
<a href="#">Menu item 2</a>
</div>

De javascript-functie ziet er dan als volgt uit:

text2png.replaceAll('menu');

Nu worden en de < div>-tag en de < a>-tags vervangen door een afbeelding. Ook hier geldt weer dat je meerdere id's kunt toevoegen aan de javascript-functie.

Nu willen we de tekst binnen een bepaalde html-tag gaan opmaken. Dit kun je doen via CSS. Als voorbeeld gaan we de h1- en h2-tag opmaken:

<style>
h1 {font-family:'Harlow Solid Italic', Arial, Helvetica, sans-serif; font-size:28pt}
h2 {font-family:'Segoe Print', Arial, Helvetica, sans-serif; font-size:14pt}
</style>

In dit voorbeeld wordt de h1-tag vervangen door een afbeelding met de betreffende tekst opgemaakt met het lettertype 'Harlow Solid Italic' en lettergrootte 28 punten. De h2-tag wordt opgemaakt in 'Segoe Print' met lettergrootte 14 punten. De lettertypes die momenteel ondersteund worden zijn terug te vinden op http://www.text2png.com/fonts.php.

De uiteindelijke code ziet er dan als volgt uit:

<script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js" mce_src="http://www.text2png.com/text_script.js"></script>
<script type="text/javascript" language="javascript">
text2png.onLoad = function(){
text2png.replaceTags('h1', 'h2');
};
</script>
<style>
h1 {font-family:'Harlow Solid Italic', Arial, Helvetica, sans-serif; font-size:28pt}
h2 {font-family:'Segoe Print', Arial, Helvetica, sans-serif; font-size:14pt}
</style>

Deze code wordt tussen de < head>- en < /head>-tag geplaatst. Op de plaats waar we nu de code van de replaceTags-functie hebben toegevoegd kunnen dus meerdere replace-regels komen te staan voor bijvoorbeeld tekst binnen een bepaalde html-tag die je in een ander lettertype wilt tonen. Op http://www.text2png.com/code_hosted.php kun je verdere uitleg in combinatie met voorbeelden vinden. Probeer vooral eens te spelen met de nodige 'options' die worden aangeboden. Succes!