Dynamische Textersetzung
Suchbegriffe: dynatext
Übersetzung eines Artikels von Stewart Rosenberger bei externer Link: alistapart.com
Titel des Originals: Dynamic Text Replacement
ISSN: 1534-0295. 15 June 2004 - Issue No. 183
Anmerkung des Übersetzers - translators note:
Die hier vorgestellte Technik wird auf diesen Seiten eingesetzt, um die Überschriften im Style Leonardo zu erzeugen.
Nachtrag 16.02.2017: Nein, im Jahr 2017 macht man so etwas nicht mehr. Vielmehr wird per @font-face im CSS eine entsprechende Schrift eingebunden.
Bei der Übersetzung habe ich versucht, mich so nahe wie möglich am Wortlaut des Originals zu halten. Auf stilistisch geschliffene Formulierungen habe ich bewußt verzichtet, da dies für das Verständnis des Inhalts nicht notwendig ist. Sollte mir dennoch bei der Übersetzung ein Fehler unterlaufen sein, der zu einer entstellenden Wiedergabe des Originals führt, bitte ich um entsprechende Hinweise im Weblog.
Hinweis:
Support für das Script ist hier nicht zu erwarten. Ich biete hier lediglich die Übersetzung des englischen Originals an.
Einige Tipps zur Fehlerbehebung (allerdings in Englisch) gibt es beim Autor des Scripts.
Dynamische Textersetzung
von Stewart Rosenberger
Das Design von Schriften bereitet bei der Gestaltung von Webseiten immer wieder
Kopfschmerzen. Nur eine Handvoll Fonts sind auf allen Systemen verfügbar, und
aufwendige grafische Effekte sind nahezu unmöglich, wenn man sich an CSS und HTML
Standards halten will. Es macht Sinn, nur die allgemein verfügbaren Fonts zu
verwenden, soweit es sich um den Textkörper betrifft, aber wenn es sich um
Überschriften handelt - kurze, die Aufmerksamkeit weckende Textblöcke - dann
wäre es schön, wenn wir etwas mehr Auswahl hätten. Wir haben uns inzwischen
an diese Einschränkung gewöhnt, und wir lösen das Problem entweder, indem
wir das Maximum aus den wenigen Fonts herausholen, die uns zur Verfügung stehen, oder
indem wir Überschriften komplett durch Grafiken ersetzen.
Die meisten Webdesigner, die Text durch Grafiken ersetzen, machen dies manuell, was kein Problem ist, so lange es sich um eine überschaubare, feste Anzahl von Überschriften handelt. Aber wenn eine Seite mehrmals täglich aktualisiert wird, wird diese Vorgehensweise schnell unpraktikabel. Wie auch immer die Ersetzung durchgeführt wird, muß jede Grafik mit dem Text, den sie ersetzt, verknüpft werden. Diese Verknüpfung erfolgt normalerweise mittels eines <img> Tags und eines CSS Style Sheets, oder eines Style-Attributs im Quelltext. Und diese Verknüpfungen müssen durch irgend jemanden gepflegt werden, wenn sich das Layout oder das Design ändern.
Laß uns all diesen Unsinn vergessen. Keine <img> oder <span> Tags, keine id Attribute, keine Arbeit in Photoshop, und keine problematischen CSS Hacks. Mit Javascript und PHP können wir barrierefreie grafische Überschriften in jedem beliebigen Font erzeugen, ohne die geringste Änderung unseres HTML oder CSS.
PHP
Ein kleines PHP script, (externer Link: Download PHP Script) schickt bei jedem Aufruf ein dynamisch generiertes PNG Bild an unseren Browser. Zuerst muß dieses Script jedoch noch auf deinen speziellen Bedarf konfiguriert werden. Dazu dienen die ersten 7 Zeilen im Script:
$font_file = 'font.ttf' ; $font_size = 56 ; $text_color = '#ffffff' ; $background_color = '#000000' ; $transparent = true ; $cache_images = true ; $cache_folder = 'cache' ;
- Die Variable $font_file muß auf den Serverpfad (nicht den URL) eines True Type Fonts (TTF) oder Open Type Fonts (OTF) auf deinem Server verweisen. Das ist der Font, mit dem die Bilder erzeugt werden; Dieser Font muß von deinem Computer auf den Server geladen werden.
- $font_size ist die Schriftgröße in pt (wer hätte das gedacht).
- $text_color und $background_color definieren die Schriftfarbe und die Hintergrundfarbe im Hexadezimalcode.
- Wenn $transparent auf true eingestellt wird, ergibt sich ein weicher Übergang der Kanten der Schriftzeichen zum Hintergrund $background_color, anti-aliasing wird vermieden, und der Hintergrund der Schriftzeichen wird unsichtbar.
- Wenn $cache_images auf true eingestellt wird, und $cache_folder auf den Serverpfad eines Verzeichnisses auf deinem Server (das Verzeichnis muß schreibbar sein), dann speichert das Script jedes erzeugte Bild auf deinem Server. Das beschleunigt die Ausgabe der Grafiken erheblich, und ist besonders wichtig auf shared Servern, oder auf Servern mit viel Traffic.
Um das Script zu installieren, muß dein Server PHP unterstützen. Im Detail: du brauchst PHP Version 4.3 oder höher, mit GD graphics library 1.6 oder höher. Wenn du nicht weißt, was das ist, kontaktiere deinen Service Provider, um zu erfahren, ob dein Server diese Voraussetzungen erfüllt.
Obwohl wir bei dieser Anwendung PHP zur Erzeugung der Grafiken nutzen, muß deine Webseite selbst nicht in PHP geschrieben sein. Egal, wie du deine Webseiten pflegst, ob manuell oder mittels eines CMS , du kannst unsere Technik einsetzen, wenn du ein <script> Tag in den <head> deiner Seite einfügen kannst. Ich werde das weiter unten noch genauer erklären.
Noch eine Bemerkung:
Was mit PHP gemacht wird, geht oft auch mit anderen Scriptsprachen. Perl, ASP, Java servlets, und andere serverseitige Programmiersprachen können ebenso gut zur Generierung von Grafiken verwendet werden. PHP ist eine gute Wahl, weil es weit verbreitet ist, plattformunabhängig, und leicht zu erlernen. Wenn du ein feature brauchst, das PHP nicht bietet, oder wenn du dein eigenes Script zur Erzeugung von Grafiken schreiben willst, kannst du natürlich alternative Programmiersprachen einsetzen. Einfacher ist es aber sicher, den hier vorgestellten PHP Code entsprechend anzupassen.
Bei der Konfiguration des Scripts wurde der Text, der dynamisch ersetzt werden soll, noch gar nicht angesprochen. Der Grund dafür ist, dass dieser Text via URL an das Script übergeben wird. Zum Beispiel: der Aufruf des URL heading.php?text=URLs%20Are%20Fun erzeugt folgende Grafik: “URLs Are Fun.” Ja, das stimmt! Aber wir werden diesen URL nie aufrufen müssen. Javascript erledigt das für uns.
JavaScript
Download des externer Link: JavaScript Source Code.
Diese Technik bedient sich in großem Umfang Peter-Paul Koch’s externer Link: JavaScript Image Replacement (JIR) Methode. Die Prämisse von JIR is einfach: Viele CSS Coder nutzen Browser Bugs, um CSS vor bestimmten Browsern zu verstecken. Diese Hacks sind verwandt mit limited conditional statements, und mißbrauchen CSS als Programmiersprache. Koch und andere haben die Idee weiterverfolgt, dass Javascript - eine echte Programmiersprache - diese Aufgabe besser und zugänglicher erledigen kann. Das ist für unsere Zwecke wunderbar, weil Javascript uns auch mehr Flexibilität gibt. Wir werden Javascript benutzen, um Text durch Grafiken zu ersetzen, die noch gar nicht existieren.
Beim ersten Aufruf der Seite wird das Script versuchen, eine kleine (1x1 Pixel) Testgrafik zu laden. Wenn der Test erfolgreich ist, können wir schließen, dass der Browser unseres Besuchers die Anzeige von Grafiken unterstützt. JIR macht's möglich: Durch den Test, ob die Anzeige von Grafiken unterstützt wird, können wir unmittelbar schließen, ob unser Besucher überhaupt irgendeinen Nutzen aus unserer dynamischen Textersetzung zieht. Wenn nicht, wird das Script hier abgebrochen.
Angenommen, der Browser unseres Besuchers zeigt Grafiken an, dann wartet das Script, bis die Seite vollständig geladen ist, weil es keinen Text ersetzen kann, der noch nicht auf dem Browser angekommen ist. Sobald der HTML Code vollständig geladen ist, durchsucht ihn unser Script auf bestimmte Elemente (<h2>, <span>, etc.), und ersetzt den Text innerhalb dieser Elemente durch ein <img> Tag. Das alt Attribut dieser dynamisch erzeugten <img> Tags wird aus dem Originaltext erzeugt, und sein src Attribut wird auf den URL des PHP Scripts gesetzt, das wir gerade installiert haben. Das PHP Script schickt darauf eine dynamisch erzeugte Grafik, und voila: Dynamische Textersetzung.
Unser Javascript ist ein Schwergewichtler von 8kB, und im Boxring spielt heavy metal Musik. Aber es sind nur zwei Zeilen, die angepaßt werden müssen, damit das Script läuft.
replaceSelector ("h2","heading.php",true);
var testURL = "test.png";
Die replaceSelector Function erwartet 3 Parameter:
Der erste ist der CSS Selektor, der angibt, welches HTML Element ersetzt werden soll. Das kann fast jeder CSS Selektor sein, einschließlich id, class, ein Element oder auch ein Attribut Selektor.
Der zweite Parameter ist der URL unseres PHP Scripts.
Der dritte Parameter ist ein true/false Flag, das festlegt, ob für den ersetzten Text Zeilenumbruch zugelassen wird. Wenn dieses Flag auf true gesetzt ist, wird für jedes Wort eine separate Grafik erzeugt. Wenn das Flag auf false gesetzt ist, wird für den ganzen Text eine einzige Grafik erzeugt (die dann natürlich nicht umgebrochen werden kann).
replaceSelector() muß für jedes Element definiert werden, das ersetzt werden soll. Die URLs in diesen Zeilen können absolut sein (http://…), oder relativ zu unserer HTML Datei (path/filename).
Die Variable testURL muß auf unsere kleine (1x1 Pixel) Testgrafik verweisen.
Nach diesen Anpassungen kannst du das Javascript auf deinen Server laden. Jetzt muß nur noch im <head> deiner Seiten Folgendes eingefügt werden:
<script
type="text/JavaScript"
src="replacement.js">
</script>
Das src Attribute muß natürlich auf das Verzeichnis verweisen, wo das Javascript auf dem Server liegt.
Das war's! Dynamische Textersetzung!
Wir könnten hier aufhören. Aber es gibt noch ein paar optionale Verbesserungen.
Druckversion
Wie wir externer Link: früher bei ALA, gesehen haben, werden heute auf vielen Seiten spezielle Print Style Sheets eingesetzt, um besser formatierte Ausdrucke zu erhalten. Da unsere dynamisch erzeugten Textgrafiken auf hochauflösenden Druckern häufig unschön aussehen, sollten wir den Prozess der dynamischen Textersetzung wieder umkehren. Leider läßt uns Javascript hier im Stich. Einmal generiert, lassen sich die Grafiken leider nicht wieder in Text umwandeln. Wir müssen also eine andere Lösung finden.
Statt den Ersetzungsvorgang umzukehren, müssen wir ein wenig Vorausplanung betreiben. Zusammen mit dem <img> Tag fügen wir ein <span> Tag ein, das den Originaltext enthält. Und wir formatieren diesen span per CSS als display:none, damit er auf dem Bildschirm nicht angezeigt wird. Wir haben jetzt unseren Originaltext in zwei Versionen: einmal als sichtbare Grafik, und einmal als Text in einem verborgenen span. Wenn wir jetzt jeder dieser beiden Versionen ein eigenes Attribut mitgeben class (“replacement”, und “print-text,”), und ein print CSS hinzufügen, dann wird beim Druck der Originaltext verwendet.
Folgende Style Angaben (externer Link: Muster CSS Datei download) können eingesetzt werden, um die Druckversion deiner Seite zu formatieren:
span.print-text {
display: inline !important;
}
img.replacement {
display: none;
}
Wenn dieses Style Sheet auf unseren Server geladen ist, müssen wir noch zwei Zeilen in unserem Javascript ändern:
var doNotPrintImages = false; var printerCSS = "replacement-print.css";
Wenn doNotPrintImages auf true gesetzt ist, und printerCSS auf den URL des Druck Style Sheets verweist, das wir gerade erzeugt haben, dann fügt das Script automatisch den richtigen <link> zum CSS in den <head> unseres Dokuments ein.
Flackern der Anzeige
Weil unser Script erst mit der Arbeit beginnen kann, wenn das ganze Dokument im Browser geladen ist, wird zuerst einmal der Originaltext auf der Seite angezeigt, vor die dynamische Ersetzung beginnt. Das ist zwar kein großes Problem, aber störend. Und weil es vermieden werden kann, wollen wir es auch vermeiden. Mit Hilfe eines weiteren kleinen Style Sheets können wir genau das tun.
Bevor der body unseres Dokuments geladen wird, können wir dynamisch ein Style Sheet einfügen, das alle Elemente versteckt, die umgewandelt werden sollen. Weil eingebettete CSS Style Sheets schon verwendet werden, während das Dokument noch gerendert wird, werden während dieser Zeit die umzuwandelnden Elemente, also der Originaltext angezeigt. Sobald die Textersetzung abgeschlossen ist, können wir dieses Style Sheet deaktivieren, und unsere Grafiken werden angezeigt.
Wenn wir zum Beispiel unser Script so eingestellt haben, dass <h2> Tags ersetzt werden, dann versteckt das folgende Style Sheet (externer Link: hier downloaden) alle <h2> Tags bis zum Abschluß der Umwandlung.
h2 {
visibility: hidden;
}
Ein kleines Problem gibt es mit diesem Ansatz noch: Die ganze Technik hängt davon ab, dass eine Testgrafik geladen wird, um zu erkennen, ob der Browser Grafiken anzeigt. Wenn die Grafik nicht geladen wird, dann wird der Umwandlungsprozess nicht gestartet. Und wenn die Umwandlung nicht startet, dann endet sie auch nicht, und das Style Sheet, das den umzuwandelnden Text verbirgt, wird nie ausgeschaltet. Daher werden Besucher, die die Anzeige von Grafiken in ihrem Browser deaktiviert, aber JavaScript und CSS aktiviert haben, anstelle des umzuwandelnden Textes nur eine leere Fläche sehen.
Um dieser armen Minderheit mit ohnehin reduziertem Surfvergnügen das Leben nicht noch schwerer zu machen, fügen wir unserem Script noch einen kurzen timeout Wert hinzu. Wenn die Testgrafik nach ein oder zwei Sekunden (oder so lange du willst) nicht geladen wurde, wird das Style Sheet vom Script automatisch deaktiviert, und der Originaltext wird sichtbar. Diese ein oder zwei Sekunden sind möglicherweise störend für diese ausgeprochen seltene Spezies Surfer, aber das Flacker Problem für die restlichen 99,99% unserer Besucher ist damit erledigt. Wichtig ist, dass unsere Seite für jedermann erreichbar und nutzbar bleibt.
Um diese Option einzuschalten, und das kurze Aufflackern des Originaltextes zu vermeiden, mußt du drei Zeilen im Javascript ändern:
var hideFlicker = false; var hideFlickerCSS = "replacement-screen.css"; var hideFlickerTimeout = 1000;
hideFlicker muß auf true gesetzt werden, und hideFlickerCSS muß auf die CSS Datei verweisen, die wir gerade erstellt haben, um den Originaltext zu verstecken.
hideFlickerTimeout muß auf den Maximalwert in Millisekunden (d.h. 1/1000 Sekunden) gesetzt werden, den das Script wartet, bevor es diesen Style abschaltet.
Anmerkungen und Vorschläge
Ältere Mozilla Versionen inclusive Netscape 6.2 haben einen Bug, der dazu führt, dass Grafiken auch dann geladen werden, wenn der Benutzer die Anzeige von Grafiken in seinem Browser ausgeschaltet hat. Das macht offensichtlich keinen Sinn, und wurde ab Mozilla Version 1.4 berichtigt. Obwohl unsere Technik normalerweise ohne Probleme funktioniert, wird bei ausgeschalteter Grafikanzeige natürlich unser Script dennoch Grafiksupport erkennen, und Grafiken laden, die dann nicht angezeigt werden. Ich betrachte diese ausgesprochen seltene Konstellation zwar nicht als ernsthaften Mangel, erwähne es aber der Vollständigkeit halber. Für dieses Problem gibt es derzeit keinen Workaround.
Unsere Technik kann auch mit online Übersetzungstools wie Google or Altavista’s Babelfish eingesetzt werden. Wenn dein Font den fremdsprachlichen Zeichensatz unterstützt, werden auch die dynamisch erzeugten Grafiken übersetzt.
Der Text, den du ersetzen willst, muß nicht in einem head Tag stehen (<h1>, <h2>, etc.); Jedes Element auf der Seite kann ersetzt werden. Mit einigen einfachen Anpassungen, und etwas Manipulation von float Werten kann diese Technik dynamische Überschriften für jeden Abschnitt erzeugen.
Du kannst auch <a> Tags ersetzen um gestylte Hyperlinks zu erzeugen. Wesentlich mehr Anpassung wäre allerdings erforderlich, um rollovers zu realisieren.
Anstatt Inhalt durch dynamisch erzeugte <img> Tags zu ersetzen, könnte mit dieser Technik PHP gänzlich vermieden werden, und statt dessen könnten dynamisch Flash Animationen eingefügt werden.
Danksagung
Peter-Paul Koch, für externer Link: JavaScript Image Replacement technique.
Simon Willison, für die getElementsBySelector Funktion.
Stuart Langridge, für externer Link: unobtrusive JavaScript techniques.
Fundstücke:
[Sponsored link]
Der Begriff Vserver steht für Virtual Server. Virtual Server ist englisch und bedeutet virtueller Server.
(Sponsored link:)