Tutorials
[ Zurück ]


Schriftgröße dynamisch bestimmen lassen (Barrieref


Um auch sehbehinderten Besuchern deiner Seite einen komfortablen Aufenthalt gewährleisten zu können, solltest du ihnen die Möglichkeit geben die Schriftgröße leicht anzupassen.
Dazu sieht man auf immer mehr Seiten Links wie die folgenden: A | A | a

Ich zeige in diesem Tutorial einen Weg, wie du auch an diese Links kommen kannst.


Zuerst brauchst du ein Javascript File. Der Inhalt:
var initial_font_size = 0.8;
var font_unity = 'em';
var delta = 0.1;
var fsize = initial_font_size;
function init_FontSize (ifs, fu, del)
{
    if (!isNaN(ifs))
        initial_font_size = parseFloat(ifs);
    if ("pt,pc,in,mm,cm,px,em,ex,%".indexOf (fu) != -1)
        font_unity = fu;
    if (!isNaN(del))
        delta = parseFloat(del);
    if (isNaN(parseFloat(document.getElementsByTagName('body')[0].style.fontSize)) || parseFloat(document.getElementsByTagName('body')[0].style.fontSize) == 0)
        fsize = getFontSize ();
    else
        fsize = parseFloat(document.getElementsByTagName('body')[0].style.fontSize);
    if (fsize != initial_font_size)
        addFontSizeToLinks ();
    document.getElementsByTagName('body')[0].style.fontSize = fsize + font_unity;
}
function incFontSize ()
{
    if (!isNaN(delta))
        setFontSize (Math.round((parseFloat(fsize) + parseFloat(delta)) * 100) / 100);
}
function decFontSize ()
{
    if (!isNaN(delta))
        setFontSize (Math.round((parseFloat(fsize) - parseFloat(delta)) * 100) / 100);
}
function setFontSize (newsize)
{
    if (!isNaN(newsize))
    {
        fsize = Math.round((parseFloat(newsize)) * 100) / 100;
        document.getElementsByTagName('body')[0].style.fontSize = fsize + font_unity;
        addFontSizeToLinks ();
    }
}
function getFontSize ()
{
    var fs;

    if (document.location.search != "" && (document.location.search).match (/fsize=[0-9]+\.?[0-9]*/i))
        fs = ("" + (document.location.search).match (/fsize=[0-9]+\.?[0-9]*/i)).replace (/fsize=/i, '');
    else
        fs = initial_font_size;
    return fs;
}
function getDomainURL (URL)
{
    if (URL.match (/^((http:\/\/)?(www\.)?((([0-9a-z][0-9a-z-]+\.)+)([a-z]{2,3}))).*/))
        return URL.match (/^((http:\/\/)?(www\.)?((([0-9a-z][0-9a-z-]+\.)+)([a-z]{2,3}))).*/)[1];
    else
        return "";
}
function addFontSizeToLinks ()
{
    for (i = 0; i < document.links.length; i++)
    {
        if (!(document.links[i].href).match (/^mailto:/)
            && !(document.links[i].href).match (/^(http:\/\/)?(www\.)?((([0-9a-z][0-9a-z-]+\.)+)([a-z]{2,3}))[\/]+$/)
            && (document.links[i].href).indexOf (getDomainURL (self.location.href)) != -1
            )
        {
            if ((document.links[i].href).match (/fsize=[0-9]+\.?[0-9]{0,2}/i))
                document.links[i].href = (document.links[i].href).replace (/fsize=[0-9]+\.?[0-9]{0,2}/i, ("fsize=" + fsize));
            else
                if ((document.links[i].href).indexOf ('?') != -1)
                    document.links[i].href = document.links[i].href + "&fsize=" + fsize;
                else
                    document.links[i].href = document.links[i].href + "?fsize=" + fsize;
        }
    }
}
Speichere das als *.js Datei ab und binde diese Datei mit einem Tag in deine HTML bzw. PHP Datei ein (möglichst <head>):
<script type='text/javascript' src='http://mainboarder.cwsurf.de/wp-content/themes/design/fontsize.js'></script>

Damit deine Besucher die Schriftgröße anpassen können, kannst du die Option z.B.: in der Form A+/a- darstellen. Dazu muss an die Stelle in deiner HTML bzw. PHP Datei der Snippet an die entsprechende Stelle:
<script language="JavaScript" type="text/javascript">
	<!-- // fuer Browser ohne JavaScript auskommentieren
	// Links zum Vergroessern bzw. Verkleinern der Schrift einfuegen
	document.write ("<div><a href=\"" + (document.all ? "#" : "") + "\" onclick=\"javascript:incFontSize ();return false;\" title=\"Schrift vergr&ouml;&szlig;ern\">A+<\/a> / <a href=\"" + (document.all ? "#" : "") + "\" onclick=\"javascript:decFontSize ();return false;\" title=\"Schrift verkleinern\">a-<\/a><\/div>");
	// -->
</script>

Möglichst am Ende, jedoch nach allen Links und vor dem </body> Tag musst du nun noch einen letzten Code hinzufügen:
<script language="JavaScript" type="text/javascript">
        <!-- // fuer Browser ohne JavaScript auskommentieren
            init_FontSize (0.8, 'em', 0.1);
        // -->
</script>
Die Skripte stammen von http://www.evocomp.de/scripts/java-script-download/java-script-fontsize/javascript-fontsize.html

Erstellt:02.02.10 20:01
Autor: mainboarder

Letzte Änderung: 02.02.10 20:30
Geändert von: mainboarder

Bewertungen:2
Bewertung: 3.0

Freigeschaltet: Ja
Views 3642

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 240] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE