|
Nachdem mich viele Emails zu der von mir auf Dotform Net implementierten Textzoom Lösung erreicht haben,
möchte ich nun ein Tutorial zu einer vereinfachten Variante vorstellen.
Da sich die auf Dorform Net angewandte Textzoom Implementierung auf Grund der Einbindung erweiterter
administrativer Funktionalität und Optionen, nur durch das Patchen mehrerer Mambo / Joomla CMS
Coredateien umsetzen liess, ist die Integration in ein bestehendes CMS keine triviale Angelegenheit.
Wer nur die reine Zoomfunktionalität in sein Mambo / Joomla Template oder andere bestehende X(HTML)
Dokumente einbauen möchte, kann dies mit Hilfe des folgenden Tutorials bewältigen. Anhand der hier
veröffentlichten Beispielseite für die Fontskalierung ist ersichtlich (im Quelltext), auf welche Weise das Script
für den Textzoom eingebunden werden kann.
Voraussetzungen :
- Grundkenntnisse HTML, XHTML und CSS
- Texteditor zum Anpassen von Script, CSS Datei, Template oder HTML Dokument
Als Script kommt, anders als beim administrierbaren Textzoom auf Dotform Net, eine modifizierte Variante
des efa_fontsize.js zum Einsatz, welches auch auf www.einfachfueralle.de zum Download angeboten wird.
Die Modifikation betrifft die Anzahl der Skalierungschritte, so dass eine "unendliche" Vergrößerung / Verkleinerung
vermieden wird.
Einbinden des Scriptes in ein Template oder HTML Dokument :
Im Kopfbereich des Templates zwischen <head> ...</head> ist folgender Code einzufügen :
<script type="text/javascript" src="cookies.js"></script>
<script type="text/javascript" src="efa_fontsize.js"></script>
Damit erfolgt das Laden des Cookiemanagers und des Scriptes für die Fontskalierung.
Eventuell anders lautende Pfade zu den Dateien cookies.js und efa_fontsize.js müssen natürlich
angepasst werden.
Die Intialisierung des Fontskalierung Scriptes erfolgt unmittelbar nach dem <body> Tag durch den folgenden
Eintrag im Template oder dem ausgewählten HTML Dokument.
<body>
<script type="text/javascript">if (efa_fontSize) efa_fontSize.efaInit();</script>
Nun erfolgt die Einbindung des Javascript Funktionsaufrufes zum Erstellen der klickbaren Links
für die Vergrößerung und Verkleinerung. Dies kann an einer selbst gewählten / gewünschten Stelle
im jeweiligen Template bzw. Dokument erfolgen. Beispielsweise in einer Tabellenzelle oder einem DIV Container.
Bewerkstelligt wird das durch folgende Codezeile:
<script type="text/javascript">if (efa_fontSize) document.write(efa_fontSize.allLinks);</script>
Die bis hier beschriebene Vorgehensweise kann im Quelltext der Beispielseite noch einmal nachvollzogen werden.
Anpassen des Fontsize Javascriptes :
In den ersten 27 Zeilen des fontsize.js Scriptes lassen sich die wichtigsten Anpassungen vornehmen. Mit der Variable
efa_default wird die Standard Größe der Schriftart beim Initialisieren in Prozent festgelegt. Der Zahlenwert der Variable
efa_increment legt fest in welchen Schritten (prozentual) vergrößert und verkleinert wird.
In den Arrays efa_bigger und efa_smaller werden der HTML Code und zusätzlich anwendbare Parameter hinterlegt.
Auch hier gilt - werden Bilder zum Anzeigen/Verlinken benutzt muß auch hier der Pfad bedarfsweise angepasst werden.
Genau dieser Quellcode (hier die von einem Absatz umschlossenen Bilder textzoomin_button.gif und
textzoomout_button.gif), wird durch den vorherig beschriebenen Funktionsaufruf an der jeweilig ausgewählten
Stelle im Template oder Dokument dargestellt.
var efa_default = 70; // Default Fontsize in %
var efa_increment = 6; // Stepping value for increment in %
var efa_bigger = ['<p style="padding: 0; margin: 0;">',
'<img src="images/textzoomin_button.gif" border="0" />',
'Schrift grösser stellen',
'',
'',
'',
'',
'',
'',
'',
''
]
var efa_smaller = [' ',
'<img src="images/textzoomout_button.gif" border="0" />',
'Schrift kleiner stellen',
'',
'',
'',
'',
'',
'',
'',
'<' + '/p>'
]
Anpassung der CSS Datei für das verwendete Template oder HTML Dokument :
Hat man es bis hierhin geschafft, sollten jetzt an der gewählten Stelle die verlinkten Textzoom Icons
angezeigt werden.
Hinweis : Die Fontskalierung wird nicht funktionieren wenn in der verwendeten CSS Datei feste Größen
zur Angabe der font-size, wie px oder pt , für die jeweiligen Elemente, Classen oder ID's benutzt werden !
Hier empfiehlt es sich, auf skalierbare Größenangaben wie % oder em zurückzugreifen.
Testen lässt sich das im Internet Explorer, da dieser im Gegensatz zum Firefox beispielsweise
nicht in der Lage ist, bei festen CSS Größenangaben für Schriften eine Veränderung der Schriftgröße
zu erzwingen. Wenn bei Auswahl der Einstellungen unter " Ansicht --> Schriftgrad --> auswählen " im
Internet Explorer keine Änderung der Schriftgröße erfolgt, dann muss die verwendete CSS Datei
angepasst werden !
Beispiel :
body {
margin: 0;
padding: 0;
height: 100%
font-family: arial, verdana, helvetica, sans-serif;
font-size: 70%; /* set browser default fontsize at 70% */
line-height: 1.45em; /* set browser default lineheight at 1.45em */
}
a:link, a:visited, a:hover {
font-size: 11px;
}
h1, h2, h3, h4, h5, h6 {
color: #cccccc;
line-height: 1.45em;
padding: 4px 0px 4px 0px;
}
h1 {
font-size: 160%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 140%;
}
h4 {
font-size: 130%;
}
h5 {
font-size: 120%;
}
h6 {
font-size: 110%;
}
Wie zu sehen, werden bei der Style Deklaration des body Tags skalierbare Angaben in % und em für die
Attribute font-size und line-height verwendet. Diese Angaben werden an alle nachfolgenden Elemente weiter vererbt,
solange sie nicht in anderen Deklarationen überschrieben werden.
In der folgenden Deklaration für die Links (a:link, a:visited, a:hover) hingegen wird die font-size mit 11px festgelegt.
Das bedeutet, dass hier keine Vergrößerung / Verkleinerung der Link Texte durch das Fontsize Script erfolgen wird.
Bei den nachfolgenden Angaben für Überschriften H1 - H6 ist eine Skalierung gewährleistet, da hier wieder mit %
Angaben gearbeitet wurde.
Anhand der zur Beispielseite zugehörigen CSS Datei lässt sich die Steuerung dieses Verhaltens sehr gut
nachvollziehen.
Download des Tutorials und der Beispielseite :
Das Tutorial, die Beipielseite mit CSS Datei und die verwendeten Scripte können hier als Zip Datei herunter geladen
werden.
Hinweis: Der Autor dieses Artikels übernimmt keine Gewährleistung auf die Richtigkeit aller hier dargestellten
Ausführungen sowie der gesicherten Funktionalität des angebotenen Tutorial Downloads und
der darin enthaltenen Scripte. Der Download und Inhalt des Tutorials steht zur freien Verfügung und
Weiterverwendung, dessen Anwendung liegt im Ermessen des Benutzers.
Download: tutorial_textzoom.zip (13kb)
Das Zip Archiv beinhaltet:
- efa_fontsize.js - im Tutorial und der Beipielseite verwendetes Fontsize Script (mit Modifizierung)
- efa_fontsize_original.js - Original Fontsize Script mit englischen Kommentaren
- cookies.js - Cookie Manager Script
- textzoom_sample.htm - Beipspielseite zur Funktionsweise der Fontskalierung
- tutorial.htm - dieses Tutorial als Offline Version
- textzoom.css - CSS Datei für die Beispielseite
- Ordner Images - Textzoom Icons und Hintergrundbild
[Autor: grishan 2005] |
Top
