REDAXO Forum

Hallo Redaxogemeinde,

Ich habe während der Woche ein kleines Addon gebaut; "Sleightofhand".

Es handelt sich hier um ein Framework für Schriftersetzung. Das Addon kommt direkt von mir, nicht von GN2; also bitte nicht den Rüdiger damit belästigen, sondern Fragen/Bugs direkt hier posten.

Features:
- 'Inspiration' von Andreas und Joachim.
- erzeugt 24bit PNGs von .ttf files.
- Auto-cropping der PNG-Dateien.
- Live-caching.
- kann von anderen Modulen/Templates/Addons direkt angesprochen werden.
- Line-height für mehrzeilige Überschriften kann beliebig angepasst werden.
- kann verwendet werden um graphische Menüs zu erzeugen.
- Mouseover-Support.
- PNG-fix kann auch für Inhaltsbilder verwendet werden. class="soh"
- funktioniert in IE6+ (yes, really), Firefox, Opera, Safari und wahrscheinlich Chrome, ohne das Templates angepasst werden müssen - ein 3rd-party PNG-fix wird auch nicht gebraucht.
- AlphaImageLoader() wird nicht verwendet, sondern die PNGs werden in IE6 per VML eingebunden; d.h. Die PNGs flackern nicht und die Seiten laden relativ schnell.
- PHP4 und PHP5 Support.

Info, Beispiele, Module, Doku & Download hier:
http://bit.ly/sleightofhand-site

Beispiel-PNGs:
[ externes Bild ]

[ externes Bild ]

Getestet habe ich mit PHP4 und 5, REDAXO 4.2, Latin und UTF-8. 4.1. *sollte* auch funktionieren ohne Probleme.

Über Testberichte würde ich mich freuen.

Dave

Hallo Dave

install klappt.
beim anlegen des demo modul bekomme ich im backend einen Internal Server Error...?

muß ich noch irgendwelche einstellungen vornehmen?

gruß richy

Hi Richard,

Interessant. Hier gibt's keine Probleme.

Hast du mit 4.2 oder 4.1 getestet? Wasfür eine PHP-Version verwendest du?

Das Modul befindet sich auch hier:
http://rex.daveholloway.co.uk/files/soh ... module.txt

Wenn du PHP5 benutzt, was passiert wenn du die zwei Zeilen in config.inc.php auskommentierst?

Code: Alles auswählen

require_once $REX['INCLUDE_PATH']. '/addons/sleightofhand/classes/class.phpquery.inc.php';
require_once $REX['INCLUDE_PATH']. '/addons/sleightofhand/extensions/extension.replacements.inc.php';

Schöne Grüße

Dave

Wirklich ein schickes Teil das Addon!
Bei mir läuft es sauber in allen möglichen Browsern. Und: unter php5.

lg
Joachim

hi dave
ich versuche es nochmal mit der änderung, php5

redaxo 4.2.1

gruß richy

Lösung:

In class.sleightofhand.inc.php, Zeile 155/156 auskommentieren:

Code: Alles auswählen

//ImageFill($im2, 0, 0, $bg);

Das Paket wird heute Abend aktualisiert.

Klasse Addon.

Habs grad aufn Webspace von all-inkl mit PHP 5.2.9 und es rennt ohne fehler

Danke!

Danke!

Danke für das nette Feedback!

Den Patch für die "Internal Server Error" Fehlermeldung habe ich integriert und das Downloadpaket aktualisiert.

Wenn ihr Feature-requests habt, bitte hier posten!

Wenn ihr irgendwo das Addon einsetzt und nichts dagegen habt, könntet ihr vielleicht euere Links hier posten damit wir sehen können was mit dem Addon möglich ist.

lg

Dave

Spitzenmäßig, daß das von dir zur Verfügung gestellt wird.

Ich bin aber wie immer detailverliebt: Wieso reagiert denn die Maus? Das könnte die (klickverliebten) User doch evtl. verwirren oder?

Ralf

Hallo Ralf,

Im Beispielmodul habe ich alle Features des Addons aktiviert. Um den Mouseover/Verlinkung zu entfernen, muss man im Modulausgabe die Zeilen "link" und "mouseover" einfach löschen:

Code: Alles auswählen

<?php

if ("REX_VALUE[1]"!="" && "REX_VALUE[2]"!="") {

	if (OOAddon::isAvailable('sleightofhand')) {
	
		
	
		echo a561_sleightofhand(array(
			'text' => "REX_VALUE[1]",
			'prefix' => '<REX_VALUE[2]>',
			'suffix' => "</REX_VALUE[2]>",
			'font' => 'Chinese_Ruler.ttf',
			'color' => array(0,0,0),
			'size' => '30',
			'spacing' => '1.5'
		));
		
		
	}
}
?>

Ok, sehe schon, du hast alles bedacht.
Finde es eine wahnsinnig tolle Idee.

Gruß
Ralf

Hallo nochmal,

So, sleightofhand r6 habe ich gerade hochgeladen. Es hat sich nicht viel verändert; Einen CSS-Bug habe ich behoben und ab jetzt kann man auch wordwrapping mit z.B. 'wordwrap'=>'20' einstellen:

[ externes Bild ]

Downloadlink: http://bit.ly/sleightofhand

Dave

genial! - wordwrap macht sinn!

lg
Joachim

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/

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

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.

Gort hat geschrieben: Ich habe schon versucht mich so vorsichtig wie möglich auszudrücken.

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

Gort hat geschrieben: 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

Moin,

Gort hat geschrieben: 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

Hi Dave,

großartiges Addon!.. vielen Dank.

littledave hat geschrieben:Ü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

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

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

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

Lg,
Peter.

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

REDAXO Forum

sleightofhand - Schriftersetzung reloaded.

sleightofhand - Schriftersetzung reloaded.

Re: sleightofhand - Schriftersetzung reloaded.