Forum

[Gort]

Ich war gerade dabei mich ein wenig mit diesem sinnvollen Addon zu beschäftigen, als ich über einen Artikel gestolpert bin, der das ganze (für mich und das was ich vorhatte) wieder ein wenig in Frage stellt.
Vielleicht wusste es der ein oder andere ja auch noch nicht, aber es ist seit Firefox (ab) 3.5, Safari (ab) 4 und nun auch Opera (ab) 10 (IE schon sehr viel früher) möglich Schriftarten per CSS zu embedden (per @font-face).
Es werden keine Texte in PNGs verwandelt, sondern die Schriftart wird dem User übermittelt (Lizenzbedingungen beachten).
Das macht dieses Addon nicht kpl. überflüssig aber bedeutet für eine ganze Reihe von Anwendungsmöglichkeiten kann man die Sache mit den Schriften auch "eleganter" oder zumindest anders lösen.

Ich habe es mir hier angelesen: http://codecandies.de/2009/06/30/embedden-sie-jetzt/

[littledave]

Hi Gort,

Als ich sleightofhand geschrieben habe, war's mein Ziel so viele Browser wie möglich zu unterstützen. Die Lösung die Du gefunden hast funktioniert nur mit FF3.5+, Safari 4+, Opera 10+ und um IE zu unterstützen muss man die Schriftdateien erstmal in EOT Format konvertieren. FF2-3 + Safari 3 Benutzer sehen nur Plaintext. Zudem sind die TTF/OTF/EOT Schriften manchmal echt groß und es kann sein dass es eine Weile dauert bevor die angezeigt werden.

Die @font-face Methode werde ich aber beobachten. Es ist auf jeden Fall eine interessante Herangehensweise.

Dave

[Gort]

Ich habe schon versucht mich so vorsichtig wie möglich auszudrücken. Dein Addon ist wirklich klasse und es gibt eine ganze Reihe von sinnvollen Einsatzzwecken dafür... dachte nur das diese Info evt. hilfreich sein könnte (je nachdem wofür man extra Schriften braucht).

Frage zu deinem Addon (oder Anregung): wäre es evt. möglich die Schriften auch vertikal laufen zu lassen? Definitiv etwas was über CSS immer noch gar nicht funktioniert und ich das ein oder andere mal gut hätte gebrauchen können.

[littledave]

Ich habe schon versucht mich so vorsichtig wie möglich auszudrücken.

Nene - Ich habe's überhaupt nicht persönlich genommen.

Frage zu deinem Addon (oder Anregung): wäre es evt. möglich die Schriften auch vertikal laufen zu lassen? Definitiv etwas was über CSS immer noch gar nicht funktioniert und ich das ein oder andere mal gut hätte gebrauchen können.

Bis jetzt nicht, - aber das ist eine echt gute Idee. Wenn ich Zeit habe, baue ich's ein. Es *sollte* relativ einfach sein sowas zu realisieren.

Dave

[jeandeluxe]

Moin,

Firefox (ab) 3.5, Safari (ab) 4 und nun auch Opera (ab) 10 (IE schon sehr viel früher) möglich Schriftarten per CSS zu embedden (per @font-face).

Das stimmt so leider nicht, und zwar an der üblichen Sollbruchstelle für modernes CSS: IE kann zwar fonts embeden, und ja, auch schon lange, aber nicht per @font-face und .otf fonts, sondern über sein eigenes font-format welches man mit einem vollkommen unsägliche tool (WEFT) aufbereiten muß.. habs lang genug versucht, bottomline: vergiß es..

D.h. so lange IE nicht mit auf den font-face Wagen springt ists Essig mit der realworld Einsetzbrakeit von font-face.. leider. Das es die beste Technik wäre steht außer Frage..

lg,
Jan

[jeandeluxe]

Hi Dave,

großartiges Addon!.. vielen Dank.

Über Testberichte würde ich mich freuen.

Ich habs gleich mal an ner aktuellen Baustelle eingesetzt.. einwandfrei: http://hk.f-stop.de/index.php?article_id=51. Das einzige was auch mir einfällt wäre ne Dreh-Option.. aber mehr als nice to have.

Ansonsten überlege ich gerade wie ich SOH mit Textile direkt verheiraten könnte.. also in der Form das man z.b. wie folgt in Textile notiert:

Code: Alles auswählen

h1(soh). Zu ersetzende Überschrift

Sprich über ne Klasse definiert das dieses Element ersetzte werden soll, den html output nach der Klasse soh parst, das Element ermittelt (h1,h2,whatever), Inhalt, und ersetzt..

Wenn ich nur in regex nicht so ne niete wäre.. ;-) oder fällt dir ein anderer Weg ein?

Danke & GRuß,
Jan

[littledave]

Hallo Jan,

Das Feature gibt es schon, allerdings nur ab PHP5:

Einfach:

Code: Alles auswählen

<?php
a561_addReplacement('h2.soh',array(
      'font' => 'Korean_Calligraphy.ttf',
      'color' => array(255,0,0),
      'size' => '40',
   )
);
?>


..in dein Template hinzufügen.

"h2.soh" ist ein CSS-Selector.

Bitte beachten, um sowas zu unterstützen, parse ich den Quellcode mit der PHPQuery-Klasse (jQuery für PHP). PHPQuery unterstützt zwar XHTML as Eingabe, gibt aber HTML5-Code aus. d.h. Sobald du die a561_addReplacement() Funktion aufrufst, wird deine Seite in HTML umgewandelt. (<meta /> => <meta> <br /> => <br>). Das Feature habe ich nicht ausführlich getestet. Ich empfehle die Nutzung nur für neue Seiten, wo man von Anfang an HTML5 verwendet.

Fast alle CSS1-3-Selectors funktionieren z.B:

#navigation li a
#sidebar h4
body h3:eq(2)

Dave

[jeandeluxe]

Hi Dave,

Code: Alles auswählen

<?php
a561_addReplacement('h2.soh',array(
      'font' => 'Korean_Calligraphy.ttf',
      'color' => array(255,0,0),
      'size' => '40',
   )
);
?>


You rock! ;_)

PHPQuery unterstützt zwar XHTML as Eingabe, gibt aber HTML5-Code aus. d.h. Sobald du die a561_addReplacement() Funktion aufrufst, wird deine Seite in HTML umgewandelt.

mift.. ich verwende durchgehend XHTML ;-(

Das Feature habe ich nicht ausführlich getestet.

Ich kuck mir das die Tage mal an.. im Prinzip sollte man per etwas regex ne eigene Ersetzung stricken können - im Prinzip..

lg,
JAn

[Peter.Bickel]

Sehr fein! Sowas habe ich mir schon seit Ewigkeiten gewünscht; ich freue mich besonders über die Alpha-Transparenz!

Lg,
Peter.

[Joachim.Dörr]

Was noch etwas ungünstig ist, ist dass die Texte nicht an der Grundlinie ausgerichtet wird - Grafiken mit Texten in einer Zeile sind dann unterschiedlich hoch z.b. "Home" und "Impressum" haben dann unterschiedliche Höhen da ja "Impressum" durch die Unterlänge von "p" entsprechend mehr Höhe benötigt als "Home" das nur Buchstaben auf der Grundlinie inne hat.

lg
Joachim

[littledave]

Hey all,

Habe gerade sleightofhand leicht erweitert und ImageMagick integriert. Es ist jetzt möglich die gerenderte Überschriften zu drehen.

Beispiel:

Code: Alles auswählen

echo a561_sleightofhand(array(
    'text' => 'This is rotated text!',
    'font' => 'Gobbledegook.ttf',
    'color' => array(0,128,0),
    'wordwrap' => '40',
    'size'=>'50',
    'rotateX' => '345',
    'spacing' => '1.2'
));



Download: http://bit.ly/sleightofhand

Dave

[arez]

Hi Dave

Das Addon ist wirklich klasse!

Ist es auch möglich, eine Laufweite für den Text einzugeben?

Gruss Arez

[littledave]

Hi arez,

Nein, das geht (noch) nicht. Sowas ist auch etwas tricky, da die ImageTTFText() Funktion Tracking nicht unterstützt.

Dave

[arez]

Hi Dave

Hab kurz gegooglet und etwas zusammengestellt, allerdings noch nicht sehr ausführlich getestet.

In class.sleightofhand.inc.php fügte ich folgendes ein:

Code: Alles auswählen

function generate() {

...

$length = strlen($this->setting('text'));


folgenden Abschnitt habe ich ersetzt durch

Code: Alles auswählen

###############################################################
      ## Render all lines
      $newY = 0;
      for($i=0; $i< count($lines); $i++)
      {   $newY=$y+($i * $this->setting('size') * $spacing);         
         
         if($this->setting('letter-spacing')){
         
            $line = $lines[$i];
            $pos = $x;

            $count = 0;
               //Buchstabenweise lesen
            while ($count < $length){
                 $letter = $line[$count];

                 $box = imagettfbbox($this->setting('size'), 0, $this->setting('fontpath').$this->setting('font'), $letter);

                 $l_size = abs($box[4] - $box[6]);

                 imagettftext($image, $this->setting('size'), 0, $pos, $newY, $foreground, $this->setting('fontpath').$this->setting('font'), $letter);
                 // $x um Breite des Buchstabens und Laufweite erweitern
                $pos =  $pos + $l_size + $this->setting('letter-spacing');
                $count++;
            }
            
         } else {
         
            ImageTTFText($image, $this->setting('size'), 0, $x, $newY, $foreground, $this->setting('fontpath').$this->setting('font'),  $lines[$i]);
         }
          
         
      }

Somit ist eine Art Laufweite möglich. Vielleicht kannst du das ja noch verbessern und evt ins Tool einbauen.

Gruss Arez

[elricco]

Hallo Dave und alle anderen,

also ich habs jetzt mal getestet unter eine 4.1 Version, rennt einwandfrei.
Das einzige Problem ist, dass Schreibschriften zwar richtig gerendert, aber überlappenden Buchstaben teilweise oder ganz "ausradiert" werden.

In meinem konkreten Fall habe ich mal die Schriftart 'Bickham Script One.ttf' genutzt, und an den Stellen wo sich Buchstaben überlappen wirds weggerendert. Bsp.: "Willkommen" - die beiden L-Schlaufen fehlen, weil der folgende Buchstabe diesen Platz anscheinend benötigt.

Woran kann das liegen?
Wird der Alpha-Kanal für jeden Buchstaben einzeln gerendert?
Und kommt es deswegen zu diesen Überlappungsradierungen?

Gruß
euer Tim