PHP imagefontwidth() Function: Textbreite berechnen

Ein Skript baut zu jedem Beitrag ein Vorschaubild und soll den Titel mittig hineinsetzen. Die Schwierigkeit ist nicht das Zeichnen, sondern die Startkoordinate: Sie muss feststehen, bevor irgendetwas auf das Bild kommt, und sie hängt davon ab, wie breit der Titel ausfällt. Genau diese Zahl liefert PHP imagefontwidth, und zwar ohne Schriftdatei und ohne Zusatzpaket. Wie ein Bild entsteht und wie Farben angelegt werden, steht im Tutorial zur GD-Bibliothek. Gemessen wird hier, gezeichnet erst danach.

Fünf gleich breite Zeichenkästen ergeben eine Multiplikation, keine Summe. Was PHP imagefontwidth() dafür zurückgibt, klärt der erste Abschnitt.

Was PHP imagefontwidth() liefert

Die Funktion gibt die Breite eines einzelnen Zeichens in Pixeln zurück, mehr nicht. Das klingt wenig, reicht aber für jede Anordnungsrechnung, weil die eingebauten GD-Schriften dicktengleich sind: Jedes Zeichen belegt dieselbe Zeichenzelle, ein i genauso viel wie ein W. Deshalb ist die Breite eines ganzen Textes das Produkt aus Zeichenbreite und Zeichenanzahl, und deshalb gibt es diese Funktion in dieser knappen Form überhaupt.

<?php

$schrift = 4;

$text    = 'Auslastung';



$je    = imagefontwidth($schrift);

$hoch  = imagefontheight($schrift);

$breit = $je * strlen($text);



echo $je, ' x ', $hoch, ', Text ', $breit, ' px';

/* 8 x 16, Text 80 px */

Die 80 Pixel sind kein Schätzwert. Zeichnet man dasselbe Wort mit imagestring() und misst die belegte Fläche nach, verbraucht der Text genau diesen Vorschub. Die sichtbare Tinte fällt mit 78 Pixeln etwas schmaler aus, weil die letzte Zeichenzelle rechts einen Leerstreifen trägt. Für die Anordnung ist der Vorschub der richtige Wert, denn er beschreibt den Platz, den der Text beansprucht.

Syntax, Parameter und Rückgabewert im Original

<?php

imagefontwidth(GdFont|int $font): int

imagefontheight(GdFont|int $font): int



/* font: one of the five built-in fonts,

   numbered 1 to 5, or a font object that

   imageloadfont() has returned



   returns the width, or the height, of one

   single character of that font, in pixels



   the parameter type is GdFont|int since

   PHP 8.0; before that it was resource|int */

Der Block nennt ein Gegenstück mit derselben Signatur, imagefontheight(), und beide arbeitet man fast immer gemeinsam ab. Der Parameter ist eine Nummer und kein Maß: Von einer Schriftgröße in Punkt zu sprechen wäre hier falsch, die eingebauten Schriften haben eine fest eingebackene Pixelgröße. Seit PHP 8.0 nimmt PHP imagefontwidth() zusätzlich ein GdFont-Objekt entgegen, wo vorher ein Handle stand.

Die Maße der fünf eingebauten Schriften

Die Maße stehen nirgends in einer Konstanten, man muss sie erfragen. Eine Schleife über die fünf Nummern genügt dafür und liefert auf PHP 8.4.8 mit der gebündelten GD 2.1.0 die Werte aus der Tabelle darunter.

<?php

for ($f = 1; $f <= 5; $f++) {

    printf(

        "Schrift %d: %d x %d\n",

        $f,

        imagefontwidth($f),

        imagefontheight($f)

    );

}

Die Reihe wächst nicht gleichmäßig, und das ist der Punkt, an dem die meisten danebengreifen. Schrift 4 ist mit 16 Pixeln höher als Schrift 5 mit 15 Pixeln, obwohl Schrift 5 breiter ist. Wer die 5 wählt, weil es groß werden soll, bekommt die flachere Schrift. Schrift 2 und 3 sind gleich hoch und unterscheiden sich nur in der Breite. Die Nummerierung ist also eine Liste, keine Größenskala.

Dazu kommt eine stille Fehlerquelle. Eine ungültige Schriftnummer löst weder Warnung noch Ausnahme aus, sondern fällt auf eine benachbarte Schrift zurück. Wer die Nummer aus einer Konfigurationsdatei liest, bekommt bei einem Tippfehler stillschweigend ein anderes Ergebnis.

<?php

foreach ([0, 6, 7, 99] as $f) {

    echo $f, ': ', imagefontwidth($f), ' x ',

        imagefontheight($f), "\n";

}

/* 0: 5 x 8    6: 9 x 15

   7: 9 x 15  99: 9 x 15 */

Erst messen, dann zeichnen

Die übliche Reihenfolge lautet: Bild anlegen, Text daraufsetzen, Position nachbessern, bis es passt. Mit PHP imagefontwidth() dreht sie sich um. Zuerst steht die Zeichenbreite fest, daraus die Textbreite, daraus die Position, und erst danach wird gezeichnet. Jede der drei Ausrichtungen weiter unten ist derselbe Ablauf mit einer anderen letzten Zeile.

