27.1.2012

Skalierbare Schrift

Die Schrift in der linken Navigationsleiste verändert jetzt ihre Größe beim Ändern der Fenstergröße. Wen's interessiert - so wird's gemacht:
Das Originalskript stammt von hier:
"Copyright (C) 2001 John Weir www.smokinggun.com - This code is free for use. If possible include the copyright."

Das Skript holt sich die aktuelle Fenstergröße beim Laden der Webseite und stellt dazu passend eine Schriftgröße ein. Per Eventhandler wird die Fenstergröße überwacht. Wird die Fenstergröße geändert, wird die Schriftgröße automatisch angepaßt. Der zu skalierende Bereich sollte in enem eigenen Container (DIV o.ä.) liegen. Die ID dieses (DIV-)Containers wird als zweiter Parameter an die resizeText-Funktion übergeben.
Die Schriftgröße im zu skalierenden Container sollte per em, per Prozent oder gar nicht festgelegt sein, sonst skaliert sie nicht. Auf dieser Webseite wurde die Schriftgröße im zu skalierenden Container auf 0.6 em festgelegt (ausprobieren, was paßt).
Das Skript kann dann folgendermaßen eingebunden werden:

			function resizeAufruf() {
				resizeText("body","navigation");
			};		
			window.onload=resizeAufruf;
			window.onresize=resizeAufruf;
		

Die Aufrufunktion ermöglicht es, die notwendigen Parameter zu übergeben. Das sind die ID des Body-Tags und die ID des zu skalierenden Containers. Nach Laden der Webseite und beim Ändern der Fenstergröße wird die Funktion ausgeführt und damit die Schriftgröße angepaßt. Der Code der Funktion:

			function resizeText(Body_ID, Container_ID) {	
				mod = document.getElementById(Body_ID).offsetWidth;		
				mod = Math.round(mod/40);	
				obj = document.getElementById(Container_ID);
				if (mod < 9) mod = 9;
				obj.style.fontSize = mod+"px";
				obj.style.lineHeight = (mod*1.3)+"px";	
				window.status = mod;
			}
		

1. Ermitteln der aktuellen Fenstergröße
2. Berechnen der Schriftgröße aus der Fenstergröße - die Konstante ist bei Bedarf anzupassen
3. Ermitteln des Zielcontainers
4. Festlegen einer Minimalgröße - sonst kann man's nur noch mit der Lupe lesen
5. Zusammensetzen und Zuweisen von Schriftgröße und Zeilenhöhe
6. Ausgabe in der Statuszeile

25.1.2012

Jetzt online - Das Weblog der Kleinenspitzmaus

Hier wird in unregelmäßigen Abständen unwichtiges abgesondert. Einfach mal reinsehen.

Photogalerie - jetzt auch verfügbar

Hiermit möcht' ich auf die erste Photogalerie der Kleinenspitzmaus hinweisen. Sie hat ihren Dienst jetzt auch aufgenommen. Folge dem Link und viel Spaß