MrType 01.00.00 beta, generiert aus Text Grafiken mittels TrueTypeFonts Einstellungen

[amk]

Modulname:
MrType

Version:
01.00.00

Status:
beta

Bechreibung:
MrType generiert mittels TrueType-Schriftarten aus einem entsprechenden Text
eine PNG-, GIF- oder JPEG-Bilddatei und bindet jene z.B. als CSS-Hintergrund-
definition ein.

So sind bspw. attraktive dynamische Headlines in beliebiger Schrift ohne den
Einsatz von Bildbearbeitungssoftware realisierbar.



Features:
- flexible Konfiguration von Schriftart, -farbe, -größe, Zeilenhöhe etc.
- Wordwrap abhängig von der Bildbreite
- automatische oder manuelle Bestimmung der Bildbreite oder -höhe

Autor:
Alexander M. Korn (amk)

Lizenz:
Freeware (siehe Lizensbestimmungen in der ZIP-Datei)

Benötigte Sefrengo Version:
>=Sefrengo 1.2

Benötigte PHP-Features/-Konfiguration:
GD-Lib ab Version 2 inkl. FreeType-Unterstützung
SAFE MODE deaktiviert (off)

Installation:
Legen Sie innerhalb Ihres Sefrengo-Projektordners (bspw. "projekt01/") im
Unterverzeichnis "cms/" einen neuen Ordner "fonts/" an.
Kopieren Sie beliebige TrueType-Schriftarten in dieses Verzeichnis.
Wechseln Sie in Ihrer Sefrengo Version in den Bereich "Design->Module".
Am unteren Ende des Bereichs befindet sich ein Uploadfeld.
Wählen Sie hier die gewünschte "*.cmsmod"-Datei aus.
Mit einem Klick auf das Diskettensymbol wird das Modul in das CMS importiert.
Wählen Sie nun in der MrType-Modulkonfiguration eine Schriftart aus und
speichern Sie die Modulkonfiguration.
Das Modul ist nun innerhalb des CMS nutzbar.

Hinweise:
Im Projekt-Ordner legt das Modul automatisch einen Ordner "dynimg/"
an. Später befinden sich darin die dynamischen Grafiken.

Es kann passieren dass eine Erzeugung des "dynimg/"-Ordners nicht möglich
ist. In diesem Fall muss der Ordner per FTP o.ä. erzeugt werden. Zusätzlich
benötigt dieser Ordner dann volle Schreib-/Leserechte (CHMOD 0777).

Je nach Server bzw. PHP-Version kann die Bildformatunterstützung variieren.
Die Modul-Konfiguration überprüft die Möglichkeiten Ihrer Server bzw. PHP-
Version und stellt ggf. nur verfügbare Bildformate zur Auswahl.

Bekannte Probleme:
Je nach Anwendung können unter Umständen Bilder im "dynimg/"-Ordner
verbleiben, die nicht weiter genutzt werden. Die Säuberungsroutine ist noch
nicht ausreichend getestet bzw. optimal umgesetzt.

QUELLTEXT

Changelog legend:
# -> Bug Fix
+ -> Addition
^ -> Change
- -> Removed
! -> Note

01.00.00 beta - 2006-11-01
------------------------------------------------------------------------------------------------
+ GIF support
+ additional modul settings (font path, image path)
+ error messages for missing image path & font file
+ gdlib feature check improved
^ if possible (gdlib-feature) transparent images will be generated as palette-images
^ improved {bgstyle}-definition
^ some other internal things improved and changed, known bugs fixed

00.09.05 preview - 2006-09-05
------------------------------------------------------------------------------------------------
+ additional transparent background option
+ additional right side and bottom distance options (additional width/height values - useful
  on negative line height / letter spacing values and bad auto width/height calculation results)
^ letter spacing / line-height calculation corrected/improved
- more or less unnecessary code (big performance improvements)

00.09.00 preview - 2006-09-03
------------------------------------------------------------------------------------------------
! first release

soooo - leider ist's keine final geworden - musste zuviel ändern - bitte testen!

ACHTUNG: die standard-pfade für die fonts und images habe ich gegenüber v0.9.5 geändert. ist wohl besser so - die bilder gehören bspw. nicht in den media-ordner. aber wen's stört: beide pfade sind jetzt im "Alles"-modus der modul-konfiguration frei wählbar!!! )

Angehängte Datei(en)

 MrType_v01_00_00.zip ( 48.98KB ) Anzahl der Downloads: 87

 

[amk]

ACHTUNG es wurde gerade ein problem auf 1und1 servern festgestellt - wenn es zu einem internen serverfehler kommt muss im outputcode mal nach folgenden zeilen gesucht werden:

if( function_exists(imagetruecolortopalette) )
imagetruecolortopalette($img_final,false,128);

jene müssen dann auskommentiert werden

// if( function_exists(imagetruecolortopalette) )
// imagetruecolortopalette($img_final,false,128);

keine ahnung woran das liegt - die 1und1-500er sind ja immer so grandios aussagekräftig bzgl. php-fehlern!!!

[pawel]

Kann du deine Klasse auch um das Ausgabeformat svg erweiteren? Ich meine weniger die Einbindung über das <text> Element, sondern eher als Pfad.

[amk]

Kann du deine Klasse auch um das Ausgabeformat svg erweiteren? Ich meine weniger die Einbindung über das <text> Element, sondern eher als Pfad.

ehrlich gesagt hab ich kaum ahnung von SVG ... hat prinzipiell nicht viel mit MrType zu tun. erzähl mal genauer, was du dir vorstellst ... mit "Ich meine weniger die Einbindung über das <text> Element, sondern eher als Pfad." kann ich nichts anfangen.

[pawel]

Na ja deine Klasse in MrType macht aus Trutypes Bilder.Nötig ist das ja nur, weil nicht jeder 2.5000 Standardfonts auf seinem Rechner hat .
Blöd ist nur, das beim ersetzen des Textes durch Bilder, die Bilder nicht mitskalieren, wenn die Seite vergrößert wird. Da könnte ein Vektorgrafikformat eine Lösung sein.

Ich stehe beim svg auch erst am Anfang, aber einige Blogs munkelten das der IE 7.2 das Format nativ unterstützen soll (wie Opera, Safari und in einer Teilmenge auch der Fuchs). Das wäre dann der Durchbruch des Formats. Unabhängig davon läuft der Adobe Viewer unproblematisch mit dem IE.

Ich kann hier ein bisschen Lektüre bieten.
Ich stecke auch noch nicht tief drin, hier ein Textbeispiel..
Das klappt bei mir, wie es soll, nur wenn der Font installiert ist. Deshalb gibt es, wie in Layoutsoftware, die Möglichkeit mit einem Programm wie Inkscape oder Freehand Texte in Pfade umzuwandeln und damit unabhängig vom installierten Font zu machen.

Mein Ziel ist es also ein Bild zu haben, welches ohne Qualitätsverlusr skalierbar ist.

[amk]

Na ja deine Klasse in MrType macht aus Trutypes Bilder.Nötig ist das ja nur, weil nicht jeder 2.5000 Standardfonts auf seinem Rechner hat .
Blöd ist nur, das beim ersetzen des Textes durch Bilder, die Bilder nicht mitskalieren, wenn die Seite vergrößert wird. Da könnte ein Vektorgrafikformat eine Lösung sein.

nunja ... das ist nix neues das bitmaps nur minderqualitativ skaliert werden können. auch nix neues ist, dass websites heute in der regel selten skaliert werden sollen/können/müssen. insofern ist das meist kein problem.

als alternative gibt's seit jahren flash ... svg - na klar - hat diesbezüglich auch weitere und ganz andere vorteile. ich glaube aber kaum das neue browser dem svg-format auf die sprünge helfen werden. es muss erstmal angewendet und vor allem notwendig sein ... und notwendigkeit ist heutzutage, bei üblichen screenauflösungen von 1280x1024 pixeln und in zeiten von DSL (wo auch hq-bitmaps kein problem sind), kaum gegeben. in einigen jahren, wenn du auf deinem 19zoll 10megapixel-display eh keine pixel mehr erkennst, und wo websites sogar skaliert werden müssen und sollen, wird die sache vielleicht schon wieder anders sein

langweilen tue ich mich momentan nicht, sonst hät ich vielleicht lust tiefer in die SVG-materie einzusteigen, auch wenn's mir als vergebene liebesmüh erscheint. bin da ehr etwas pessimistisch bzgl. SVG - das format gibt's schon lang und irgendwie passiert nix ... trotzdem danke für die links!

[STam]

Zur Zeit kenne ich nur eine Lösung um mit PHP SVG's zu erstellen.
Dazu braucht man Batik > http://xmlgraphics.apache.org/batik und
Shell Erlaubnis für exec()
... das grenzt den Nutzer Kreis erheblich ein denke ich.
Ansonsten ist die implementierung noch einfacher als die von Mr.Type

Gruß

Edit: ich habe hier noch eine MediaWiki-Extension die als Beispiel dienen könnte.
Code für die LocalSettings.php

QUELLTEXT

## SvGExtension
include("extensions/SVGExtension.php");
$wgSVGSettings->javaCommand  = "/usr/local/lib/jdk/bin/java";
$wgSVGSettings->batikCommand = "/usr/local/lib/batik/batik-rasterizer.jar";

Der Aufruf ist dann hier beschrieben.
Vieleicht bindet das ja ein Admin in das Doku-Wiki ein

