webwork-blog.net

Home > (X)HTML, CSS, How-To´s, Javascript, PHP > Schriftartenwechsler/Typoswitcher mit PHP und Javascript

Schriftartenwechsler/Typoswitcher mit PHP und Javascript

11. Juni 2009 Jan Einen Kommentar schreiben Kommentare

Wer den Besuchern seiner Website Möglichkeiten geben will, die Seite nach eigenen Wünschen anzupassen ist mit einem einfachen Styleswitcher normalerweise gut bedient. Meistens aktiviert dieser per PHP oder JavaScript den alternate stylesheet und speichert den aktuellen Style in einem Keks (=Cookie). Der User kann fast immer zwischen einer dunkleren, helleren oder farbenfroheren Variante hin und herschalten. Um nur die Schriftart der Site zu ändern reicht schon JavaScript. Wer das ganze aber etwas professioneller machen will, muss mit PHP kombinieren.

In diesem How-To werden wir einen von mir so benannten
“Typoswitcher” (Typo = Abk. für Typografie=Schriftarten,etc.. + Switcher = engl. für Schalter) bauen, mit Speicherung der Schriftart mithilfe Cookies und einer Auswahlliste für die Schriftarten in HTML.

Als erstes erstellen wir die Auswahlliste in HTML:

Falls ihr ein CMS oder Template-System verwendet, könnt ihr diese Auswahlliste in jede Seite bequem integrieren. Für statische Seiten könnt ihr entscheiden ob ihr den Switcher nur auf die Startseite macht oder auf alle Seiten. Einzige Vorraussetzung für die Verwendung auf statischen Seiten ist, das euer Webserver PHP unterstützt und die Endung der Datei.php heißt (das mit der Dateiendung kann man mit einfachen Tricks in der .htaccess regeln). Als allerallererstes erstellen wir eine valide XHTML-Datei mit der Endung .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=utf-8" />
<title>Typoswitcher</title>
</head>
<body>
 
</body>
</html>

Dann fügt ihr folgende Auswahlliste innerhalb des <body>-Tags ein ein:

<select id="typoswitcher" onchange="typochange(this.value);return false;">
      <option value="0">Tahoma</option>
      <option value="1">Arial</option>
      <option value="2">Comic Sans MS</option>
      <option value="3">Courier New</option>
      <option value="4">Georgia</option>
      <option value="5">Impact</option>
      <option value="6">Lucida Console</option>
      <option value="7">Times New Roman</option>
      <option value="8">Trebuchet MS</option>
      <option value="9">Verdana</option>
    </select>

Speichert euer File ab und öffnet es in eurem Standardbrowser. Schaut nach ob alles korrekt ist und schließt den Browser wieder. Jetzt könnt ihr euer File schon in dateiname.php und auf einen Webserver laden
! Als erste Auswahl solltet ihr eure Standardschriftart eintragen !

Jetzt geht es an das JavaScript:

Wie man ein JS in HTML einbindet sollte jedem der dieses How-To liest klar sein
Es sind “nur” ein paar Zeilen:

<script type="text/javascript">
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 expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function typochange(index) {
var fonts = new Array("Tahoma", "Arial", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Lucida Console", "Times New Roman", "Trebuchet MS", "Verdana");
document.body.style.fontFamily = fonts[index];
createCookie("typo",index,1);
}
</script>

Erklärung:

Das Schriftarten-Array wird deklariert. Falls ihr noch weitere Schriftarten zur Auswahl habt, einfach das Array erweitern bzw. anpassen. Dementsprechend muss auch die Auswahlliste und das PHP-Array modifiziert werden.
Dem html-Body wird die mit dem index übereinstimmende Schriftart zugewiesen. Diesen Effekt sieht man immer wenn man eine neue Schrift auswählt.
Zum Schluss wird im Cookie typo noch der aktuelle Index gespeichert. Die createCookie-Funktion ist von mir geschrieben und enthält als ersten Parameter den Namen des Cookies als String, als zweiten Parameter den zu speichernden Wert (hier jetzt die Variable index) und als letzten Parameter die “Haltbarkeit” des Cookies in Tagen

Nun wechseln wir auf die Serverseite:

Vorraussetzungen:

Auf eurem Server läuft PHP (ist zu 90% der Fall)
ihr könnt PHP-Schnipsel in euer Template/Seite einbinden

Hier das Beispiel:

<!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" xml:lang="de" lang="de">
<head>
<title><?php page_title(); ?></title>
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/template.css" media="screen,projection" title="default"/>
<?php
$fonts = array("Tahoma", "Arial", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Lucida Console", "Times New Roman", "Trebuchet MS", "Verdana");
if(isset($_COOKIE['typo'])) { ?>
<style type="text/css">
body {
    font-family: <?php echo $fonts[$_COOKIE['typo']]; ?>;
}
</style>
<?php } ?>

Der Schnipsel dürfte auch für PHP-Einsteiger recht selbsterklärend sein. Das gleiche Array wie auf dem Client wird jetzt auf dem Server als $fonts deklariert. Danach wird überprüft, ob überhaupt die Schrift verändert wurde. Wenn ja, wird der body-Bereich entsprechend per CSS formatiert. Als Wert der font-family wird im Array $fonts der Wert vom typo-Cookie eingesetzt.

Demnächst wird das How-To erweitert. Anstatt immer der Standardschriftart wird in der Auswahlliste immer die aktuelle Schriftart zu sehen sein.