Font zu Bild Auflistung

[Elli]

Hi,

seit 3 Tagen zerbreche ich mir mein Köpfchen wie ich sowas hinbekomme:

BEISPIEL

Einen Font in ein Bild zu verwandeln ist ja kein Problem,
aber das tabellarisch in  Kombination mit einer Standardschrift
fehlt mit ein vernünftiger Ansatz, denn viele Fonts unterscheiden sich
sich gehörig in den Abmessungen und so müsste die Tabelle sich ja auch anpassen, das gelingt mir nicht.

Dann hatte ich probiert jeden Buchstaben einzeln umzuwandeln und am Ende zusammenzufügen, aber das ist dann doch wie mit Kanonen auf Spatzen schiessen. Muss doch auch anders gehen, oder?

Gruss
Elli

[Jonathan]

Hallo Elli,

Welche Technik willst du denn benutzen? Man könnte z.B. für jede Zeile auf deinem Bild eine 2-Zeilige Tabelle erstellen und in die obere Zeile immer das alte Zeichen und in die untere Spalte das neue Zeichen einfügen. Das ganze dann per CSS stylen.

Die Tabelle kannst du händisch erstellen oder per Programmiersprache generieren lassen. Für ne neue Schriftart müsstest du dann nur die CSS-Definition ändern.

Jonathan

[Elli]

Hi Jon,

Welche Technik willst du denn benutzen? Man könnte z.B. für jede Zeile auf deinem Bild eine 2-Zeilige Tabelle erstellen und in die obere Zeile immer das alte Zeichen und in die untere Spalte das neue Zeichen einfügen. Das ganze dann per CSS stylen.

es geht mir nicht um eine Webseite, sondern um eine Bilderzeugung.
Ich wüsste also nicht wie ich hier etwas mit CSS erreichen könnte.

Allerdings der Ansatz jeden Buchstaben einzeln in eine Tabelle zu stecken, ja das sagt ich schon, das geht aber genau das will ich ja vermeiden,
anstatt der Generierung von 50 Bildern eben nur Eines.

Danke
Elli

[Jonathan]

Hallo Elli,

es geht mir nicht um eine Webseite, sondern um eine Bilderzeugung.
Ich wüsste also nicht wie ich hier etwas mit CSS erreichen könnte.

Erstelle diese Webseite und mach davon einen Screenshot. Es gibt genug Möglichkeiten, irgendwie wird mir nicht klar was du vorhast.

Jonathan

[Elli]

Hi Jon,

Erstelle diese Webseite und mach davon einen Screenshot. Es gibt genug Möglichkeiten, irgendwie wird mir nicht klar was du vorhast.

serverseitig (php, gd), also nix mit screenshot.

Gruss
Elli

[Jonathan]

Hallo Elli,

serverseitig (php, gd), also nix mit screenshot.

Dann benutz doch die gd-Funktionen zum Zeichnen der Tabelle und der Schrift. Da müsste es auch Funktionen geben im Buchstaben auszumessen. Du könntest dann z.B. in einer Schleife alle buchstaben ausmessen und die Spaltenbreite so festlegen, dass der breiteste Buchstabe noch reinpasst. Oder du passt die Spaltenbreite dynamisch an die Buchstabenbreite an.

Jonathan

[Elli]

Hi Jon,

die Idee mit dem breitesten Buchstaben hat was für sich,

danke
Elli

[EisFuX]

(Hallo|Hi(ho)|Tag) Elli,

seit 3 Tagen zerbreche ich mir mein Köpfchen wie ich sowas hinbekomme:

BEISPIEL

Einen Font in ein Bild zu verwandeln ist ja kein Problem,
aber das tabellarisch in  Kombination mit einer Standardschrift
fehlt mit ein vernünftiger Ansatz, denn viele Fonts unterscheiden sich
sich gehörig in den Abmessungen und so müsste die Tabelle sich ja auch anpassen, das gelingt mir nicht.
Dann hatte ich probiert jeden Buchstaben einzeln umzuwandeln und am Ende zusammenzufügen, aber das ist dann doch wie mit Kanonen auf Spatzen schiessen. Muss doch auch anders gehen, oder?

Klar geht das. PHP kennt dazu zwei Funktionen[1]:
Zum Schreiben imageTTFText() und zum Ermitteln der Textabmessungen imageGetTTFBBox(). Letztere erwartet (fast) die gleichen Argumente wie imageTTFText(), gibt aber ein Array zurück, aus dem man die Abmessungen des Textes (die "bounding box") berechnen kann. Leider sind die Werte des Arrays für den Anfänger etwas wirr belegt. Prinzipiell brauchst du nur zwei Werte, die Höhe und die Breite der Bounding Box:

  
$bb = imageTTFBBox($font_height, 0, $font_file, $text);  
$width  = $bb[4] - $bb[6]; // xpos: obere rechte Ecke - obere linke Ecke  
$height = $bb[1] - $bb[7]; // ypos: untere linke Ecke - obere linke Ecke  

Das kannst du für alle darzustellenden Texte benutzen -- auch für deine "Standardschrift". Außerdem solltest du beachten, dass bei Zeichenketten (also mehr als einzelnen Zeichen) die Gesamtbreite abweichen kann, von dem Wert, den die Addition der Einzelwerte ergeben könnte. Die Ursache dafür liegt in verschiedenen typografischen Phänomenen (u.A. Unterschneidungen ("kerning"), Ligaturen, Smoothing, usw.).

MffG
EisFuX

[1] Zumindest für TrueType- und OpenType-Fonts. Für andere Font-Typen gibts je nach GD-Lib-Version eventuell auch Unterstützung in der Liste der Grafikfunktionen.