Der Beitrag wurde von STam bearbeitet: Wed. 20. December 2006, 10:05

Angehängte Datei(en)

 SVGExtension.php ( 1.74KB ) Anzahl der Downloads: 8

 

[alexander]

Vieleicht bindet das ja ein Admin in das Doku-Wiki ein

Das MediaWiki wird demnächst abgelöst ...

[pawel]

es muss erstmal angewendet und vor allem notwendig sein ..

Nun ja, darüber reden wir ja gerade...
Als Meyer, Shea und Co 2003 anfingen der Webwelt zu erzählen, das man tabellenfrei layouten kann, hielten das viele für zu früh oder überflüssig.

Hier noch ein bißchen Lektüre

@STam: Ja Batik ist natürlich toll, aber du brauchst dann halt deinen eigenen Server. Ich dahte mehr in die Richtung einer Klasse.

[MaZderMind]

Hi
Weiß jemand ob/wie man diue Fiunktionen der Freetype-Bibliothek direkt ansprechen kann? Damit könnte man die Outlines eines Zeichens eines TTF-Glyphen auslesen und daraus ein SVg zu machen ist ja echt kein Ding mehr

Gruß, Peter

[amk]

wüsste nicht dass das geht ... wenn du so willst, könnte man auch Adobe Streamline mit php nachprogrammieren

[MaZderMind]

Hier ist eine Klasse in VB geschrieben, die genau das nur mit einfachen Dateioperationen bewältigt. Wär ja cool wenn man das auf PHP übertragen könnte... ich schaus mir mal an
[edit] Mist.-. hAb nicht genaugenug hingeguckt.. dord wird die GetGlyphOutlineA-Funktion der gdi32.dll benutzt welche die eigneltiche Arbeit erledigt.

Gruß, Peter

[andi]

habe mir das ganze kurz angeschaut und mir ist noch ein kleiner (tip)fehler aufgefallen.

im output ist ein semikolon zu viel:

QUELLTEXT

$css.=";background-image:url('".$mvars['20'].$newimage->imagename."');";

korrigiert:

QUELLTEXT

$css.=";background-image:url('".$mvars['20'].$newimage->imagename."')";

nur so am rande. ansonsten super modul. brauche ich für ein projekt (überlege mir jedoch ob auf «sfir» eine lösung wäre).


gruss andi

[amk]

wieso zuviel ... ich las mal, dass es eine unart ist, bei css-definitionen das letzte semikolon wegzulassen. natürlich geht es auch ohne, es ist aber keinesfalls ein fehler wenn es vorhanden ist ...

[andi]

wieso zuviel ... ich las mal, dass es eine unart ist, bei css-definitionen das letzte semikolon wegzulassen. natürlich geht es auch ohne, es ist aber keinesfalls ein fehler wenn es vorhanden ist ...

ganz einfach, der output sieht folgendermassen aus:

QUELLTEXT

$css="display:block";
$css.=";height:".$newimage->res_height."px";
$css.=";width:".$newimage->res_width."px";
$css.=";background-image:url('".$mvars['20'].$newimage->imagename."');";
$css.=";background-repeat:no-repeat;";

das abschliessende semikolon befindet sich schon vor background-repeat. wenn du das so stehen lässt hast du auf einer website zwischen background-image und background-repeat ein semikolon zuviel (ein abschliessendes semikolon ist schon korrekt):

--> background-image:url(blabla);;background-repeat:no-repeat;

[amk]

ahhh alles klar ... du hast natürlich recht ... ich hab den php-code auch nicht permanent im kopf

[Olaf]

nur so am rande. ansonsten super modul. brauche ich für ein projekt (überlege mir jedoch ob auf «sfir» eine lösung wäre).

Noch mehr zum Rande, es erschien kürzlich eine neue Beta, http://novemberborn.net/sifr3/beta1

Uups, edit, du schriebst ja sfir, sorry

[feniweb]

@andi

QUELLTEXT

(überlege mir jedoch ob auf «sfir» eine lösung wäre).

Ich denke du meintest "sIFR"

Hier einen Link für deutsch sprechende.

[andi]

ai, klaro...siehe hier

[pawel]

Nun ja, der Client braucht halt das Flash-Plugin und aktiviertes JS. Abgesehen davon, das man für eigene Schriften auch noch Flash braucht. Da bleib ich bei meiner bevorzugten Variante.

@MaZderMind: Trotzdem coole Idee
Und weil wir hier jetzt mitten im Replacementthread sind, habe ich noch einen..

PS: Mit einer anderen Grafik (durch Inkscape erzeugt) läuft das Beispiel auch unter dem Fuchs.

Der Beitrag wurde von pawel bearbeitet: Thu. 21. December 2006, 21:05