Mambo CMS / Joomla CMS - Weblog Menüpunkt: Webdesign

Dynamische Schriftskalierung

Icon Artikel Ersteller Geschrieben von Grishan - 25.02.2006

Textzoom Reloaded Alle modernen Browser bieten inzwischen die Möglichkeit dargebotenen Text auf Webseiten zu skalieren. Trotzdem sind Handling und Bedienung durchaus unterschiedlich elegant in den jeweiligen Browsern geregelt. Eine alternative Methode der Skalierung zum Einbinden in eigene (X)HTML Dateien oder Templates wird deswegen hier anhand eines ausführlichen Beispiels ( XHTML / CSS Sample ) dargelegt.

 

Einleitung

Die hier vorgestellte Variante einer dynamischen Schriftskalierung mittels Javascript beruht auf dem Originalscript von Einfach für Alle, ein Portal das viele Empfehlungen und aufschlußreiche Beiträge mit dem Focus auf barrierefreies Webdesign anbietet.

Das Script wurde an einigen Stellen leicht modifiziert, unter anderem die maximale und minimale Anzahl der Skalierungsschritte betreffend sowie hinsichtlich einer genaueren Erkennung von Opera Browsern, welche sich mit einem anderen User Agent als "Opera" ausgeben ( z.B. als Mozilla oder Internet Explorer).

 

Einbindung in ein (X)HTML Dokument

Die Skalierungsfunktionalität wird durch die 2 folgenden Javascripte bereitgestellt:

  • efa_fontsize.js - erzeugt die Links (Text oder Grafik) zur Bedienung der Skalierung
  • cookies.js - Cookiemanager zum Speichern der getroffenen Einstellung in einem Cookie

Die beiden Scripte werden zuerst im Kopfbereich des verwendeteten (X)HTML Dokumentes eingebunden.
Beispiel Code:

<head>
...
<script type="text/javascript" src="cookies.js">
</script>

<script type="text/javascript" src="efa_fontsize.js">
</script>
...
</head>

 

Die Initialisierung erfolgt nun unmittelbar nach dem <body> Tag, durch Einfügen des folgenden Scriptaufrufes.
Beispiel Code:

<body>
<script type="text/javascript">
if (efa_fontSize) efa_fontSize.efaInit();
</script>
...

 

Um nun die eigentliche Skalierungsfunktion für den Besucher bereitzustellen, muß an einer gewünschten Stelle innerhalb des Quelltextes noch der folgende Funktionsaufruf eingetragen werden.
Beispiel Code:

...
<script type="text/javascript">
if (efa_fontSize) document.write(efa_fontSize.allLinks);
</script>
...

Damit wird dann an der gewählten Position, per verlinktem Text oder Grafiken, die Schriftskalierungfunktionalität angezeigt.

 

Anpassung des Javascriptes

In den ersten 44 folgend dargestellten Zeilen des Javascriptes efa_fontsize.js können die wichtigsten Einstellungen zur Funktionsweise und zum Erscheinungsbild vorgenommen werden.

var efa_default = 75;
var efa_increment = 8;
var max_zoom = 115;
var min_zoom = 59;

var efa_bigger = ['<div class="textzoom"><h3>Schriftgröße<' + '/h3><p style="padding: 0; margin: 0; line-height: 15px;">',
'<img class="margsmall" src="/images/textzoomin_button.gif" />',
'Schrift grösser stellen',
'',
'',
'',
'',
'',
'',
'',
''
]

var efa_reset = ['',
'<img class="margsmall" src="/images/textzoomreset_button.gif" />',
'Schrift zurücksetzen',
'',
'',
'',
'',
'',
'',
'',
''
]

var efa_smaller = ['',
'<img class="margsmall" src="/images/textzoomout_button.gif" />',
'Schrift kleiner stellen',
'',
'',
'',
'',
'',
'',
'',
'<' + '/p><' + '/div>'
]

efa_default - enthält den Ausgangswert (wird als Prozentangabe interpretiert) der zu vergrößernden und zu verkleinernden Schrift, dies ist normalerweise derselbe Wert wie im CSS für das body Tag deklariert

