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"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 5 6 <title>font-size</title> 7 8 <style type="text/css" media="screen,projection"> 9 * { 10 margin:0px; 11 padding:0px; 12 } 13 14 body { 15 /* text-align: left; left all elements inside body */ 16 margin: 2em 0 0 2em; /* setting top and bottom margin */ 17 padding: 0; 18 font-family: Verdana, Arial, Helvetica, sans-serif; 19 font-size: 100.01%; 20 color: #333; 21 } 22 23 .f07 {font-size:0.4375em;} 24 .f07b {font-size:0.4375em; font-weight:bold;} 25 .f08 {font-size:0.5em;} 26 .f08b {font-size:0.5em; font-weight:bold;} 27 .f09 {font-size:0.5625em;} 28 .f09b {font-size:0.5625em; font-weight:bold;} 29 .f10 {font-size:0.625em;} 30 .f10b {font-size:0.625em; font-weight:bold;} 31 .f11 {font-size:0.6875em;} 32 .f11b {font-size:0.6875em; font-weight:bold;} 33 .f12 {font-size:0.75em;} 34 .f12b {font-size:0.75em; font-weight:bold;} 35 .f13 {font-size:0.8125em;} 36 .f13b {font-size:0.8125em; font-weight:bold;} 37 .f14 {font-size:0.875em;} 38 .f14b {font-size:0.875em; font-weight:bold;} 39 .f15 {font-size:0.9375em;} 40 .f15b {font-size:0.9375em; font-weight:bold;} 41 .f16 {font-size:1em;} 42 .f16b {font-size:1em; font-weight:bold;} 43 .f17 {font-size:1.0625em;} 44 .f17b {font-size:1.0625em; font-weight:bold;} 45 .f18 {font-size:1.125em;} 46 .f18b {font-size:1.125em; font-weight:bold;} 47 .f19 {font-size:1.1875em;} 48 .f19b {font-size:1.1875em; font-weight:bold;} 49 .f20 {font-size:1.25em;} 50 .f20b {font-size:1.25em; font-weight:bold;} 51 .orange {color:#fa7d19;} 52 53 /** font-size switcher from:http://www.charite.de/metas vertical-align:baseline !important; **/ 54 #functions { position:absolute; right:3em; top:2em; width:5em; height:5px; padding:0; border:1px solid #999; } 55 56 #functions #font_switcher ul { list-style-type: none; vertical-align:bottom; border-bottom:0px solid #999; } 57 #functions #font_switcher ul li { float: left; width: 1.6em; height:1.2em; margin: 0; } 58 59 #functions #font_switcher a { margin: 0 2px; font-weight: bold; color: #999; background: #fff; text-decoration: none; } 60 #functions #font_switcher a:hover, 61 #functions #font_switcher a:active, 62 #functions #font_switcher a:focus { color: #000; background: #fff; text-decoration: underline; } 63 64 #functions #font_switcher #font_0_75 { font-size: 0.61em; } 65 #functions #font_switcher #font_0_85 { font-size: 0.70em; } 66 #functions #font_switcher #font_1_0 { font-size: 0.80em; } 67 #functions #font_switcher #font_1_2 { font-size: 0.96em; } 68 #functions #font_switcher #font_1_25 { font-size: 0.99em; } 69 70 #font_switcher dfn { 71 display:inline; 72 height:0; 73 left:-1000px; 74 overflow:hidden; 75 /**/ 76 position:absolute; 77 top:-1000px; 78 width:0; 79 } 80 </style> 81 82 <script type="text/javascript"> 83 <!-- 84 function set_cookie(name,value) { 85 expire_date = new Date(); 86 in_one_year = expire_date.getTime() + (365 * 24 * 60 * 60 * 1000); 87 expire_date.setTime(in_one_year); 88 document.cookie = name + "=" + value + "; expires=" + expire_date.toGMTString() + ";path=/;"; 89 } 90 91 function read_cookie_value(cookie_name) { 92 if(document.cookie.match(cookie_name)) { 93 cookie_name_length = cookie_name.length; 94 var cookie_position = document.cookie.indexOf(cookie_name); 95 var start_value_reading = cookie_position + cookie_name_length + 1; 96 var interim_value = document.cookie.substr(start_value_reading); 97 var position_next_separator = interim_value.indexOf(";"); 98 99 if(position_next_separator != "-1") { 100 var stop_value_reading = position_next_separator; 101 var cookie_value = document.cookie.substr(start_value_reading,stop_value_reading); 102 } else { 103 var cookie_value = document.cookie.substr(start_value_reading); 104 } 105 return cookie_value; 106 } 107 } 108 109 function change_body_font(span) { 110 font_size = span.substr(5,7); 111 new_font_size = font_size.replace("_","."); 112 set_cookie("accessibility_font_size",new_font_size); 113 //alert( new_font_size ); 114 location.reload(); 115 } 116 117 function show_font_switcher() { 118 document.write("<div id=\"font_switcher\">"); 119 document.write("<ul>"); 120 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öße\">A<\/a><\/li>"); 121 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öße\">A<\/a><\/li>"); 122 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ße Schriftgröße\">A<\/a><\/li>"); 123 document.write("<\/ul>"); 124 document.write("<\/div>"); 125 } 126 127 function show_font_switcher_en() { 128 document.write("<div class=\"middle\"><div id=\"font_switcher\">"); 129 document.write("<ul>"); 130 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>"); 131 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>"); 132 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>"); 133 document.write("<\/ul>"); 134 document.write("<\/div><\/div>"); 135 } 136 137 function apply_accessibility_font() { 138 if(document.cookie) { 139 cookie_value = read_cookie_value("accessibility_font_size"); 140 document.getElementById("wrapper").style.fontSize = cookie_value + "em"; 141 document.getElementById("f-size").innerHTML = cookie_value + "em"; 142 } 143 } 144 // --> 145 </script> 146 </head> 147 148 <body onload="apply_accessibility_font();"> 149 150 <div id="functions"><script type="text/javascript">show_font_switcher();</script></div> 151 152 <div class="f07">font f07</div> 153 <div style="font-size:7px !important; margin-bottom:0.5em;">font f07</div> 154 155 <div class="f15">font f15</div> 156 <div style="font-size:15px !important; margin-bottom:0.5em;">font f15</div> 157 158 <div class="f12b orange">font f12b orange</div> 159 <div style="font-size:12px !important; color:#fa7d19; font-weight:bold; margin-bottom:0.5em;">font f12b orange</div> 160 161 <div class="f16">font f16</div> 162 <div id="wrapper" style="margin-bottom:0.5em;">font f16 = <span id="f-size"></span></div> 163 164 </body> 165 </html> 166 167