Dynamische Schriftgr??e mit PHP und CSS

Schrift ist zum Lesen da. Auch wenn es trivial klingt, so scheinen sich viele Webautoren dieser Tatsache nicht wirklich bewusst zu sein. Auf meinen Streifzügen durchs Web sto?e ich h?ufig auf Webseiten mit einer – um es milde auszudrücken – abenteuerlichen Textdarstellung. Einer der h?ufigsten Fehler ist dabei eine zu kleine (seltener auch eine zu gro?e) Schrift, die die Lesbarkeit der Webseite einschr?nkt.

In diesem Artikel zeige ich eine flexible M?glichkeit, mit der Ihre Besucher die Schriftgr??e selber für die Webseite ?ndern k?nnen.

Hinweis

Dieser Artikel ist in gekürzter Form in der Internet Professional 12/2003 erschienen. Kommentare oder Fragen zum Artikel sind natürlich willkommen: E-Mail: mario@lingo4u.de.

Die richtige Schriftgr??e

… gibt es nicht.

Warum nicht, werden Sie sich jetzt vielleicht fragen. Die Antwort ist einfach - was für den einen richtig ist, ist für den anderen falsch.

Eine Besonderheit bei Webseiten ist die Tatsache, dass der Webautor in den wenigsten F?llen wei?, wo und wie seine Seiten angezeigt werden. Was auf dem heimischen 15" TFT mit 1024x768 Pixeln Aufl?sung noch sch?n und übersichtlich aussieht, kann auf einem 21" Monitor mit einer h?heren Aufl?sung ein einziges Gewusel mit viel zu kleiner Schrift und zu langen Texten werden. Auf einem Notebook mit 14" TFT und 800x600 Pixeln passen dagegen vielleicht nur ein paar W?rter auf eine Zeile, die noch dazu viel zu gro? wirken.

Das Ausgabeger?t ist also wichtig. Noch wichtiger ist jedoch der Benutzer vor dem Ger?t. Auch wenn ich mit meinen 31 Jahren noch ziemlich gute Augen habe und keine Brille brauche, so frage ich mich manchmal, wie gut die Augen der Webautoren sein müssen, die Webseiten mit stellenweise nur 9 oder 8 Pixel hoher Schrift erstellen. Vielleicht k?nnen sie dies ja wirklich gut lesen, wahrscheinlich kennen sie aber einfach nur ihre eigenen Texte schon so gut, dass sie diese nicht mehr selber lesen müssen. Auf jeden Fall wird es viele Leute geben, die mit diesen Winzig-Schriften ihre Probleme haben. Wenn über die Zug?nglichkeit (Accessibility) von Webseiten gesprochen wird, so betrifft dies nicht nur Menschen mit schweren Behinderungen, wie Blindheit, sondern auch die ganz ?normale? mehr oder weniger starke Sehschw?che. Was der eine auf dem Monitor noch gut entziffern kann, sieht für den anderen wie der Stein von Rosetta aus.

Lange Rede, kurzer Sinn. Es gibt keine Schriftgr??e für Webseiten, die es jedem Recht macht. Was k?nnen wir also tun?

L?sungsans?tze

Die einfachste L?sung ist, dem Anwender die Wahl der Schriftgr??e zu überlassen. Viele Browser bieten die M?glichkeit, die Standardschriftgr??e einzustellen. Diese bekommt der Besucher angezeigt, wenn wir in unserem Stylesheet entweder keine Schriftgr??e angeben oder font-size auf ?1em“ bzw. ?100%“ setzen. Damit das optische Bild stimmt, k?nnen wir überschriften etwas gr??er und Anmerkungen ein wenig kleiner formatieren und schon ist die Welt in Ordnung - oder doch nicht?

Mal ehrlich, wie viele Leute kennen Sie, die von dieser M?glichkeit wissen? Ich denke kaum, dass ein Gro?teil der Internetnutzer die Standardschriftgr??e im Browser einstellen kann. Noch dazu wird es einem im h?ufig verwendeten Internet Explorer nicht gerade leicht gemacht. ?ndern wir also nichts an der Schriftgr??e, wird bei den meisten Benutzern die Schrift mit 16 Pixeln angezeigt, da dies normalerweise die Voreinstellung bei Browsern ist.

