www.lipfert-malik.de>webdesign>tutorial>Web Typographie> Skalieren per expression Impressum

Web Typographie
Kristof Lipfert
Dipl.-Des.(FH)

Schriftskalieren beim Internet Explorer

Während Opera und Mozilla Schrift auch bei Pixel -Angaben im Stylesheet vergössern können empfiehlt sich für die Internet Explorer mit relativen Grössen wie em zu arbeiten.

Expression

Eine Alternative ist der Einsatz von expression, die per JavaScript die vom Anwender eingestellte Schriftgrösse des IE abfragen und berücksichtigen.

Beispielcode

/* Autor Kristof Lipfert 2003 Düsseldorf */

div.test {
 font-size:21px;

 font-size:expression(parseInt(document.body.currentStyle.fontSize)*2.35+'px');

 line-height:expression(parseInt(document.body.currentStyle.fontSize)*1.4+'px')

}

Bei der Umsetzung ist zu bachten dass die Voreingestellte Schriftgröße als Style-Eigenschaft des body abgefragt wird. Eine Änderung im Stylesheet etwa per body{font-size:.8em} wirkt sich auf die in den expression immer wieder kontrollierten Werte aus.

Testfeld

Schriftgrösse und Elementbreite per Pixel: Beim IE werden die Pixel per expression festgelegt und skalieren mit.

Fazit

Empfehlenswert ist die Methode nur bedingt da sich bei komplexeren Stylesheets merkbare Verzögerungen beim Seitenaufbau ergeben können. CSS-Weichen ermöglichen es auch die IEs mit relativen Angaben und Mozilla oder andere mit Schriftgrössen per px zu versorgen ohne auf JavaScript und DHTML zurückzugreifen.

Vorteilhaft kann die Möglichkeit sein bei Bedarf die eingestellten Schriftgrössen mittels mathematischer Funktionen progressiv anzupassen und z.B. feiner abzustufen.

Validität

Per conditonal comments kann der Style mit dem proprietären Code als Kommentar geschrieben werden, genauso liesse sich auch eine externe Styledatei einbinden. Damit wird der Code vor anderen Clients versteckt und verursacht auch keine Meldungen bei üblichen Validatoren.

<!--[if IE]><style>

   ...

</style><![endif]-->

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 2003, 2004