imagettfbbox - einheitliche Grundlinie schaffen

Zergling-new · 30.05.2007, 20:06

Hallo,
ich grübel gerade wie ich alle Buchstaben einer Schrift in einem Bild einheitlich an der Grundlinie ausrichte.
Leider ergeben sich einige Schwierigkeiten mit Buchstaben die unter die Grundlinie kommen, wie das g oder welche, die deutlich größer sind als Versalien, Ä im Gegensatz zu A also.

Ohne Ä oder Buchstaben die größer als normale Versalien sind klappt das eigentlich gut - habe mich dazu aus den User-Notes bedient, speziell imagettfbboxextended(). Auch die Funktion fontBaselineOffset() ist scheinbar geeignet, berechnet mir für "Ähm" und "Apfel" jedoch den gleichen Wert, was nicht sinnvoll ist.

http://www.bilder-speicher.de/070530....vollbild.html

Gibts Ideen?

Edit: Achso der Quellcode-Ausschnitt:

PHP-Code:

  <?php

class TextGenerator

{

    var $_text    = null;

    var $_options = null;

    

    function TextGenerator($text, $options = array())

    {

        $this->_text    = trim($text);

        

        require_once dirname(__FILE__) . '/TextGeneratorOptions.php';

        $this->_options = new TextGeneratorOptions($options);

    }

 
    function html()

    {

        $cacheFile = $this->_getCacheFile();

        $size      = $this->_calculateFontDimension();

        if (!$this->_options->get('cache') || !file_exists($cacheFile)) {

            $resource = imageCreate($size['width'], $size['height']);

            

            $bgColor = $this->_options->get('background-color');

            imageColorAllocate($resource, $bgColor->red(), $bgColor->green(), $bgColor->blue());

            

            $color = $this->_options->get('color');

            $textColor = imageColorAllocate($resource, $color->red(), $color->green(), $color->blue());    

            

            imageTtfText($resource, $this->_options->get('font-size'), 0, $size['x'], $size['y'],

                         $textColor * ($this->_options->get('text-antialias') ? 1 : -1),

                         $this->_options->get('font-file'), $this->_text);

            imagePng($resource, $cacheFile);

        }

        $style = $this->_options->get('style');

        $style = empty($style) ? '' : sprintf(' style="%s"', $style);

        return sprintf('[img]%s[/img]',

                       $this->_text, $this->_text, $size['height'], $size['width'], $cacheFile, $style);

    }

    

    function _getCacheFile()

    {

        $cachePath = rtrim($this->_options->get('cache-path'), '/\\') . '/';

        return $cachePath

            . trim(preg_replace('#[^a-z0-9]#i', '-', $this->_text), '-')

            . '_' . md5($this->_text . serialize($this->_options))

            . '.png';

    }

    

    function _calculateFontDimension()

    {

        require_once dirname(__FILE__) . '/../functions/imageTtfbBoxExtended.php';

        /**

         * versuchen die Höhe des größt-möglichen Buchstabens bzw. der Kombination derer zu berechnen

         */

        $virtualHeight = $baselineOffset = 0;

        if ($this->_options->get('virtual-height')) {

            $virtSize = imageTtfbBoxExtended($this->_options->get('font-size'),

                                        0,

                                        $this->_options->get('font-file'),

                                        'ÄÖÜß?!AJLMYWabdfghjklpqry019`@$^&*(,'); // representative string

            $virtHeight = $virtSize['height'];

            

        }

    

        $realSize = imageTtfbBoxExtended($this->_options->get('font-size'),

                                     0,

                                     $this->_options->get('font-file'),

                                     $this->_text);

        $baselineOffset = abs((abs($virtSize[5]) + abs($virtSize[1])) - (abs($realSize[5]) + abs($realSize[1])));

        var_dump($baselineOffset);

        #$realSize['y'] += $baselineOffset;

        $realSize['height'] = max($virtHeight, $realSize['height']);

        return $realSize;

    }

}

?>

Zergling-new · 30.05.2007, 20:48

Eigentlich ist ja die Oberkante des Bildes (fast, aber zumindest konstant fast) die Grundlinie