flowchart TD
    A[Schrift wählen] --> B[Breite je Zeichen]
    B --> C[Zeichen zählen]
    C --> D[Textbreite]
    D --> E{Passt ins Bild?}
    E -- ja --> F[Position rechnen]
    E -- nein --> G[Kürzen oder Schrift 1]
    F --> H[Text zeichnen]
    G --> H

Text mittig und rechtsbündig setzen

Mittig bedeutet: Der Rest der Bildbreite wird halbiert und links davon abgezogen. intdiv() ist hier die passende Division, weil Koordinaten ganze Zahlen sind und eine Gleitkommazahl im Aufruf nur eine stille Umwandlung nach sich zieht. Die senkrechte Mitte wird gern vergessen, sie rechnet sich genauso über die Schrifthöhe.

<?php

$schrift = 4;

$text    = 'Auslastung';

$bild    = imagecreatetruecolor(300, 60);

$weiss   = imagecolorallocate($bild, 255, 255, 255);

$tinte   = imagecolorallocate($bild, 0, 0, 0);

imagefilledrectangle($bild, 0, 0, 299, 59, $weiss);



$breit = imagefontwidth($schrift) * strlen($text);

$x = intdiv(300 - $breit, 2);   /* 110 */

$y = intdiv(60 - imagefontheight($schrift), 2);



imagestring($bild, $schrift, $x, $y, $text, $tinte);

Nachgemessen sitzt das Wort danach mit 111 Pixeln Rand links und 111 Pixeln Rand rechts im Bild. Die Rechnung geht also auf das Pixel genau auf, und zwar ohne Korrekturfaktor. Wer ein Logo oder eine Beschriftung über ein vorhandenes Foto legen will, arbeitet mit genau dieser Rechnung aus PHP imagefontwidth(); das Tutorial zu Wasserzeichen mit GD zeigt den Fall an einem fertigen Beispiel.

Rechtsbündig ist dieselbe Rechnung von der anderen Seite: Die Textbreite wird von der gewünschten rechten Kante abgezogen. Gebraucht wird das bei Zahlen mit unterschiedlicher Stellenzahl, die sonst wie hingeworfen untereinanderstehen.

<?php

$schrift = 3;

$rechts  = 150;

$y       = 10;



foreach ([7, 42, 1350] as $zahl) {

    $t = (string) $zahl;

    $b = imagefontwidth($schrift) * strlen($t);

    $x = $rechts - $b;

    imagestring($bild, $schrift, $x, $y, $t, $tinte);

    $y += imagefontheight($schrift) + 3;

}

/* x wird 143, dann 136, dann 122 */

Dieselbe Rechnung trägt die Beschriftung einer Diagrammachse. Wie die Fläche entsteht, die hier beschriftet wird, zeigt das Tutorial zu imagearc().

Die Leinwand an den Text anpassen

Bis hierher war das Bild vorgegeben und der Text musste hineinpassen. Der umgekehrte Fall ist der eigentliche Kerngedanke: Erst steht der Text fest, dann wird die Leinwand daraus abgeleitet. Das ergibt Knöpfe, Marken und Beschriftungsfahnen ohne leeren Rand und ohne abgeschnittene Buchstaben. Gemessen wird wieder mit PHP imagefontwidth() und imagefontheight(), dazu kommt ein Innenabstand auf beiden Seiten.

<?php

$schrift = 4;

$text    = 'Systemlast';

$rand    = 12;



$breite = imagefontwidth($schrift) * strlen($text)

    + 2 * $rand;

$hoehe = imagefontheight($schrift) + 2 * $rand;



$bild = imagecreatetruecolor($breite, $hoehe);

/* 104 x 40 Pixel */

Ein Nebeneffekt fällt sofort auf: Das Bild bleibt klein. Bei einem Beschriftungsfeld sind das 104 mal 40 Pixel statt eines pauschalen Kastens von 300 mal 60, und die Datei schrumpft entsprechend. Wechselt später die Schriftnummer, zieht die Leinwand automatisch mit.

Zeilenabstand mit imagefontheight()

Bei mehreren Zeilen braucht es einen Schritt in senkrechter Richtung. Ein fest notierter Wert wie 14 ist verlockend und geht schief, sobald jemand die Schrift wechselt: Bei Schrift 2 stehen die Zeilen dann zu weit auseinander, bei Schrift 4 überlappen sie. Richtig ist die Schrifthöhe plus einem festen Durchschuss von zwei bis vier Pixeln. Hier rechnet die Schrifthöhe, nicht die Zeichenbreite.

<?php

$schrift = 2;

$zeilen  = ['Server A', 'Server B', 'Server C'];

$schritt = imagefontheight($schrift) + 3;

$y = 10;



foreach ($zeilen as $zeile) {

    imagestring($bild, $schrift, 10, $y, $zeile, $t);

    $y += $schritt;

}

/* Schritt: Schrift 2 = 16 px, Schrift 4 = 19 px */

