Serving page as xhtml with revised script

It works! It’s even clickable!

If you’re too lazy to check out the source, the headings above are coded as:

<h1><a href="/misc/siir/"><b>Serving page as xhtml with revised script</b></a></h1>
<h3>It works! It’s even clickable!</h3>

That was fun, no? But we’re not done yet! I want you to take a close look at the generated image(s) (no, not on this page — your test page!): Are the topmost parts of the letters/characters slightly lopped off? It seems that some fonts give you this result. To remedy this, we add a new setting, offset_baseline, for the elements array in both JavaScript files, for example:

settings["h1"]["offset_baseline"] = 3;	// Offset font baseline by this much (keeps the tops of rendered characters from being lopped off)

Do this for the rest of the other elements, making sure to change the element name (hn) accordingly. I suggest an initial value of 0 or 1, so you can see just how much you need to offset your particular font’s baseline by. (And before you write in to say this fix didn’t work when you upped the value(s), go empty your cache folder and try again.)

Now find this line:

    document[elementid].src = path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&text='+text;

and replace it with this:

    document[elementid].src = path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&offset_baseline='+settings[current_element]["offset_baseline"]+'&text='+text;

Okay, pay attention: In external.js — and only there — replace:

   pasteHTML += '<img class="'+current_element+'" id="'+current_element+'_'+i+'" name="'+current_element+'_'+i+'" src="'+path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&text='+settings[current_element]["text"]+'" title="'+unescape(settings[current_element]["text"])+'" alt="'+unescape(settings[current_element]["text"])+'"  />';

with:

   pasteHTML += '<img class="'+current_element+'" id="'+current_element+'_'+i+'" name="'+current_element+'_'+i+'" src="'+path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&offset_baseline='+settings[current_element]["offset_baseline"]+'&text='+settings[current_element]["text"]+'" title="'+unescape(settings[current_element]["text"])+'" alt="'+unescape(settings[current_element]["text"])+'"  />';

Now open external_moz.js and replace:

   url = ''+path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&text='+settings[current_element]["text"]+'';

with:

   url = ''+path+'generate.php?action=display&w='+settings[current_element]["w"]+'&h='+settings[current_element]["h"]+'&padding='+settings[current_element]["padding"]+'&transparentbg='+settings[current_element]["transparentbg"]+'&bgcolor='+settings[current_element]["bgcolor"]+'&font_color='+settings[current_element]["font_color"]+'&shadow_color='+settings[current_element]["shadow_color"]+'&font_file='+settings[current_element]["font_file"]+'&font_size='+settings[current_element]["font_size"]+'&antialias='+settings[current_element]["antialias"]+'&offset_baseline='+settings[current_element]["offset_baseline"]+'&text='+settings[current_element]["text"]+'';

Getting there, getting there…

Now open generate.php; near the top of the script, under the required image elements, add var $offset_baseline. Then under the SIIR class constructor, add $this->offset_baseline = $_REQUEST[offset_baseline]. It should look something like this:

class siir {
 /* Required image elements */
 ...
 ...
 var $antialias;
 var $offset_baseline;
 ...
 ...
 // SIIR class constructor
 function siir() {
  ...
  ...
  $this->antialias = $_REQUEST[antialias];
  $this->offset_baseline = $_REQUEST[offset_baseline];

Now find this piece of code:

/* Create text shadow */
  if ($this->imShadowColor != "")
    imageTTFText($this->im,($this->font_size/81*64),0,(($this->padding/2)+1),(($this->font_size-$this->dip)+2),$this->imShadowColor,$this->font_file,$this->text);

/* Create truetype text */
    imageTTFText($this->im,($this->font_size/81*64),0,($this->padding/2),(($this->font_size-$this->dip)+1),$this->imFontColor,$this->font_file,$this->text);

and replace it with this:

/* Create text shadow */
  if ($this->imShadowColor != "")
    imageTTFText($this->im,($this->font_size/81*64),0,(($this->padding/2)+1),(($this->font_size-$this->dip)+($this->offset_baseline+1)),$this->imShadowColor,$this->font_file,$this->text);

/* Create truetype text */
    imageTTFText($this->im,($this->font_size/81*64),0,($this->padding/2),(($this->font_size-$this->dip)+$this->offset_baseline),$this->imFontColor,$this->font_file,$this->text);

And now we’re really done! Empty your cache folder and reload your test page.

(One last caveat: If you are using a font with really exaggerated ascenders and descenders — in most cases, cursive — this fix may not be enough. Assigning a large value to offset_baseline may get the top part to display correctly, but with the unfortunate effect of lopping off the bottom. I suggest you play around with the padding and font_size values as well. Or you could opt for a more cooperative font. But you wouldn’t, would you? ;p)

Feel free to contact me with your comments or questions.

SIIR Test: About | As text/html | As application/xhtml+xml

A fix is also available for: Dynamic Text Replacement & application/xhtml+xml