Edit2: Kinners ich bin ein Gott, ich habs

Schönen Feierabend noch.

JumperII · 30.05.2007, 20:57

Hallo,

Sinnvollerweise ist die Ausrichtung am unteren Ende. Aber wie man es umsetzt, ist im prinzip egal.

Das Basis-Problem ist erst einmal die zu verwendende Schriftart. Hier ergibt sich die Messwerte und die Einheitlichkeit. Hinzu kommt natürlich der tatsächlich zu verwendende Zeichensatz-Set als Untermenge der verfügbaren Zeichen.

Strategie 1: Man sucht (bei GroßSchreibung) alle Zeichen mit Überlänge (ÄÖÜ?) und gebe diesen einen zusätzlichen Offset. Anschließend kann der berechnete Wert inkl. Offset bei Vorkommen von Zeichen mit Überlänge berechnen.

Strategie 2: Analog Strategie 1, wobei alle Zeichen mit Strichen unterhalb der Basis-Linie bewertet werden.

Strategie 3: Analog Strategie 2, wobei alle Zeichen ohne Linien unterhalb der Basislinie berücksichtigt werden, um den text nach oben zu schieben

Option 1: Zur Berechnung des Offset wird für jedes einzelne, betroffene Zeichen der Offset-Wert bestimmt. Der Gesamt-Offset-Wert für einen text ergibt sich dann aus aus Minimum bzw. Maximum entsprechender Offsets.

Sauberer wäre natürlich eine entsprechende Funktion

Gruß,
Jumper, the II.

30.05.2007, 22:52

Hmm, irgendwie hab ich mich gewundert was hier als Grundlinie gedacht war.
Unabhängig davon ist dies rausgekommen:
http://www.cix88.de/cix_php/php_graf...ausrichten.php

Zergling-new · 31.05.2007, 12:11

Warum machst du das ganze denn zeichenweise?

So siehts momentan aus:

PHP-Code:

  <?php

function _calculateFontDimension()

    {

        require_once dirname(__FILE__) . '/../functions/imageTtfbBoxExtended.php';

        /**

         * versuchen die Höhe des größt-möglichen Buchstabens bzw. der Kombination derer zu berechnen

         */

        $virtSize = array('height' => 0, 7 => 0);

        if ($this->_options->get('virtual-height')) {

            $virtSize = imageTtfbBox($this->_options->get('font-size'),

                                        0,

                                        $this->_options->get('font-file'),

                                        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz,.!?-\'"()[]%§/01234567890ÄÖÜäöüß');

            $virtSize['height'] = $virtSize[1] - $virtSize[7];

        }

    

        $realSize = imageTtfbBox($this->_options->get('font-size'),

                                 0,

                                 $this->_options->get('font-file'),

                                 $this->_text);

        $realSize['height'] = max($realSize[1] - $realSize[7], $virtSize['height']) - 1;

        $realSize['width']  = $realSize[4] - $realSize[6];

        $realSize['x']      = (max($realSize[0], $realSize[6]) * -1) - 1;

        $realSize['y']      = abs(min($realSize[7], $virtSize[7])) - 1;

        #var_dump($realSize);

        return $realSize;

    }

?>

31.05.2007, 13:10

Zitat:

Warum machst du das ganze denn zeichenweise?

Um besser den Offset bzw. die optische Verschiebung vom einzelnen Zeichen bestimmen zu können, ohne dabei irgendwas abschätzen zu müssen.
Jedenfalls war das mein erster Gedanke, um auch andere exotische Schriftarten problemlos einsetzen zu können.

Zergling-new · 31.05.2007, 15:18

Das Ergebnis auf deiner Seite ist ja doch aber falsch.

Wie hoch ist denn der Rechenaufwand für imageTtfbBox()? Hast du damit Erfahrungen? Ich wollte eventuell Berechnungs-Ergebnisse dieser Funktion für eine Schrift und Schriftgröße zusätzlich cachen.

JumperII · 31.05.2007, 17:12

Ich verstehe es trotzdem nicht.

imageTtfText richtet sich grundsätzlich an der Baseline des Fonts aus. d.h. der mit $y bestimmte Wert bildet die Baseline.