efa_increment - enthält die Schrittgröße (wird als Prozentangabe interpretiert) in welcher die Schrift vergrößert oder verkleinert wird

max_zoom - enthält den Wert (wird als Prozentangabe interpretiert) für die maximale Schriftvergrößerung

min_zoom - enthält den Wert (wird als Prozentangabe interpretiert) für die minimale Schriftvergrößerung

efa_bigger - dieses Array enthält als Angaben, den die Links umschließenden HTML Code (vorangehend), Text oder Grafik für die Schriftvergrößerung, eine Titelbeschreibung für den Text oder die verwendete Grafik.

efa_reset - dieses Array enthält als Angaben, Text oder Grafik für das Zurücksetzen der Schriftgröße, eine Titelbeschreibung für den Text oder die verwendete Grafik.

efa_smaller - dieses Array enthält als Angaben, Text oder Grafik für die Schriftverkleinerung, eine Titelbeschreibung für den Text oder die verwendete Grafik und den die Links umschließenden HTML Code (abschließend)

Aus dem obig aufgeführtem Beispiel ergibt sich eine Schriftvergößerung in 5 Schritten und eine Schriftverkleinerung in 2 Schritten. Zur Darstellung der Links werden, wie zu sehen, Grafiken verwendet, bei deren Überfahren mit der Maus ein Titel mit der entsprechenden Funktion eingeblendet wird. Weiterhin sind die Links eingebettet in einem per Inline Style formatierten Absatz <p> mit vorangehender <h3> Überschrift. Umschlossen wird das ganze Konstrukt von einem <div> Container mit der CSS Klasse textzoom.

 

Praktisches Beispiel zur Einbindung des Textzooms:

Ein Beipiel für die praktische Anwendung, dem vorangegangene Einstellungen und Werte zugrunde liegen, wird hier mittels eines kompletten Sample Layouts (XHTML / CSS) vorgestellt.

Die Einbindung der Zoomfunktionalität erfolgte dabei im Content Bereich des Layouts und einmal im oberen Bereich der rechts befindlichen Navigationsspalte.
Anhand des Quelltextes und des eingebundenen Stylesheets läßt sich die Umsetzung einfach nachvollziehen.

Textzoom Sample ansehen

 

Ergänzendes und Tips

Wie an dem vorgestellten Beispiel zu ersehen, läßt sich eine dynamische Schriftskalierung mit Javascript relativ problemlos und flexibel konfigurierbar in eigene XHTML Dokumente oder auch CMS Templates einbinden. Zu beachten ist auf jeden Fall, dass beim Erstellen des Stylesheets (CSS) für eigene Vorlagen, skalierbare Wertangaben in % oder em zur Attribute Deklaration von zum Beispiel font-size, line-height verwendet werden. Selektoren mit feststehenden Angaben in px Werten werden durch die dynamische Skalierung nicht verändert. Das wiederum gibt einem die Kontrolle darüber, welche Bereiche oder Elemente im Layout durch das Script in Verbindung mit dem jeweilig verwendeten CSS in ihrer Größe verändert werden können.

 

Download Textzoom Tutorial

Das komplette Beispiel mit XHTML Strict - Sample Layout / CSS, Scripten und Tutorial steht als gepacktes ZIP-Archiv zur Verfügung. Zusätzlich enthalten sind ebenfalls die englischsprachig kommentierten Original Scripte von www.einfachfueralle.de .

Download Textzoom Tutorial

 

Kommentare

Icon Kommentar Ersteller OCon schrieb am 21.04.2006 :

Ich bin sehr angetan von dem efa-skript muss aber doc noch der Frage los werden wo der Unterschied liegt zwischen dem Einbinden des Efa Skripts und dem betätigen der Tastenkombination 'STRG +' oder 'STRG -' da somit auch die Schriftgrösse verändert wird.

 

Icon Kommentar Ersteller Grishan/Dotflare schrieb am 21.04.2006 :

