font-size.htm

Dateigrösse: 6.86 kb

1 <!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=iso-8859-1"/> 

      <title>font-size</title>
     
<style type="text/css" media="screen,projection">
* {
  margin:0px;
  padding:0px;
}
 
body {
  /* text-align: left; left all elements inside body */
  margin: 2em 0 0 2em; /* setting top and bottom margin */
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100.01%;
  color: #333;
}

.f07  {font-size:0.4375em;}
.f07b {font-size:0.4375em; font-weight:bold;}
.f08  {font-size:0.5em;}
.f08b {font-size:0.5em; font-weight:bold;}
.f09  {font-size:0.5625em;}
.f09b {font-size:0.5625em; font-weight:bold;}
.f10  {font-size:0.625em;}
.f10b {font-size:0.625em; font-weight:bold;}
.f11  {font-size:0.6875em;}
.f11b {font-size:0.6875em; font-weight:bold;}
.f12  {font-size:0.75em;}
.f12b {font-size:0.75em; font-weight:bold;}
.f13  {font-size:0.8125em;}
.f13b {font-size:0.8125em; font-weight:bold;}
.f14  {font-size:0.875em;}
.f14b {font-size:0.875em; font-weight:bold;}
.f15  {font-size:0.9375em;}
.f15b {font-size:0.9375em; font-weight:bold;}
.f16  {font-size:1em;}
.f16b {font-size:1em; font-weight:bold;}
.f17  {font-size:1.0625em;}
.f17b {font-size:1.0625em; font-weight:bold;}
.f18  {font-size:1.125em;}
.f18b {font-size:1.125em; font-weight:bold;}
.f19  {font-size:1.1875em;}
.f19b {font-size:1.1875em; font-weight:bold;}
.f20  {font-size:1.25em;}
.f20b {font-size:1.25em; font-weight:bold;}
.orange  {color:#fa7d19;}

/** font-size switcher from:http://www.charite.de/metas vertical-align:baseline !important; **/
#functions { position:absolute; right:3em; top:2em; width:5em; height:5px; padding:0; border:1px solid #999;  }

#functions #font_switcher ul { list-style-type: none; vertical-align:bottom; border-bottom:0px solid #999; }
#functions #font_switcher ul li { float: left; width: 1.6em; height:1.2em;  margin: 0;  }

#functions #font_switcher a { margin: 0 2px; font-weight: bold; color: #999; background: #fff; text-decoration: none; }
#functions #font_switcher a:hover, 
#functions #font_switcher a:active,
#functions #font_switcher a:focus { color: #000; background: #fff; text-decoration: underline;     }

#functions #font_switcher #font_0_75 { font-size: 0.61em;     }
#functions #font_switcher #font_0_85 { font-size: 0.70em;     }
#functions #font_switcher #font_1_0  { font-size: 0.80em;     }
#functions #font_switcher #font_1_2  { font-size: 0.96em;     }
#functions #font_switcher #font_1_25 { font-size: 0.99em;     }

#font_switcher dfn {
  display:inline;
  height:0;
  left:-1000px;
  overflow:hidden;
  /**/
  position:absolute;
  top:-1000px;
  width:0;
}
</style>

<script type="text/javascript">
<!-- 
function set_cookie(name,value) {
    expire_date = new Date();
    in_one_year = expire_date.getTime() + (365 * 24 * 60 * 60 * 1000);
    expire_date.setTime(in_one_year);
    document.cookie = name + "=" + value + "; expires=" + expire_date.toGMTString() + ";path=/;";
}

function read_cookie_value(cookie_name) {
    if(document.cookie.match(cookie_name)) {
        cookie_name_length = cookie_name.length;
        var cookie_position = document.cookie.indexOf(cookie_name);
        var start_value_reading = cookie_position + cookie_name_length + 1;
        var interim_value = document.cookie.substr(start_value_reading);
        var position_next_separator = interim_value.indexOf(";");

        if(position_next_separator != "-1") {
            var stop_value_reading = position_next_separator;
            var cookie_value = document.cookie.substr(start_value_reading,stop_value_reading);
        } else {
            var cookie_value = document.cookie.substr(start_value_reading);
        }
        return cookie_value;
    }
}

function change_body_font(span) {
    font_size = span.substr(5,7);
    new_font_size = font_size.replace("_",".");
    set_cookie("accessibility_font_size",new_font_size);
    //alert( new_font_size );
    location.reload();
}

function show_font_switcher() {
    document.write("<div id=\"font_switcher\">");
    document.write("<ul>");
    document.write("<li><dfn>1:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_0_75\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"kleine Schriftgr&ouml;&szlig;e\">A<\/a><\/li>");
       document.write("<li><dfn>2:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_1_0\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"normale Schriftgr&ouml;&szlig;e\">A<\/a><\/li>");
    document.write("<li><dfn>3:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_1_25\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"gro&szlig;e Schriftgr&ouml;&szlig;e\">A<\/a><\/li>");
    document.write("<\/ul>");
    document.write("<\/div>");
}

function show_font_switcher_en() {
    document.write("<div class=\"middle\"><div id=\"font_switcher\">");
    document.write("<ul>");
    document.write("<li><dfn>1:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_0_85\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"small fontsize\">A<\/a><\/li>");
       document.write("<li><dfn>2:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_1_0\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"medium fontsize\">A<\/a><\/li>");
    document.write("<li><dfn>3:<\/dfn><a href=\"javascript:history.go(0)\" id=\"font_1_2\" onclick=\"change_body_font(this.id);\" onkeypress=\"this.onclick\" title=\"big fontsize\">A<\/a><\/li>");
    document.write("<\/ul>");
    document.write("<\/div><\/div>");
}

function apply_accessibility_font() {
    if(document.cookie) {
      cookie_value = read_cookie_value("accessibility_font_size");
      document.getElementById("wrapper").style.fontSize = cookie_value + "em";
      document.getElementById("f-size").innerHTML = cookie_value + "em";
    }
}
// -->
</script>
</head>

<body onload="apply_accessibility_font();">

<div id="functions"><script type="text/javascript">show_font_switcher();</script></div>

<div class="f07">font f07</div>
<div style="font-size:7px !important; margin-bottom:0.5em;">font f07</div>

<div class="f15">font f15</div>
<div style="font-size:15px !important; margin-bottom:0.5em;">font f15</div>

<div class="f12b orange">font f12b orange</div>
<div style="font-size:12px !important; color:#fa7d19; font-weight:bold; margin-bottom:0.5em;">font f12b orange</div>

<div class="f16">font f16</div>
<div id="wrapper" style="margin-bottom:0.5em;">font f16 = <span id="f-size"></span></div>

</body>
</html>