weblica - das Desktop-CMS für Windows XP und Vista. Nie war es einfacher, gut gestaltete Webseiten selber zu machen.

Schriftgrösse wählen

In weblica die Schriftgrösse auf einer Seite per JavaScript ändern

So können Besucher Ihrer Seiten die Schriftgrösse per Mausklick ändern

Glühbirne als Hinweis
Auf dieser Seite zeigen wir, wie Sie in weblica mit Hilfe von Javascript die Schrift auf Knopfdruck vergrössern oder verkleinern können.

Im Beispiel werden hierfür zwei  klickbare Textlinks in der linken Spalte angeboten - Sie können aber auch zwei Bilder mit entsprechenden Link-Aktionen verwenden.

Und so geht es

Wir ändern das DOM

Um die Schriftgrösse per Mausklick ändern zu können, benötigen wir wenige Zeilen Javascript. Folgendes müssen wir tun:
  1. Das richtige Element im DOM der Seite auswählen
  2. Die Style-Definition für die Schriftgrösse setzen
  3. Den dazugehörigen Javascript-Code so verpacken, dass wir ihn über Links auf der Seite ausführen können, damit die Seiten-Besucher die Schriftgrösse per Mausklick ändern können.

Das richtige Element im DOM der Seite auswählen

weblica verwendet - wie sich das gehört - CSS um die Schriften zu stylen. Um die Schriftgrösse ändern zu können, müssen wir daher nur die entsprechenden Angaben für die Schriftgrössen ändern; das ist mit wenigen Zeilen Javascript möglich.

Für uns relevant ist das body-Element. weblica legt eine Default-Definition fest, die in etwa so aussieht:

weblica CSS -Datei (Auszug)
body {  
  color:#4C4C4C;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:small;
  font-style:normal;
  font-weight:normal;
  line-height:1.5;
  text-align:left;
}

Uns interessiert die Deklaration font-size: small. Diese möchten wir per Javascript ändern können.

Um dies zu erreichen, müssen wir das body-Element auswählen und die Style-Definition ändern. Wir verwenden dazu die Javascript-Bibliothek Prototype, die auch von weblica selber verwendet wird. Damit wir das Selektieren des Elements und das Ändern der Style-Information zum Kinderspiel:

Javascript Code zum Selektieren und Ändern des body: Die Funktion changeFontSize 
<script type="text/javascript">

function changeFontSize(size) {

    var bodyEle = $$("body")[0];
    if (bodyEle) {
        bodyEle.setStyle(
         {fontSize: size}
        );
    }
}

Die $$ Helper-Funktion von Prototype ist eine richtige Power-Funktion: Sie ermöglicht es uns, Elemente des DOMs nicht nur per CSS-Klasse auszuwählen, sondern auch per Selektor. Hierbei stellt Prototype praktisch alle CSS 3 Selektoren bereit.

Für unsere Zwecke reicht ein einfacher Selektor aus, da wir die Schriftgrösse nur für den Body ändern müssen, um das gewünschte Ergebnis zu erreichen.

Die $$ Funktion liefert ein Array von sog. extended Elements zurück. Das heisst, die gelieferten Elemente wurden von Prototype dynamisch um nützliche Funktionen zur Manipulation ergänzt:

Wir könnten zum Beispiel mittels hide() die ganze Seite verschwinden lassen:

Javascript Code: Wir lassen den body verschwinden
var bodyEle = $$("body")[0];
if (bodyEle) {
  bodyEle.hide();
}

Doch das ist nicht das, was wir wollen.

Die Style-Definition für die Schriftgrösse setzen

Wir wollen nun die font-size des Body ändern. Hierzu verwenden wir die Funktion setStyle()von Prototype direkt auf dem Element; die Attribute werden dabei in einem Array übergeben.

Um die font-size zu ändern, müssen wir den Attribut-Namen in der sog. "camelCap"-Form schreiben: anstatt font-Size also fontSize:

Javascript Code zum Ändern des body Style: Die Funktion changeFontSize 
function changeFontSize(size) {

    var bodyEle = $$("body")[0];
    if (bodyEle) {
        bodyEle.setStyle(
         {fontSize: size}
        );
    }
}

Und das war es auch schon. Nun müssen wir die Funktion nur noch mit dem richtigen Parameter aufrufen.

Die Funktionen largerFont und smallerFont

Wir schreiben uns zwei Hilfsfunktionen, welche die Methode changeFont() mit dem richtigen Argument aufrufen: largerFont() und smallerFont(). Diese beiden Funktionen können wir dann jeweils über einen klickbaren Link auf der Seite anstossen:

