CSS PHP jQuery: fontcomputer for dynamic fontsize
Machen Ihre Augen schlapp?
Dynamische Schriftgröße für Barrierefreies Internet. Einfach schöner Lesen.
Verbessern Sie die Lesbarkeit - Readability Ihrer Webseite.
Dieses Script liest eine CSS Datei ein und ändert
alle fontsize Attribute und gibt das neu errechnete CSS
über die variable $csstyle aus.
Mit dem QueryString '?fontsize=bigger' oder '?fontsize=smaller' wird die Schrift größer oder kleiner.
Mit '?fontsize=normal' wird das CSS auf die Defaultwerte zurückgesetzt.
Mit '?fontsize=senior' wird die Schrift um 2 Einheiten als normal größer angezeigt.
Speichert die Einstellungen im Cookie für 100 Tage.
Das CSS wird mit jQuery in die Seite geladen.
Wenn kein numerischer Wert benutzt wird, muss der Wert mit einem Freihzeichen nach dem Doppelpunkt geschrieben werden!
(z.B. fontsize: medium;).
Benötigte Scripte:
jQuery
Get QueryString values with jQuery
Show code:
fontcomputerdoc.php
<?php
// "fontcomputer" PHP Script for JavaScript
// written by: Roman Pantring www.roman-pantring.de - www.filomatic.de [easy filebased PHP CMS]
// www: http://flashdictionary.filomatic.de/css/css_php_jquery_-_fontcomputer.php
// change all fontsize attributes inside a css file.
session_start();
$csstyle = "";
function fontcomputer($cssfile="style.css"){
global $csstyle;
if( isset($_COOKIE['fontsize'])){
if(isset($_SESSION["fontcomputer_size"])){
//echo('size from Session, cookie isset...');
$size = $_SESSION["fontcomputer_size"];
}else{
//echo('size from cookie, no session...');
$size = $_COOKIE['fontsize'];
}
//echo('old ');
}else{
//echo('new ');
if(isset($_SESSION["fontcomputer_size"])){
//echo('size from Session');
$size = $_SESSION["fontcomputer_size"];
}else{
//default value
$size = 0;
}
}
if(isset($_GET['fontsize'])){
if($_GET['fontsize'] =='bigger'){
$size++;
}
if($_GET['fontsize'] =='smaller'){
$size--;
}
}
//minimum size
if($size<-1){
$size=-1;
}
//maximum size
if($size>4){
$size=4;
}
if(isset($_GET['fontsize'])){
if($_GET['fontsize'] =='normal'){
$size=0;
}
if($_GET['fontsize'] =='senior'){
$size=2;
}
}
//save new size
$_SESSION["fontcomputer_size"] = $size;
$_COOKIE['fontsize'] = $size;
setcookie("fontsize", $_SESSION["fontcomputer_size"], time()+((3600*24)*100)); /* 3600 = expire in 1 hour */
$sizes = array(' large',' larger',' medium',' small',' smaller',' x-large',' x-small',' xx-large',' xx-small');
$filename = $cssfile;
$handle = fopen ($filename, "r");
$contents = fread ($handle, filesize ($filename));
$contents = explode('}',$contents);
foreach ($contents as $key => $value) {
$value = explode('{',$value);
if(isset($value[1])){
$value[1]= explode(';',$value[1]);
foreach ($value[1] as $key1 => $value1) {
$css = explode('font-size:',strtolower($value1));
if(count($css)==2 && $size!=0){
$type1= explode('px',$css[1]);
$type2= explode('pt',$css[1]);
if(count($type1)==1 && count($type2)==1){
$counter =0;
foreach($sizes as $entry => $sizevalue) {
if($sizevalue == $css[1] ){
$sizevalueKey = $counter;
}
$counter++;
}
$sizevalueKey = $sizevalueKey - $size;
if($sizevalueKey<0){$sizevalueKey=0;}
if($sizevalueKey>count($sizes)-1){$sizevalueKey=count($sizes)-1;}
$css[1] = $sizes[$sizevalueKey];
}
if(count($type1)==2 || count($type2)==2){
$number = substr($css[1],0,-2);
$number = $number+$size;
$type = substr($css[1],-2);
$css[1] = $number.$type;
}
$csstyle.=($value[0].'{
font-size:'.$css[1].';
}
');
}
}}
}
fclose ($handle);
}
fontcomputer($_SERVER['DOCUMENT_ROOT'].'/style.css');
echo($csstyle);
?>
CSS from PHP via jQuery: fontcomputer.js
//** "fontcomputer jQuery Script" using the "fontcomputer PHP Script"
//** written by: Roman Pantring www.roman-pantring.de - www.filomatic.de [easy filebased PHP CMS]
//** www: http://flashdictionary.filomatic.de/css/css_php_jquery_-_fontcomputer.php
//** change all fontsize attributes inside a css file.
$(document).ready(function() {
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return results[1] || 0;
}
Get_fontsize = $.urlParam('fontsize');
$.get('/fontcomputerdoc.php?fontsize='+Get_fontsize, function(data) {
data = data.split("\n");
data = data.join("");
data_array = data.split("}");
$.each(data_array, function(key, value) {
value = value.split("{");
if(value[1]!= null){
value[1] = value[1].split(";");
$.each(value[1],function(key1, value1){
css = value1.split("font-size:");
if(css.length ==2){
$(value[0]).css("font-size",css[1]);
}
});
}
});
});
});
Menu Links
<div id="fontcomputer"><span class="small"><a href="?fontsize=smaller" title="smaller">A</a></span><span class="big"><a href="?fontsize=bigger" title="bigger" >A</a></span></div>
Menu Links CSS
#fontcomputer{ font-family:Arial, Helvetica, sans-serif;}
#fontcomputer a{ color:#000; font-weight:bold; text-decoration:none;}
#fontcomputer a:hover{ text-decoration:underline;}
#fontcomputer span{ padding:5px 5px 5px 0px;}
#fontcomputer span.small a{ font-size:16px;}
#fontcomputer span.big a{ font-size:20px;}