Was jetzt noch fehlt, wäre die Höhe zur TopLine und zur BottomLine.

Mit der (hoffentlich) freundlichen Erlaubnis von Cix88 habe ich mal das PHP etwas umgeschrieben. Der Kernfunktion textBox liefert jetzt als Ergebnis Länge, Höhe, (Höhendifferenz Top-Line zur BaseLine), (Höhendifferenz Bottom-Line zur BaseLine). Zur besseren Anschauung habe ich aus der BaseLine und der Funktion die Top- und Bottom-Line mit berechnet.

http://jumper2.marsoftware.de/font_line/font_line.php

/Edit:
Besser wäre es natürlich, man hätte eine Funktion, die die entsprechenden Werte direkt aus einer TTF-Datei lesen würde.
Gruß,
Jumper, the II.

31.05.2007, 18:11

Irgendwie müsste mal geklärt werden, wer was als Grundlinie bezeichnet.
Eigentlich ist die Schrift schon einer Linie ausgerichtet, und bedarf keiner weiteren Funktionen.

Mein Script beruht darauf, dass mir nicht klar war (ist) von welcher Linie hier die Rede ist

(das Beispiel von Zergling hat nicht völlig fertig gemacht)
Und an welcher Linie was ausgerichtet werden soll.
Deswegen sicher mein Koas-Script

@JumperII
Jo genau, so verstehe ich das auch

Zitat:

Wie hoch ist denn der Rechenaufwand für imageTtfbBox()? Hast du damit Erfahrungen?

Das kann ich dir leider auch nicht sagen.
Da ich bisher nie Schriften so weit oben oder unten in Bilder gesetzt habe, dass dann Teil dieser nicht zu sehen sind.

Zitat:

die entsprechenden Werte direkt aus einer TTF-Datei lesen

Hmmm, aus Experimente mit FPDF weis ich, dass hier die Metric enthalten ist, aber auch die Verschiebung der einzelnen Buchstaben ?
Siehe: http://cix88.mediacix.de/galerie_b/pic_83

JumperII · 31.05.2007, 20:56

Also die Baseline ist die Grundlinie und setzt vereinfacht erklärt am unteren Zeichenende vom Zeichen 'a' an. Typischerweise wird diese Baseline in der Funktion imageTtfText zur Orientierung verwendet (Anwendung von Zeichensätze).

Im TTF wird die Baseline durch das Y-Offset der Positionierung eines Zeichens definiert. in Verbindung mit der eigentlichen Zeichengröße können so auch weitere Werte direkt ermittelt werden.

Im Übrigen ist im TTF auch Mapping und Kerning enthalten, also die Seitenabstände zu anderen Zeichen unter Berücksichtigung spezieller Elemente.
Gut erkennbar, wenn man die Strings zeichenweise setzt versus als Zeichenkette setzen lässt. Bei einigen Zeichen wird beim Einzelzeichen setzen der Abstand zwischen zwei Zeichen gößer sein.

Gruß,
Jumper, the II.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

