Kapitel 7.2: Grundlagen der visuellen Formattierung
Inline Elemente
Inline-Elemente wie <em> oder <span> oder ersetzte Elemente wie <img> sind nicht mit table-Elementen zu verwechseln, welche eine völlig eigene CSS-Implementierung haben (S. Kapitel 11).
Grundbegriffe und –Konzepte
Anonymous Text: Jeder Textstring, der in keinem Inline-Element eingebunden ist.
Beispiel: <p> I'am <em>an inline Element</em> in a Paragraph</p> . Das ist anonymous Text
Em-Box: Character-Box, die effektive Font-Definition. Aktuelle Buchstaben können etwas grösser oder kleiner sein, als deren em-Box. (Schriftlayout)
Content Area: Sie kann entweder die Em-Box sein oder aber die Glyphen (Ober-und Unterlängen) der Schriftart, die gewählt wurde. In ersetzten Elementen wird die Content- Area durch die Eigenhöhe und Breite des Elementes bestimmt (img).
Leading: Ist die Differnz zwischen der Schriftgrösse (font-size) und der Zeilenhöhe (line-height), geteilt durch zwei. Die Hälften werden je unten und oben an den Content-Bereich angefügt (half-leading)
Inline Box: Das Ergebnis der Addition von Leading + Content Area. Für nichtersetzte Elemente genau die Zeilenhöhe. Für ersetzte Elemente besteht sie genau aus der Höhe der Content-Area (ohne Leadings).
Line Box: Ist in einer rellen Zeile genau der höchste und tiefste (vertikale) Höhenpunkt der Inline-Box.
Die Content Area kann als Analogon zur Content-Box eines Block-Level-Elementes betrachtet werden.
Der Hintergrund besteht aus der Fläche der content Area plus ev. padding.
Jeder Border umfliesst die Content-Area plus ev. Padding und Borders
Paddings, borders und margins in nicht–ersetzten Elementen haben keinerlei "vertikalen" Grösseneinfluss auf inline Elemente. Sie verändern die Höhe der Inline-Box nicht.
Margins und Paddings beinflussen jedoch die Höhe von ersetzten Elementen und natürlich die Höhe der Line-Box, in der sich des ersetzte Element befindet.
Die vertikale Anordnung von Inline-Boxen erfolgt mit vertical-align.
Vorgehen zur Bestimmung der effektiven Höhe von Inline-Elementen:
1. font-size + line-height herausfinden und nach der half-leading-Methode zusammenzählen (ergibt: Inline-Box-Höhe) bei nichtersetzten Elementen.
2. height + margin-top + border-top+padding-top+padding-bottom+border-bottom+margin-bottom zusammenzählen, um die Höhe eines ersetzten Elementes zu bestimmen.
3. Für jede Content-Aera herausfinden, welcher Teil oberhalb und welcher unterhalb der Basislinie ist. Dazu muss die Position der Baseline für jedes Element bekannt sein (nonreplaced, anonymous, replaced) bekannt sein.
4. Den vertikalen Offset von Elementen herausfinden, die einen Wert von vertical-align erhalten haben. Dies gibt die relative Position des Elementes zur Content-Area an.
5. Berechnen der effektiven Box-Höhe durch Addition der Distanz zwischen der Basislinie des obersten Elementes der Inline-Box zum höchsten Punkt, sowie der Basislinie des untersten Elementes zu seiner untern Boxlinie .
Inline Formattierung
Obwohl gesetzte line-height-Attribute in einem Blockelement ohne physisch vorhandene Inline-Elemente keinerlei Wirkung zeigen, so wird letztendlich die minimale line Box im umfassenden Block-Element für alle Inline-Elemente gesetzt.
Beispiel: p.spacious{line-height: 24pt} //Für sämtliche Inline-Elemente gesetzte minimale Linehöhe der class p.spacious
Vorerst wird jedoch die Content-Box durch die Schriftgrösse (em-Box) festgelegt. Dies gilt für alle anonymen und nichtersetzten Elemente. Der nächste Schritt ist das half-leading der Zeilenhöhe zur Bestimmung der eigentlichen Text-Box-Höhe.
Beispiel: <p style="font-size:12px;line-height:12px">
This is text, <em>some of which is emphasized</em>, plus other Text
which is <strong style="font-size:14px">Strongly emphasized<</strong> and which is larger than the surrounding text</p>
Da die line-height-Angabe über <p> vererbt wird, hat die neue Schriftgrössendefinition in <strong> zwar Wirkung, fällt aber aus der Zeilenhöhe hinaus, weil diese anderweitig festgelegt wurde und auch so bleibt. Die 12px-Inline-Box ist aufgrund der Zeilenhöhe vertikal zentriert am 24px-Block. Sie ist schmaler als die vorhandene content-area.
Die vordefinierte Box setzt den Text auf die Baseline Die 24px-Höhe überlappt die Line-Box des vordefinierten Elements und bestimmt dessen Höhe.
Vertikale Ausrichtung (vertical Alignment)
Beispiel (wie ober aber mit vertical-align):
<p style="font-size:12px;line-height:12px">
This is text, <em>some of which is empgasized</em>, plus other Text
which is <strong style="font-size:14px;vertical-align:4px>Strongly emphasized</strong> and which is
larger than the surrounding text
</p>
Der Effekt ist ersichtlich. Die Höhe des zusätzlichen Inline-Elements wird gegenüber der Basislinie um 4px erhöht. Die Inline-Box wird um den Betrag erhöht.
Dasselbe geschieht, wenn ein vertical-align:top gesetzt wird. Da font-size und line-height gleich hoch sind, ist die Content Area gleich der Inline-Box. Der Text richtiet sich also an der Oberlinie der gesetzten Inline-Box aus.
Aus dieser Sicht können nun die Attribute von vertical-align in Inline-Elementen (nonreplaced und anonymous) genau bestimmt werden:
vertical-align:
top: Top der Inline-Box wird auf Top der Line-Box gesetzt.
bottom: Bottom der der Inline-Box wird auf bottom der parent content-area gesetzt.
text-top: Top der Inline-Box wird auf den Top der parents content-area gesetzt.
text-bottom: Bottom der Inline-Box wird auf bottom der parent content-area gesetzt
middle: Vertikaler Mittelpunkt der Inline-Box auf die Hälfte der ex oberhalb der Basislinie des Parent
super: Hinaufschieben (je nach Browser)
sub: Herabsetzen (je nach Browser)
Prozentsatz: Verschiebung in % der Zeilenhöhe, die deklariert wurde.
Managment des Line-height-Attributs
p {font-size:12px;line-height:1em}
big{font-size:250%; line-hight:1em}
<p>This is text, <em>some of which is emphasized</em>, plus other Text
which is <span><big>Some big Text</big></span> and which is
larger than the surrounding text
</p>
Auch mit borders ,kann eine Überlappung verhindert werden, wenn die jeweilige Zeilenhöhe an die Border-Dicke angepasst wird.
Da die Baseline einer em-Box meist nicht genau der effektiven Höhe der Schriftgrössen entspricht, kann das Problem der Konsinstenz in der Erscheinung auf dem Bildschirm nur mit line-height em-Angaben einigermassen in den Griff bekommen werden.
Skalierte Line-height-Angaben
Dies geschieht am besten mit einem gleich bleibenden Skalierungsfaktor der line-hight–Eigenschaft.
Beispiel: p{font-size: 15px;line-height:1.5;}
small{font-size:66%}
big{font-size: 200%} //Der Skalierungsfaktor wird aus p vererbt auf alle andern besondern font-size-Angaben und bleibt so einigermassen konsistent. Er kann aber auch genau 1.0 betragen, dann entspricht die jeweilige Schriftgrösse in etwa der font-size-Angabe.
Hinzufügen von Box-Attributen
Das Hinzufügen von padding und border-style-Elementen ändert an der Content-Box-Höhe nichts.
Auch margin-angaben verhalten sich gegenüber nicht-ersetzten Inline-Elementen nicht anders.Ebenso verhält es sich mit Background.
Ersetzte Inline-Elemente
Weil sie eine eigene Höhe und Breite haben, bestimmen sie die Grösse der Line-Box aus sich heraus. Eventuelle Box-Eigenschaften werden der Höhe und Breite dieser Elemente hinzugezählt.
Ersetzte-Elemente besitzen eine eigene line-height-Eigenschaft, die es erlaubt, sie gegenüber andern Elementen mit vertical-align zu positionieren.
Box-Eigenschaften addieren sich vollumfänglich zu diesen Elementen.
Sie sitzen auf der Baseline der Zeile und lassen sich dementsprechend mit alignment und margins nach oben oder nach unten verschieben.
Die neuen CSS-Definitionen, welche erlauben, ein Bild innerhalb einer Tabellen-Zelle auf die Baseline der Zellenmasse ausrichten, sind leider nur in Gecko-Browsern effektiv realisiert.
Dazu gibt es einen Workarround:
Beispiel: td{font-size:12px}
img.block{display:block}
Dies ermöglicht Bildeingaben, als sogenannte spacer.gifs (1px-Höhe;1px-Breite) welche auf der Baseline der Tabellenzelle sitzen und praktisch unsichtbar sind.
Dieses Verhalten hat historische Gründe, die darin liegen, dass Inline-Elemente ursprünglich noch auf den Textbrowser Mosaic ausgerichtet waren.
Änderung von Display-Elementen
Display:Block; Display:Inline Blockelemente können zwar in der Präsentation in Inline-Elemente umgewandelt werden, aber sie verlieren dadurch ihren ursprünglichen Charakter nie. Deshalb können aus Inline-Elementen nie Blockelemente, sondern nur aus Blockelementen Inline-Elemente aufgebaut werden.
Display: inline-block (neu in CSS 2.1)
Ein Hybrid , dass sich wie ein Inline replaced-Element verhält. Trotzdem wird es wie ein Block-Element formattiert. Width und Height können demnach angewandt werden.
Beispiel: div{margin: 1em 0;border: 1px solid}
p{border: 1px dotted}
div#one p{display:block;width: 6em;text-align:center}
div#two p{display:inline; width: 6em;text-align:center}
div#three p{display:inline-block;width: 6em; text-align:center}
Run-In Elemente (CSS2, funktionieren in allen Browsern unbefriedigend)
Auch ein Block-Inline-Hybrid, welches ein Inline-Elemnt in ein Block-Element einfügt.
Ist nützlich für gewisse Heading-Effekte, welche das Heading zum Teil eines Textes machen.
Beispiel: <h3 style="display:run-in;border:1px dotted;font-size: 125%;font-weight:bold;">Run-In-Element</h3>
<p style="border-top: 1px solid black;padding-top:0.5em;">Interessant, weil das Run-In-Element ein Inline-Teil des folgenden Blocks darstellt. Kann zu interessanten typografischen Heading Effekten führen. </p>