Schriftgröße per Button verändern

normdew · 25.09.2010

Zum Thema Barrierefreiheit gelangte ich auf die Seite der Barmer:

Dort ist oben recht eine "Schrift-Navigation" um die Schrift zu vergrößern zu verkleinern und zurückzusetzen.

Wie mache ich sowas? legt man mehrere stylesheets an und läd die jeweils bei button-klick? Wie muss ich mir das vorstellen? Kann mir da jemand praktische Anleitung geben!

Ladyan · 25.09.2010

AW: Schriftgröße per Button verändern

So wie das aussieht, wurde die Größenänderung hier mit Javascript erreicht.
Wie sie es genau umgesetzt haben mag ich aber heute Abend nicht mehr zusammenklauben, das schau ich mir lieber morgen in Ruhe an.

Bei Javascript kannst du viel durch Eventhandler lösen - zb "onclick". Das schreibt dann dynamisch deine CSS-Informationen um

sokie · 25.09.2010

AW: Schriftgröße per Button verändern

in dem stylesheet wird von einer Basis Schriftgrösse von 10px ausgegangen, die für den Body gesetzt wird. Alle weiteren Elemente tragen schriftgrössen-werte in em Einheiten. so muss per javascript nur die Schriftgrösse im Body einmal neu gesetzt werden, um die alle Werte in der Seite zu manipulieren.

normdew · 25.09.2010

AW: Schriftgröße per Button verändern

Das klingt recht schlüssig ... da ich bei mir auch generell nur einmalig mit einer absoluten Angabe und danach mit releativen Angaben bzgl. der Schriftgröße arbeite, müsste ich jetzt nurnoch wissen, wie javascript funktioniert.

Hab zwar schon mal reingeschnuppert, aber es ist halt sehr umfangreich!
Den entsprechenden code-schnippsel bin ich noch am suchen. :hmpf:

sokie · 25.09.2010

AW: Schriftgröße per Button verändern

benutzt du in deine Seite denn bereits javascripts, oder gar ein javascriptframework?
wenn ja, macht es sinn, mit dem zu arbeiten, wenn nicht hast du verschiedene Möglichkeiten eine davon wäre:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
  function fs(para){
    var ele = document.getElementsByTagName("body");
    switch (para){
      case "kleiner":
        var fontsize = "9px";
        break;
      case "normal":
        var fontsize = "10px";
        break;
      case "groesser":
        var fontsize = "11px";
        break;
    }
    ele[0].style.fontSize = fontsize;
  }
</script>
<title></title>
</head>

<body style="font-size: 10px; font-family: verdana,arial,whatever,sans;">
<p>Schrift:</p>
<a href="javascript:fs('kleiner')" class="minus" title="Schrift verkleinern">a-</a>
<span class="hd">,</span>
<a href="javascript:fs('normal')" class="normal" title="Schriftgröße zurücksetzen">a</a>
<span class="hd">,</span>
<a href="javascript:fs('groesser')" class="plus" title="Schrift vergrößern">a+</a>
<h1 style="font-size: 2em">&Uuml;berschrift</h1>
<p style="width: 500px; font-size: 1.4em;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>

mal in aller kürze zum Testen.

normdew · 26.09.2010

AW: Schriftgröße per Button verändern

Oh vielen Danke. Momentan arbeite ich noch ohne Javascript.
Wollte javascript auch nur für die wichtigen Dinge einsetzten. Möglichst nicht für Spielerchen.

Gibt es denn prinzipiell überhaupt eine Möglichkeit, diese Thematik nur mit css-Trickserei zu lösen? eigentlich nicht oder?

Ansonsten Danke für den Code!

JannisL · 26.09.2010

AW: Schriftgröße per Button verändern

Erstell 2 CSS Daten und nimm dies:Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

normdew · 26.09.2010

AW: Schriftgröße per Button verändern

Das ist sehr nett, aber mein Anliegen ist es nicht ein fertiges Script zu kopieren oder zu importieren, sondern es zu verstehen! Danach kann ich das verwenden.

Aber vielen Dank! Ich werde mir das gut durchlesen auch schauen ob ich was von dem verhältnismäßig großem script verstehe. Ist da auch ne Menge Code-Müll drin, den ich für das aktuelle Problem gar nicht benötige? Gibt doch öfter solche js-Bibliotheken aus denen du deine fertigen Funktionen abrufen kannst.

Übrigens soll ja nicht nur zwischen styles ge-switcht werden sondern bei jedem Klick auf "GRÖSSER" soll bspw. der Text eine Stufe größer werden. Nach deiner Methode wechsel ich doch nur einmal in eine größere Variante. ein weiterer Klick bleibt wirkungslos, oder?

Mein Ziel ist ein schlankes verständliches Markup, sowie Script.

sokie · 27.09.2010

AW: Schriftgröße per Button verändern

ja, ein style sheet switcher bringt dich da nicht wirklich nach vorne, denn da werden ganze stylesheets ausgetauscht. Im weiteren muss man sich mal ansehen, für welche Browser das geschrieben ist - das ist heute nicht mehr Zeitgemäss.
Wenn du nun schon dein Stylesheet so geschrieben hast, dass die Grössen alle auf Verhältnissen beruhen, wie in dem Beispiel der Barmer Seite, macht es durchaus Sinn per javascript (und ja, das geht ohne neuladen der Seite nur mit Javascript) nur den einen Wert (Basis Schriftgrösse) zu ändern, und alle anderen Werte hängen da eben dran.
zum inkrementellen vergrössern der Schrift bei klick auf den entsprechenden Link könntest du das Script von oben (#5) entsprechend anpassen:

Code:

<script type="text/javascript">
var fontsize = 12; //hier bin ich einfach von einer basis schriftgrösse von 12px ausgegangen
  function fs(para){
    var ele = document.getElementsByTagName("body");
    switch (para){
      case "kleiner":
        fontsize -= 1;
        break;
      case "normal":
        fontsize = 12;
        break;
      case "groesser":
        fontsize += 1;
        break;
    }
    ele[0].style.fontSize = fontsize +"px";
  }
</script>

ohne javascript würde es per php (mit neuladen der Seite) ganz ähnlich gehen, nur müsste man die basis schriftgrösse im stylebereich im header angeben und manipulieren.

normdew · 27.09.2010

AW: Schriftgröße per Button verändern

Du hast recht: neuladen macht ja auch keinen Sinn. Vielen Dank für die Scripthilfe ... sieht ganz verständlich aus! Muß ich bei Gelegenheit (die mir grad fehlt) mal alles hier durcharbeiten.