30.05.2007, 20:06
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	imagettfbbox - einheitliche Grundlinie schaffen Hallo, ich grübel gerade wie ich alle Buchstaben einer Schrift in einem Bild einheitlich an der Grundlinie ausrichte. Leider ergeben sich einige Schwierigkeiten mit Buchstaben die unter die Grundlinie kommen, wie das g oder welche, die deutlich größer sind als Versalien, Ä im Gegensatz zu A also. Ohne Ä oder Buchstaben die größer als normale Versalien sind klappt das eigentlich gut - habe mich dazu aus den User-Notes bedient, speziell imagettfbboxextended(). Auch die Funktion fontBaselineOffset() ist scheinbar geeignet, berechnet mir für "Ähm" und "Apfel" jedoch den gleichen Wert, was nicht sinnvoll ist. http://www.bilder-speicher.de/070530....vollbild.html Gibts Ideen? Edit: Achso der Quellcode-Ausschnitt: PHP-Code: <?php class TextGenerator { var $_text = null; var $_options = null; function TextGenerator($text, $options = array()) { $this->_text = trim($text); require_once dirname(__FILE__) . '/TextGeneratorOptions.php'; $this->_options = new TextGeneratorOptions($options); } function html() { $cacheFile = $this->_getCacheFile(); $size = $this->_calculateFontDimension(); if (!$this->_options->get('cache') \|\| !file_exists($cacheFile)) { $resource = imageCreate($size['width'], $size['height']); $bgColor = $this->_options->get('background-color'); imageColorAllocate($resource, $bgColor->red(), $bgColor->green(), $bgColor->blue()); $color = $this->_options->get('color'); $textColor = imageColorAllocate($resource, $color->red(), $color->green(), $color->blue()); imageTtfText($resource, $this->_options->get('font-size'), 0, $size['x'], $size['y'], $textColor * ($this->_options->get('text-antialias') ? 1 : -1), $this->_options->get('font-file'), $this->_text); imagePng($resource, $cacheFile); } $style = $this->_options->get('style'); $style = empty($style) ? '' : sprintf(' style="%s"', $style); return sprintf('[img]%s[/img]', $this->_text, $this->_text, $size['height'], $size['width'], $cacheFile, $style); } function _getCacheFile() { $cachePath = rtrim($this->_options->get('cache-path'), '/\\') . '/'; return $cachePath . trim(preg_replace('#[^a-z0-9]#i', '-', $this->_text), '-') . '_' . md5($this->_text . serialize($this->_options)) . '.png'; } function _calculateFontDimension() { require_once dirname(__FILE__) . '/../functions/imageTtfbBoxExtended.php'; /** * versuchen die Höhe des größt-möglichen Buchstabens bzw. der Kombination derer zu berechnen / $virtualHeight = $baselineOffset = 0; if ($this->_options->get('virtual-height')) { $virtSize = imageTtfbBoxExtended($this->_options->get('font-size'), 0, $this->_options->get('font-file'), 'ÄÖÜß?!AJLMYWabdfghjklpqry019`@$^&(,'); // representative string $virtHeight = $virtSize['height']; } $realSize = imageTtfbBoxExtended($this->_options->get('font-size'), 0, $this->_options->get('font-file'), $this->_text); $baselineOffset = abs((abs($virtSize[5]) + abs($virtSize[1])) - (abs($realSize[5]) + abs($realSize[1]))); var_dump($baselineOffset); #$realSize['y'] += $baselineOffset; $realSize['height'] = max($virtHeight, $realSize['height']); return $realSize; } } ?>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

30.05.2007, 20:48
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Eigentlich ist ja die Oberkante des Bildes (fast, aber zumindest konstant fast) die Grundlinie Edit2: Kinners ich bin ein Gott, ich habs Schönen Feierabend noch.

30.05.2007, 20:57
JumperII Erfahrener Benutzer Registriert seit: 26.07.2006 Beiträge: 121	Hallo, Sinnvollerweise ist die Ausrichtung am unteren Ende. Aber wie man es umsetzt, ist im prinzip egal. Das Basis-Problem ist erst einmal die zu verwendende Schriftart. Hier ergibt sich die Messwerte und die Einheitlichkeit. Hinzu kommt natürlich der tatsächlich zu verwendende Zeichensatz-Set als Untermenge der verfügbaren Zeichen. Strategie 1: Man sucht (bei GroßSchreibung) alle Zeichen mit Überlänge (ÄÖÜ?) und gebe diesen einen zusätzlichen Offset. Anschließend kann der berechnete Wert inkl. Offset bei Vorkommen von Zeichen mit Überlänge berechnen. Strategie 2: Analog Strategie 1, wobei alle Zeichen mit Strichen unterhalb der Basis-Linie bewertet werden. Strategie 3: Analog Strategie 2, wobei alle Zeichen ohne Linien unterhalb der Basislinie berücksichtigt werden, um den text nach oben zu schieben Option 1: Zur Berechnung des Offset wird für jedes einzelne, betroffene Zeichen der Offset-Wert bestimmt. Der Gesamt-Offset-Wert für einen text ergibt sich dann aus aus Minimum bzw. Maximum entsprechender Offsets. Sauberer wäre natürlich eine entsprechende Funktion Gruß, Jumper, the II.