Halb so wild, werden Sie vielleicht sagen, 16 Pixel sind doch nicht schlecht. Bei einer Schriftart mit Serifen (bspw. Times New Roman, Georgia) gebe ich Ihnen sogar Recht. Serifen lassen sich auf dem Bildschirm wegen der geringen Aufl?sung jedoch schlecht darstellen, weshalb diese Schriftfamilie dort nicht unbedingt gut lesbar ist. Aus diesem Grund werden bei Webseiten auch meist serifenlose Schriftarten (bspw. Arial, Verdana, Helvetica) verwendet. Diese Schriftfamilie wirkt aber immer etwas gr??er, weshalb 16 Pixel bei den üblichen Schriftarten ungünstig sind. Gerade bei Arial und Verdana erscheinen die Buchstaben zu dünn und st?ren das Schriftbild und den Lesefluss.

Vergleich verschiedener Schriften
Vergleich verschiedener Schriften

Auf meinen Webseiten nehme ich für Flie?text normalerweise 0.95em. Das ergibt ohne ?nderungen am Browser eine 15 Pixel gro?e Schrift, die für viele gut lesbar sein sollte – leider aber nicht für alle. Zwar erlauben die meisten Browser, die Schriftgr??e oder die ganze Webseite über das Menü zu ?ndern, allerdings gibt es auch dort wieder einen Haken. Viele Benutzer werden von dieser M?glichkeit genauso wenig wissen, wie von dem schon besprochenen Einstellen der Standardschriftgr??e und auch hier macht der Internet Explorer wieder keine gute Figur, da er diese Einstellung nur in 5 groben Schritten erm?glicht.

Wie Sie sehen, ist keine dieser L?sungen wirklich zufrieden stellend. Kommen wir daher zum schon angesprochenen L?sungsansatz mit PHP.

Schriftgr??e mit PHP ?ndern

Auch wenn es etwas merkwürdig klingt, mit PHP l?sst sich das Problem relativ einfach und elegant l?sen. Dafür muss Ihr Provider zwar PHP unterstützen, die L?sung selber l?sst sich dann aber auf all Ihre Seiten anwenden – also auch auf statische (X)HTML-Seiten. Voraussetzung ist, dass der Benutzer mindestens Session-Cookies zul?sst und der Browser CSS-Level1 versteht. Des Weiteren ist wichtig, dass Sie in Ihren Stylesheets für alle Schriftgr??en immer relative Einheiten wie 'em', '%', oder 'ex' angeben. Bei absoluten Einheiten wie 'px' oder 'pt' l?sst sich die Schriftgr??e nicht global ?ndern.

Bei der hier beschriebenen M?glichkeit, wird für das Element HTML die Schriftgr??e in Prozent gesetzt. Als Ausgangsschriftgr??e nehmen wir 100.01%, da es in Opera 6 einen Bug bei font-size:100%; gibt. Der Benutzer kann die Schrift in 10%-Schritten vergr??ern oder verkleinern. Da alle anderen Elemente dem Element HTML untergeordnet sind, erben sie die dafür gesetzte Schriftgr??e. Definieren wir jetzt im Stylesheet bspw. für eine überschrift H1 die Regel font-size:120%; oder font-size:1.2em; und der Benutzer hat eine Schriftgr??e von 90% im Browser eingestellt, resultieren daraus ca. 110% für das Element H1.

Der im Folgenden beschriebene L?sungsansatz besteht aus drei Teilen. Im ersten Teil (Listing?1) wird die Schriftgr??e ge?ndert und in einem Cookie (eigentlich zwei) gespeichert. Dazu wertet das Script fontsize.inc.php den Parameter font aus, der drei m?gliche Werten annehmen kann: dec zum Verkleinern, inc zum Vergr??ern und base zum Zurücksetzen auf die ursprüngliche Schriftgr??e.

Was passiert in diesem Script? Im ersten Abschnitt wird ein evtl. schon gesetzter Cookie ausgelesen. Ist entweder der Session-Cookie fontsize oder der dauerhafte Cookie fontsizeR vorhanden, wird die Basisschriftgr??e auf den ausgelesenen Wert gesetzt. Ist keiner von beiden gesetzt, wird als Schriftgr??e 100.01% angenommen.

