Jetzt abonnieren!
Flexible Layouts, Schriftgrößen und Ihre Problemchen
Wer mit der em-Angaben bei der Breite oder Höhe von Containern arbeitet, sollte darauf achten im Dokument stets die gleiche Schriftgröße einzuhalten, da die Größe von 1em ja bekanntlich von der Größe der Schrift IM Container abhängt. Habe ich also im body eine Schriftgröße von 62.5% verwendet, kann ich fortan komfortabel damit arbeiten das 1em = 10px sind.
10 Pixel Schriftgröße sind jedoch für Fließtext eindeutig zu klein. Habe ich nun einen 320 Pixel breiten Inhaltsbereich definiert: #content {width: 32em;}, so wächst dieser direkt auf über 400 Pixel Breite an, wenn ich die Schriftgröße innerhalb des #content-Containers auf lesbare 13 Pixel erhöhe. Nun stellt dies eigentlich kein größeres Problem dar, jedoch müsste ich für den #content erneut ausrechnen wieviel em ich bei 13 Pixel Schriftgröße brauche, um wieder auf meine gewünschten 320 Pixel zu kommen.
Ändere ich also in einem Dokument in mehreren Containern die Schriftgröße, beispielsweise eine größere Schrift für die Navigation, kleinere Schrift in der Fußzeile, müsste ich jedesmal aufs Neue ausrechnen, wieviel em mein Element breit sein muss, damit ich auf die gewünschten 320px komme.
Die Variante die ich bisher immer benutzt habe, um dies zu umgehen:
body {font-size: 100.01%;}
.font {font-size: 0.8125em;}Ich habe die Schriftgröße im body bei 16px belassen (100.01%), und eine Klasse erstellt in der ich die Schriftgröße mit 0.8125em, also 13 Pixel verringere. Ein entsprechendes Konstrukt könnte dann so aussehen:
<div id="content">
<p class="font">Ich bin mal ein Fließtext wenn ich größer bin</p>
</div>Mir kommt diese Methode allerdings ein wenig umständlich vor um vernünftig mit em-Angaben zu arbeiten. Eine andere Möglichkeit wäre natürlich eine Klassenverschachtelung in der Form #content p {font-size: 0.8125em;}. Nun stellt sich mir hier die Frage was sauberer ist: die Schriftgröße durch eine Klassenvergabe im Markup zu regulieren, oder indem ich davon ausgehe, dass sich jeder Text innerhalb des #content, #footer, usw. brav innerhalb eines <p> o.Ä. befindet und ich somit durch diesen im Stylesheet darauf zugreifen kann.
Vielleicht geht das Ganze aber auch noch viel einfacher, und Ihr habt vielleicht die passende Zange parat um das Brett vor meinem Kopf abzulösen.
Und verzeiht mir bitte etwaige Fehler, ich schreibe gerade einen Text und hab den Eintrag hier nur in aller Eile verfasst um mal Eure Meinungen und Lösungen dazu zu hören.
Veröffentlicht: 26.01.2006, 21:26 Uhr
Rubrik:
Tags:
Diskussion: 7 Kommentare
Social Media:
7 Kommentare zu “Flexible Layouts, Schriftgrößen und Ihre Problemchen”
Die Trackback-URL lautet
Januar 26th, 2006 at 22:44
Also ich muss ehrlich gestehen ich kappiere überhaupt gar nicht warum du dir da so einen rießen Kopf darüber machst?!
Ich gebe dem
body { font-size: 100.1%; }um den IE Bug auszubügeln und dann habe ich sowieso immer irgendwelche grupierenden divs wie#content { font-size: 0.9em; }und da gebe ich einfach die Schriftgröße ein, die gut aussieht und zum Design passt, ich probiere einfach erst mal 0.9em, dann 0.8em dann 1em und irgendwann gefällt es mir und so lasse ich es dann, warum da irgendetwas rechnen? Das wird sowieso nie stimmen, da man eine mindestgröße angeben kann, man kann für 1em auch was anderes als 16px angeben usw. usf. es ist total unerheblich wie du deinen Browser eingestellt hast. Wenn du deine Schriftgröße wirklich kontrollieren willst dann nutze doch einfach px als Maßeinheit und dann hast du sie für 90% User im Griff, wenn du em nutzt dann mach es auch richtig und finde dich damit ab dass sie überall eine andere größe hat.Januar 26th, 2006 at 22:51
naja, ich nutze halt
emangaben für die breite der einzelnen container, damit die hinterher vollständig skalierbar bleiben. wenn ich da wieder auf pixel setze hab ichs zwar ganz genau so wie ich das haben will, allerdings kann ichs dann auch wieder nicht mehr vernünftig skalieren.daher war mein vorhaben, dass ich vollständig auf pixel verzichte.
was die browsereinstellungen bezüglich em betrifft, so denke ich schon das 98% der user nichtmal wissen das man die standardschriftgröße ändern kann.
Januar 26th, 2006 at 23:02
Aha, und für die 2% machst du dir so einen Aufwand, wobei die auch noch so undankbar sind und die pixelangabe von 1em = 16px verändern und somit dein Design zerschießen? Komm schon das ist doch nicht sinnvoll. Mach gute Polsterbreiche so dass schriftgrößenveränderung egal ist und setze nicht ein pixelgenaues Layout in em um, das wird genau so schief gehen wie ein Frame- oder Tabellenlayout in gutem CSS umzusetzen.
Januar 27th, 2006 at 17:11
Blöde Frage: wie kommst Du darauf?
BTW, im Zuge dessen gerade gefunden:
Approximate Conversion from Points to Pixels (and Ems and %)
Umrechnung Pt / em nach Px
Januar 27th, 2006 at 17:13
16px standard browserschriftgröße * 0,625 = 10px.
schau mal im webkrautsadventskalender, tag 10, »basis stylesheet« von jens ;)
Januar 27th, 2006 at 18:37
Die
#content p-Methode sieht mir schon mal viel besser aus als die mit derfont-Klassenvergabe. Am flexibelsten wäre wahrscheinlich, überall noch ein extra-Div hineinzuschachteln, und diesem dann die Schriftgrößenveränderung zu verpassen. Dann wird der Code natürlich etwas Div-lastiger, aber das ist meiner Meinung nach immer noch besser als ganz oft den selben (präsentativen!) Klassennamen zu verteilen. Vor allem muss man dann (pro Box) nur einen Container einrichten, und braucht nicht dafür zu sorgen, dass jedem Element mit anderer Schriftgröße diese Klasse zugewiesen werden muss.@ Jeena:
Das Ziel vom em-basierten Layouten ist doch gerade, dass das Layout von einer anderen Schriftgröße nicht zerschossen werden kann. Der Anteil an Nutzern, der diese Elastizität nutzt, ist wahrscheinlich schon relativ gering, aber das wäre es mir wert.
April 15th, 2007 at 13:04
[…] http://www.manuelbieh.de/www/blog/blogbasher-bashing http://www.manuelbieh.de/www/blog/flexible-layouts-schriftgrosen-und-ihre-problemchen http://www.manuelbieh.de/www/blog/free-laptops-der-selbsttest […]