30.05.2007, 22:52
CIX88 Gast Beiträge: n/a	Hmm, irgendwie hab ich mich gewundert was hier als Grundlinie gedacht war. Unabhängig davon ist dies rausgekommen: http://www.cix88.de/cix_php/php_graf...ausrichten.php

31.05.2007, 12:11
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Warum machst du das ganze denn zeichenweise? So siehts momentan aus: PHP-Code: <?php function _calculateFontDimension() { require_once dirname(__FILE__) . '/../functions/imageTtfbBoxExtended.php'; /** * versuchen die Höhe des größt-möglichen Buchstabens bzw. der Kombination derer zu berechnen / $virtSize = array('height' => 0, 7 => 0); if ($this->_options->get('virtual-height')) { $virtSize = imageTtfbBox($this->_options->get('font-size'), 0, $this->_options->get('font-file'), 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz,.!?-\'"()[]%§/01234567890ÄÖÜäöüß'); $virtSize['height'] = $virtSize[1] - $virtSize[7]; } $realSize = imageTtfbBox($this->_options->get('font-size'), 0, $this->_options->get('font-file'), $this->_text); $realSize['height'] = max($realSize[1] - $realSize[7], $virtSize['height']) - 1; $realSize['width'] = $realSize[4] - $realSize[6]; $realSize['x'] = (max($realSize[0], $realSize[6]) -1) - 1; $realSize['y'] = abs(min($realSize[7], $virtSize[7])) - 1; #var_dump($realSize); return $realSize; } ?>

31.05.2007, 15:18
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Das Ergebnis auf deiner Seite ist ja doch aber falsch. Wie hoch ist denn der Rechenaufwand für imageTtfbBox()? Hast du damit Erfahrungen? Ich wollte eventuell Berechnungs-Ergebnisse dieser Funktion für eine Schrift und Schriftgröße zusätzlich cachen.

31.05.2007, 17:12
JumperII Erfahrener Benutzer Registriert seit: 26.07.2006 Beiträge: 121	Ich verstehe es trotzdem nicht. imageTtfText richtet sich grundsätzlich an der Baseline des Fonts aus. d.h. der mit $y bestimmte Wert bildet die Baseline. Was jetzt noch fehlt, wäre die Höhe zur TopLine und zur BottomLine. Mit der (hoffentlich) freundlichen Erlaubnis von Cix88 habe ich mal das PHP etwas umgeschrieben. Der Kernfunktion textBox liefert jetzt als Ergebnis Länge, Höhe, (Höhendifferenz Top-Line zur BaseLine), (Höhendifferenz Bottom-Line zur BaseLine). Zur besseren Anschauung habe ich aus der BaseLine und der Funktion die Top- und Bottom-Line mit berechnet. http://jumper2.marsoftware.de/font_line/font_line.php /Edit: Besser wäre es natürlich, man hätte eine Funktion, die die entsprechenden Werte direkt aus einer TTF-Datei lesen würde. Gruß, Jumper, the II.

31.05.2007, 20:56
JumperII Erfahrener Benutzer Registriert seit: 26.07.2006 Beiträge: 121	Also die Baseline ist die Grundlinie und setzt vereinfacht erklärt am unteren Zeichenende vom Zeichen 'a' an. Typischerweise wird diese Baseline in der Funktion imageTtfText zur Orientierung verwendet (Anwendung von Zeichensätze). Im TTF wird die Baseline durch das Y-Offset der Positionierung eines Zeichens definiert. in Verbindung mit der eigentlichen Zeichengröße können so auch weitere Werte direkt ermittelt werden. Im Übrigen ist im TTF auch Mapping und Kerning enthalten, also die Seitenabstände zu anderen Zeichen unter Berücksichtigung spezieller Elemente. Gut erkennbar, wenn man die Strings zeichenweise setzt versus als Zeichenkette setzen lässt. Bei einigen Zeichen wird beim Einzelzeichen setzen der Abstand zwischen zwei Zeichen gößer sein. Gruß, Jumper, the II.