Javascript Code für den korrekten Aufruf von changeFontSize 
function largerFont() {
    changeFontSize('medium');
}

function smallerFont() {
    changeFontSize('small');
}

Im Beispiel haben wir die beiden Schriftgrössen medium und small verwendet. Eine Liste der zulässigen Werte findet sich hier: CSS 4 you - Schriftgrössen.

Und hier nun das ganze Skript:

Das ganze Skript auf einen Blick
<script src="/_js/prototype/prototype.js" type="text/javascript"></script>

<script type="text/javascript">

function changeFontSize(size) {

    var bodyEle = $$("body")[0];
    if (bodyEle) {
        bodyEle.setStyle(
         {fontSize: size}
        );
    }
}

function largerFont() {
    changeFontSize('medium');
}

function smallerFont() {
    changeFontSize('small');
}

</script>

Dieses fügen wir in einen HTML-Absatz ein und legen es auf der Startseite in die linke Spalte. So steht es auf jeder Seite automatisch zur Verfügung. Die erste Zeile des Skripts sorgt übrigens dafür, dass wir Prototype zur Verfügung haben.

Die Funktionen per Link auf der Seite anbieten

Wir arbeiten im Beispiel mit zwei einfachen Textlinks. Sie können aber auch Bilder verwenden, auf denen Sie die Aktion entsprechend setzen.

Wir verwenden weblica Web-Links wie folgt:
  • G - setzt die grössere Schrift: javascript:largerFont()
  • K - setzt die kleinere Schrift: javascript:smallerFont()

Ein kleines Problem hat die Lösung aber noch: die geänderte Schriftgrösse gilt nur für die aktuelle Seite. Darum kümmern wir uns als nächstes.

Wir merken uns die gewählte Schriftgrösse - Cookies als Rettung

Damit die vom Besucher gewählte Schrift auch beim Aufruf einer neuen Seite auf der Website wirksam bleibt, müssen wir uns die Grösse merken und jeweils wieder setzen. Hierzu verwenden wir ein Client-seitiges Cookie.

Der Umgang mit Cookies in Javascript ist etwas umständlich, wir arbeiten daher mit entsprechenden Hilfsfunktionen (Quelle: http://www.quirksmode.org/js/cookies.html).

Javascript Code für das Cookie-Handling
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else {
    var expires = "";
  }
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(";");
  for(var i=0; i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)== " ") c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

Ein wichtiges Detail: Der Pfad für die Gültigkeit des Cookies setzen wir auf das Wurzelverzeichnis; damit ist sichergestellt, dass die Schriftgrösse auch korrekt gesetzt wird, wenn der Besucher diese erste auf einer Unterseite ändert.

Die Verwendung des Cookies in unserem Code ist rasch erledigt:

Als erstes ergänzen wir die bisherige Methode changeFontSize wie folgt:

changeFontSize()
function changeFontSize(size) {

    var bodyEle = $$("body")[0];
    if (bodyEle) {
        bodyEle.setStyle(
         {fontSize: size}
        );
        storeFont(size);
    }
}

Die Methode storeFont() kapselt den Aufruf der Funktion, um die Grösse in einem Cookie zu speichern:

storeFont()
function storeFont(fontSize) {
    createCookie("user.FontSize", fontSize);
}

Zu guter Letzt bleibt noch der Code, um eine evtl. gespeicherte Schriftgrösse wieder zu setzen:

Javascript-Code für das Auslesen und setzen der gespeicherten Schriftgrösse
fontSize = readCookie("user.FontSize");
if (fontSize) {
     changeFontSize(fontSize);
}

Das Skript auf einen Blick

Nachfolgend das komplette Skript; dieses legen wir - wie gesagt - in einen HTML-Absatz in der linken Spalte, so wird der benötigte Code automatisch auf alle untergeordneten Seiten des Auftritts übertragen.

Das endgültige Skript
<script src="/_js/prototype/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

function changeFontSize(size) {

    var bodyEle = $$("body")[0];
    if (bodyEle) {
        bodyEle.setStyle(
         {fontSize: size}
        );
        storeFont(size);
    }
}

function storeFont(fontSize) {
  createCookie("user.FontSize", fontSize);
}

function largerFont() {
    changeFontSize('medium');
}

function smallerFont() {
    changeFontSize('small');
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else {
      var expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for(var i=0; i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)== " ") c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

fontSize = readCookie("user.FontSize");
if (fontSize) {
    changeFontSize(fontSize);
}

</script>