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:
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:
Möglichst am Ende, jedoch nach allen Links und vor dem </body> Tag musst du nun noch einen letzten Code hinzufügen:
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öß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
|
Folgende User sind hier gerade aktiv:
-
-