Als N?chstes wird getestet, ob der Parameter font in der URL übergeben wurde. Falls ja, werden je nach gesetztem Wert für font, von $fontsize 10% abgezogen, dazu addiert oder $fontsize wird wieder auf den Ausgangswert von 100.01% gesetzt. Als minimale Schriftgr??e wird 50% und als maximale 200% zugelassen.

Danach wird versucht, die beiden Cookies mit der errechneten Schriftgr??e zu setzen. Den Cookie fontsizeR versehen wir mit einer Lebensdauer von 365 Tagen. Erlaubt der Benutzer solche Cookies, dann bekommt er bei einem erneuten Besuch innerhalb der 365 Tage automatisch seine eingestellte Schriftgr??e. Da dies nicht alle Benutzer zulassen, setzen wir zus?tzlich noch einen in den meisten F?llen erlaubten Session-Cookie, der beim Schlie?en des Browsers jedoch automatisch gel?scht wird.

Die Hilfsfunktion get_fontsize_link dient dem einfachen Erstellen der Links für das ?ndern der Schriftgr??e. Diese werden aus den aktuellen Request-Parametern der Seite plus dem Parameter font zusammengesetzt. Das Einbinden in ein PHP-Dokument k?nnte dann bspw. so aussehen:

<p>
Schrift: 
<?php print(get_fontsize_link('dec', 'verkleinern')); ?> -
<?php print(get_fontsize_link('base', 'zurücksetzen')); ?> -
<?php print(get_fontsize_link('inc', 'vergr??ern')); ?>
</p>

Der zweite Teil ist das PHP-Stylesheet fontsize.css.php (Listing?2), welches dem Browser die jeweils aktuelle Schriftgr??e liefert.

Am Anfang des Scripts senden wir einen Header, der dem Browser den Mime-Type und den verwendeten Zeichensatz mitteilt.

Anschlie?end wird das Zwischenspeichern der Seite im Browser und evtl. zwischengeschalteten Proxies verhindert, damit der Browser diese Datei bei jedem Seitenabruf neu l?dt und ?nderungen der Schriftgr??e sofort sichtbar werden (siehe ?Zwischenspeichern verboten?).

Im n?chsten Abschnitt wird ein gesetzter Cookie ausgelesen bzw. der Standardwert 100.01% angenommen.

Schlie?lich wird eine einfache CSS-Regel ausgegeben, welche die Schriftgr??e für das Element HTML setzt. An dieser Schriftgr??e richten sich dann alle untergeordneten Elemente in dem (X)HTML-Dokument aus.

Die Datei fontsize.css.php wird folgenderma?en in das (X)HTML- oder PHP-Dokument eingebunden:

<head>
...
<link rel="stylesheet" type="text/css" href="fontsize.css.php" />
...
</head>

Wenn Ihre Dokumente aus PHP-Dateien bestehen, gehen Sie folgenderma?en vor: Sie includieren die Datei fontsize.inc.php in Ihrem Dokument, setzen wie oben beschrieben die Links zum ?ndern der Schriftgr??e und binden im HTML-Teil das Stylesheet fontsize.css.php ein. Ein einfaches Beispiel sieht so aus:

<?php
  include('fontsize.inc.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Schriftgr??e testen</title>
  <link rel="stylesheet" type="text/css" href="fontsize.css.php" />
</head>
<body>
  <p>
    Schrift: 
    <?php print(get_fontsize_link('dec', 'verkleinern')); ?> -
    <?php print(get_fontsize_link('base', 'zurücksetzen')); ?> -
    <?php print(get_fontsize_link('inc', 'vergr??ern')); ?>
  </p>
  <p>Lorem ipsum dolor sit amet, …</p>
</body>
</html>

Schriftgr??en?nderung mit beispiel.php testen

Kommen wir nun noch zu Teil drei, der Variante für statische (X)HTML-Dateien. Für diese übernimmt das Script setfont.php (Listing?4) das ?ndern der Schriftgr??e.

Als Erstes wird in setfont.php das Script fontsize.inc.php includiert, in welchem die Schriftgr??e ge?ndert wird.

Danach wird sofort wieder auf die aufrufende (X)HTML-Datei umgeleitet. Dies kann auf zwei Arten geschehen. Entweder übergeben Sie im Parameter 'uri' den relativen Pfad des aktuellen (X)HTML-Dokuments oder Sie lassen den Parameter weg und verlassen sich darauf, dass der Browser einen Referer mitsendet. Letzteres sollte zwar meist der Fall sein, jedoch ist diese L?sung nicht 100%ig sicher, da Firewalls, Proxies oder Browsereinstellungen das Mitsenden des Referers verhindern k?nnen.

Ein einfaches XHTML-Dokument sieht dann so aus:

Schriftgr??en?nderung mit beispiel.html testen

So k?nnen Sie ohne viel Aufwand auch Ihre statischen (X)HTML-Dateien mit variablen Schriftgr??en anzeigen lassen.

Damit unterschiedliche Schriftgr??en das Layout nicht sprengen, sollten Sie auch für Gr??enangaben von Menüs oder ?hnlichem relative Schriftgr??en angeben. Anstatt also dem DIV-Block für das Menü eine Breite von '150px' zu geben, sollten sie lieber '9em' angeben. Damit skaliert das Layout mit der Schriftgr??e - ein wichtiger Schritt zum so genannten ?Liquid Design?.

Live k?nnen Sie dies auf der Webseite www.ego4u.de sehen. Zwar kann beim Verkleinern oder Vergr??ern das Layout ebenfalls etwas verschoben werden, es liegt dann aber im Ermessen des Benutzers, eine für ihn optimale Schrift- und Fenstergr??e zu w?hlen.

www.ego4u.de mit 100% Schriftgr??e www.ego4u.de mit 130% Schriftgr??e
100% Schriftgr??e 130% Schriftgr??e

Fazit

Mit der hier vorgestellten L?sung, erm?glichen Sie es Ihren Besuchern, ohne gro?en Aufwand die Schriftgr??e Ihrer Webseiten selbst zu bestimmen. Obwohl es sich um eine PHP-L?sung handelt und somit PHP auf Ihrem Webspace ausführbar sein muss, l?sst sich die Methode auch leicht auf statische (X)HTML-Dateien anwenden.

Die Scripte sind natürlich noch ausbauf?hig und einige Fehlerüberprüfungen k?nnten noch ausführlicher sein. Sie k?nnen sie jedoch leicht an Ihre Bedürfnisse anpassen oder auch unver?ndert übernehmen und Ihre Webseiten damit noch attraktiver machen.

Anhang

Quellcode

Quellcode zum Artikel

Zwischenspeichern verboten

Ein mittelgro?es Problem bei dieser Art dynamischen Seiten ist es sicherzustellen, dass das Script auch wirklich ausgeführt und der vom Script erzeugte Inhalt im Browser angezeigt wird. Da Browser und zwischengeschaltete Proxies Webseiten gerne eine gewisse Zeit zwischenspeichern, müssen wir mittels einiger HTTP-Header das Caching der Seiten beim Setzen der Schriftgr??e verbieten. Indem wir 'Cache-Control: no-store' sorgt dafür, dass Proxies die Seite ebenfalls nicht speichern. Zu guter Letzt setzen wir aus Gründen der Kompatibilit?t zu HTTP/1.0 noch den Header 'Pragma: no-cache'.

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Cache-Control: no-store');
header('Pragma: no-cache');

Ein Problem kann auftreten, wenn Ihr Script oder der Webserver einen ETag im Header sendet. Dieser ETag ist eine ID, die Ihr Dokument eindeutig identifiziert. Fordert ein moderner Browser ein mit einem ETag versehenes Dokument erneut an, sendet er die letzte ETag-ID in der Anfrage im Header '304 Not Modified' zurück und der Browser zeigt das alte Dokument an.

Um das zu umgehen, muss das Dokument entweder bei jedem Aufruf einen anderen Inhalt haben (so wie in der fontsize.css.php durch einen zuf?lligen Kommentar) oder wir verhindern das Senden des ETags. Wenn Sie z.B. das Package HTTP_Compress von PEAR verwenden, erreichen Sie dies, indem Sie in der Methode 'output' den zweiten Parameter auf FALSE setzen.

HTTP_Compress::output(TRUE, FALSE);

Autor: Mario Müller, Lingo4you

Quellen

成 人影片 免费观看网站-a片毛片免费观看