Hallo OCon,
das auf Efa basierende Textzoom Script ist als ergänzendes Feature zu verstehen. Nicht alle Benutzer von grafischen Browsern sind immer bis ins letzte Detail über die spezifischen Tastaurkombinationen im Bilde. Zumal die Belegung auch in den Browsern variiert. Weiterhin hat man in Verbindung mit dem verwendeten Stylesheet (CSS) und dem Textzoom, die Möglichkeit verschiedene Bereiche von der Skalierung auszuschließen. Nicht zuletzt wird durch den visuellen Hinweis der Lupensymbole dem Besucher die Auswahl gegeben, ob er nun eine Tastenkombination oder die im Template / XHTML Dokument eingebundene Zoom Funktion benutzt.

 

Icon Kommentar Ersteller Lars schrieb am 09.09.2006 :

Hi,

gutes Tutorial, sehr übersichtlich und eigentlich auch gut verständlich... ich kriegs trotzdem nicht gebacken...:o(

Ich versuche, den Code in ein Joomla-Template zu integrieren, bin auch exakt nach Deiner Anleitung vorgegangen, allerdings wird die Skalierung nicht angezeigt (bzw. die Buttons dafür).

Gibt's für Joomla was spezielles zu beachten?

Schonmal danke für Deine Mühe!

 

Icon Kommentar Ersteller Grishan/Dotflare schrieb am 09.09.2006 :

Hallo Lars,
wenn Du die Schriftskalierung unter Joomla oder Mambo einsetzen möchtest, solltest Du die Bilder in den images Ordner Deiner Mambo oder Joomla Installation kopieren. Nicht in den images Ordner Deines Templates.

Weiterhin solltest Du einen absoluten Pfad im Script efa_fontsize.js zu den Bildern verwenden.

Beispiel:

src='http://www.meinedomain.de/images/textzoomin_button.gif'

Gruß von Grishan

 

Icon Kommentar Ersteller Thomas S. schrieb am 01.11.2006 :

Hi,
sehr gute sache und was ist mit den surfern die javascript ausgeschaltet haben?
Grüßle thomas

 

Icon Kommentar Ersteller Grishan/Dotflare schrieb am 02.11.2006 :

Hallo Thomas,
wie schon weiter oben von mir angeführt versteht sich die Schriftskalierung per Javascript als Ergänzung zur browsereigenen Einstellung der Schriftgröße.

Ist die jeweilige Webseite standardkonform entwickelt, sprich sind im Stylesheet skalierbare Schriftgrössenangaben wie % oder em verwendet worden, dann ist in den meisten Browsern die Schriftskalierung mit Bordmitteln schon gegeben.

Das bedeutet, dass eine Schriftskalierung dann logischerweise auch mit deaktiviertem Javascript funktioniert, benutzt werden müssen dann halt dafür die entsprechenden browsereigenen Einstellungen.

Gruß von Grishan

 

Icon Kommentar Ersteller Alex schrieb am 05.01.2007 :

Hi,
habe das auf Anhieb hingekriegt. Leider verändert sich dich Schrift überhaupt nicht, sondern nur der Rahmen wird kleiner oder größer?!
Ich habe das mit Typo3 realisiert.

Danke und Grüße
Alex

 

Icon Kommentar Ersteller Kluudi schrieb am 01.02.2008 :

Geniale Anleitung! Genau nach sowas habe ich gesucht. Leider bin ich mit der normalen Anleitung nicht zurecht gekommen! Aber deiner Ist Goldwert. Ich danke dir für Deine ausführlichen Beschreibungen. es hat alles geklappt.
Kluudi

 

Icon Kommentar Ersteller Dominik schrieb am 21.03.2010 :

Genial! Genau das, was ich gesucht habe. Joomla-Modul-Einbindung funktioniert problemlos. Tip: Editor ausschalten!

Folgender Code aus obiger Anleitung sollte in das Modul eingesetzt werden:


if (efa_fontSize) document.write(efa_fontSize.allLinks);


Der Rest wie beschrieben in das Template integrieren.

 

(9 Kommentare)

Kommentar schreiben:

 

Hinweis zur Spam Protection:
HTML Tags in Kommentaren werden nicht ausgewertet und nicht angezeigt.
Die Kommentare werden vor der Veröffentlichung besichtigt und dann freigeschaltet.


Micro Network

Wordpress CMS Showcase

Web Standards

XML Schema Validator

1116040