Praktisch nützlich ist noch die Gegenprobe: Passt ein Text überhaupt in eine vorgegebene Breite? Auch das ist eine Division, und als Rückfallebene bietet sich Kürzen an. Die Funktion unten liefert 'Sehr langer...' für einen Titel, der in 100 Pixel bei Schrift 3 nicht hineinpasst.

<?php

function passtEin(

    string $text,

    int $schrift,

    int $maxBreite

): string {

    $je  = imagefontwidth($schrift);

    $max = intdiv($maxBreite, $je);



    if (mb_strlen($text, 'UTF-8') <= $max) {

        return $text;

    }



    return mb_substr($text, 0, $max - 3) . '...';

}

Umlaute verfälschen die Breitenrechnung

strlen() zählt Bytes, nicht Zeichen, und in UTF-8 belegt ein Umlaut zwei Byte. Am Wort Größe mit Schrift 4 nachgerechnet liefert strlen() eine 7 und mb_strlen() eine 5. Aus der Multiplikation mit PHP imagefontwidth() werden damit 56 statt 40 Pixel, die Rechnung liegt 40 Prozent zu hoch, und der vermeintlich mittige Text sitzt sichtbar zu weit links.

<?php

$wort    = 'Größe';

$schrift = 4;



echo strlen($wort);              /* 7 Byte */

echo mb_strlen($wort, 'UTF-8');  /* 5 Zeichen */



echo imagefontwidth($schrift) * strlen($wort);

/* 56 px, auf Bytes gerechnet */

echo imagefontwidth($schrift) * mb_strlen($wort);

/* 40 px, auf Zeichen gerechnet */

Es gibt zwei Auswege, und nur einer taugt. Man kann mit mb_strlen($text, 'UTF-8') messen, dann stimmt die Breite. Gezeichnet wird der Umlaut aber trotzdem falsch, weil die eingebauten Schriften byteweise arbeiten und mit dem ersten Byte einer UTF-8-Folge nichts anfangen können. Der richtige Weg ist deshalb, die Zeichenkette vor dem Messen und vor dem Zeichnen umzuwandeln. Danach stimmen Breite und Darstellung gleichermaßen, denn alle fünf eingebauten Schriften tragen Glyphen für die deutschen Sonderzeichen.

<?php

$iso = mb_convert_encoding(

    $wort, 'ISO-8859-1', 'UTF-8'

);



echo strlen($iso);  /* 5 */

$breit = imagefontwidth($schrift) * strlen($iso);

imagestring($bild, $schrift, 10, 5, $iso, $tinte);

Geladene Schriften und die Grenze zu TrueType

Der Parameter nimmt nicht nur die Nummern 1 bis 5 entgegen, sondern auch ein Schriftobjekt aus imageloadfont(). Die Messfunktionen arbeiten damit unverändert weiter: An einer selbst erzeugten Bitmap-Schrift im Format 8 mal 8 liefert PHP imagefontwidth() eine 8 und imagefontheight() ebenfalls eine 8. Alle Rechnungen aus diesem Tutorial gelten damit unverändert. Wie eine solche Schriftdatei aufgebaut ist und wie man sich eine erzeugt, steht im Tutorial zu imagechar().

<?php

$eigen = imageloadfont('schrift8x8.gdf');



if ($eigen === false) {

    throw new RuntimeException('Schrift fehlt');

}



echo imagefontwidth($eigen);   /* 8 */

echo imagefontheight($eigen);  /* 8 */

Bei TrueType endet die Zuständigkeit von PHP imagefontwidth(). imagettftext() zeichnet mit echten Schriftdateien, und dort ist jedes Zeichen unterschiedlich breit. Eine Multiplikation gibt es deshalb nicht; gemessen wird mit imagettfbbox(), das statt einer Zahl acht Koordinaten eines umschließenden Rechtecks liefert. Dafür muss die Schriftdatei auf dem Zielsystem liegen, was bei einem Umzug gern vergessen wird.

<?php

$datei  = '/pfad/zu/DejaVuSans.ttf';

$kasten = imagettfbbox(14, 0, $datei, 'Auslastung');



$breit = $kasten[2] - $kasten[0];

Die Faustregel ist kurz: Solange der Text kurz ist und grob aussehen darf, ist die eingebaute Schrift die einfachere Wahl, weil nichts mitgeliefert werden muss. Sobald Schriftart, Größe oder saubere Kanten eine Rolle spielen, führt kein Weg an TrueType vorbei.

Fazit

Der eigentliche Gewinn von PHP imagefontwidth() ist nicht die Zahl, sondern die umgedrehte Reihenfolge. Wer erst misst und dann zeichnet, braucht keine Probeausgaben und keine handgesetzten Korrekturwerte. Mittig, rechtsbündig und passende Leinwand sind dabei dieselbe Rechnung mit anderem Vorzeichen. Zwei Punkte sollte man sich merken: Die Schriftnummern sind keine Größenskala, denn Schrift 4 ist höher als Schrift 5, und bei deutschen Texten gehört die Umwandlung nach ISO-8859-1 vor jede Rechnung mit PHP imagefontwidth().