Hilfe:Textgestaltung/Layoutfluss
Diese Hilfeseite beschreibt, wie sich bei der Textgestaltung einer Wiki-Seite Layoutfluss einsetzen lässt.
Grundprinzip
Es können blockartige Objekte entweder links oder rechts in einen Gestaltungsrahmen (meist die Breite des Artikel-Inhaltsbereichs) eingebettet werden.
Der zeilenweise orientierte Fließtext „umfließt“ dann diese Objekte (daher der Name).
oder
anderes
Es sind in HTML nur die Positionen „ganz links“ und „ganz rechts“ möglich; nicht aber in der Mitte. Die Blöcke müssen auch rechteckige Gestalt haben; freie Formen wie beim Kontursatz sind nicht möglich.
- Weil am linken Rand Aufzählungspunkte und Überschriften bündig untereinander stehen sollen, sind die Objekte auf der Wiki-Seite meist am rechten Rand angeordnet.
- Weil es auf Smartphones Platzprobleme gibt, ist es meist nicht sinnvoll, gleichzeitig links und rechts Objekte darzustellen, und zwischen ihnen auch noch lesbare Textzeilen.
- Die Präsentation ist – anders bei einem Ausdruck auf Papier – dynamisch und richtet sich insbesondere nach der momentanen Bildschirmbreite bzw. Fensterbreite beim Leser. Was für einen Autor auf breitem PC-Desktop wohlgestaltet aussieht, kann auf einem Mobilgerät katastrophal werden. Eine gewisse Mindestbreite ist allerdings für eine Wiki-Seite sinnvollerweise immer vorauszusetzen.
Spezifikation
In HTML gibt es zwei Grundtypen von Elementen:
Die Block-Elemente können rechts oder links außen angeordnet werden; Abschnitte mit inline-Inhalten umfließen sie dann.
Zu den für den Wikitext sinnvollen Block-Elementen gehören:
<div>-Elemente in HTML- Tabellen
- Miniaturbilder
- Verschiedene meist die gesamte Bildschirmbreite füllende Spezialitäten wie etwa Galerien.
Was ansonsten als normaler Inhalt von Abschnitten daherkommt, hat in der Regel inline-Charakter.
Mit der nachstehenden CSS-Anweisung kann einem Block-Element die rechtsbündige Anordnung zugewiesen werden:
style="float:right"
- Analog gibt es für linksbündig:
style="float:left" - Miniaturbilder haben von Natur aus die Eigenschaft
float:right(bzw. beim Bildparameterlinks/leftdie Eigenschaftfloat:left).
Vorteilhafter ist es meist, hierfür „Klassen“ zu verwenden, weil diese gleichzeitig auch einen schmalen Abstand zum umfließenden Text setzen.[1]
In der deutschsprachigen Wikipedia gibt es:
| Ausrichtung | Schmaler Abstand | |
|---|---|---|
class="float-right"
|
rechtsbündig | Überall außer rechts |
class="float-left"
|
linksbündig | Überall außer links |
Außerdem gibt es analoge globale Definitionen:
| Ausrichtung | Wirkung | |
|---|---|---|
class="floatright"
|
rechtsbündig | Ähnlich der deutschsprachigen Wikipedia; setzen den Inhalt jedoch unter bestimmten Bedingungen in Kursivschrift, dafür keinen Rand nach oben. |
class="floatleft"
|
linksbündig | |
class="tright"
|
rechtsbündig | Sehr ähnlich der deutschsprachigen Wikipedia; setzen auch einen schmalen Rand nach oben, dafür aber nichts in Kursivschrift. |
class="tleft"
|
linksbündig |
Die Größe der Abstände zum Textfluss können im Lauf der Zeit variieren; auch je nach Endgerät und Design unterschiedlich ausfallen.
Keine Spezifikation existiert zu den nachfolgenden Klassenbezeichnern:
| Wirkung | |
|---|---|
class="floatnone"class="float-none"class="tnone"
|
Keine. |
Diese Klassen werden gelegentlich in Elementen angegeben, um ausdrücklich darauf hinzuweisen, dass weder links noch rechts angeordnet werden soll, während andere Elemente in der Umgebung ausgerichtet werden.
Zurücksetzen
Tabellen, Galerien, Blockzitate und andere für die volle Breite ausgelegte Elemente setzen den Layoutfluss standardmäßig zurück; beginnen also wieder in der vollen Breite des Artikel-Inhaltsbereichs (nicht aber Überschriften!). Durch Angabe von style="float:..." bzw. style="clear:none" kann das beeinflusst werden.
Das Gegenstück zur CSS-Anweisung float: ist clear: – der Attributwert kann fünf zulässige Werte annehmen:
clear:right– rechts normal (bis zum Rand) fortsetzenclear:left– links normal (bis zum Rand) fortsetzenclear:both– also beides; in voller Breite des Artikel-Inhaltsbereichs fortsetzen (bzw. eines umschließenden Blockes)clear:none– nur sinnvoll, um die gleiche Spezifikation desselben Elements durch eine übergeordnete Stilzuweisung wieder aufzuhebenclear:inherit– „erbt“ die Eigenschaft von übergeordneten Spezifikationen (allgemeine Vorgabe); eine explizite Angabe wäre für Wiki-Artikel wenig sinnvoll, allenfalls in der gehobenen komplexen Programmierung.
An der gestrichelten roten Linie steht style="clear:right" und bewirkt, dass erst weitergemacht werden kann, nachdem der Kasten rechts beendet wurde.
eine
Infobox
oder
anderes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam vel fringilla mi, quis semper felis. Vestibulum at volutpat enim.
Es ist auch möglich, nur einseitig den Neubeginn unmittelbar am Rand einzufordern; jedoch am gegenüberliegenden Rand ein eingebettetes Objekt fortzusetzen. Im folgenden Beispiel steht an der gestrichelten roten Linie style="clear:left" und wirkt sich nur auf das Objekt links aus, während das Objekt rechts nicht betroffen ist:
eine
Infobox
oder
anderes
das
rechts
hoch
ist
Bildchen
nicht
allzu
hoch
Lorem ipsum dolor sit amet.
Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis. Maecenas non commodo ante. Morbi hendrerit ullamcorper eleifend. Nulla euismod tincidunt rhoncus.
Meistens setzt man gleich style="clear:both" für beide Seiten, um mit Sicherheit einen sauberen Neuanfang zu erhalten:
<div style="clear:both"></div>
Eine veraltete Form wäreclear="all" (oder clear="left" bzw. clear="right"). Dies sollte ersetzt werden, wo immer es zufällig angetroffen wird.
Es gibt hierfür auch eine Vorlage mit einem völlig irreführenden Namen, die nicht das macht, was sie suggeriert: Vorlage:Absatz – tatsächlich ist aber ein Absatz (Text) etwas fundamental anderes. In der Wirkung führt sie einfach zu den Varianten von clear: - in der enWP heißt die Vorlage auch entsprechend Template:Clear.
Tabellen
Tabellen ordnen ihr Layout ebenfalls nach dynamischen Gesichtspunkten beim Leser an, allerdings ist die Zellenstruktur von der Wiki-Seite fest vorgegeben.
- Die Breite einzelner Zellen, ihr Breitenverhältnis zueinander und das Layout innerhalb jeder Zelle wird jedoch dynamisch vom Browser unter Berücksichtigung aller aktuellen Bedingungen beim Leser optimal ermittelt.
- Es empfiehlt sich deshalb, dem Browser nur zwingend erforderliche Layout-Vorgaben zu machen und ihm ansonsten freie Hand zu lassen. Jede überflüssige Spezifikation aus Sicht des Autors unter dessen Rahmenbedingungen ist für die Leser notwendigerweise suboptimal, weil praktisch immer schlechter als optimal; bestenfalls wirkungslos und redundant.
Layout-Hinweise
- Weil am linken Rand Aufzählungspunkte und Überschriften bündig untereinander stehen sollen, sind die Objekte auf der Wiki-Seite meist am rechten Rand angeordnet. Es kann ausnahmsweise auch links platziert werden, wenn in dem Abschnitt zwischen den Überschriften so viel Text vorhanden ist, dass bei jeder vernünftigen Bildschirmbreite und Schriftgröße die letzte Textzeile noch bis an das untere Ende des Objekts reicht, und es darin auch keine Aufzählungen gibt.
- Weil es mindestens auf Smartphones Platzprobleme gibt, ist es meist nicht sinnvoll, gleichzeitig links und rechts Objekte darzustellen, und zwischen ihnen auch noch lesbare Textzeilen.
oder anderes
auf der
rechten Seite
lässt dem
Text keinen
Platz mehr.
auf der
linken Seite
Lorem ipsum dolor sit amet Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis. Maecenas non commodo ante. Morbi hendrerit ullamcorper eleifend. Nulla euismod tincidunt rhoncus.
- Es ist möglich, eine Mindestbreite der Textzeilen sicherzustellen, indem die ersten Wörter in folgende Sequenz eingeschlossen werden:
<span style="white-space:nowrap">Am Anfang war das Wort.</span> Und das Wort …- Wenn beim Leser die Bildschirmbreite es zulässt, diese Textsequenz in einer Zeile und daneben das Objekt anzuordnen, dann erscheinen sie nebeneinander.
- Reicht die aktuelle Bildschirmbreite nicht aus, dann wird zunächst das Objekt angezeigt, und der Text beginnt erst darunter.
- Andernfalls kann es zu folgender hässlicher Situation kommen:
Am
Anfang
war das
Wort.
Und
das
- Es ist möglich, mehrere Elemente unmittelbar zueinander „ganz rechts“ anzuordnen.
- Damit können Fortgeschrittene ein dynamisches Layout erzeugen, das sich der momentanen Bildschirmbreite anpasst.
- In enzyklopädischen Artikeln hat das nichts verloren.
- Anders als mit (statischen) sogenannten „Layout-Tabellen“ wird die aktuelle Situation beim Leser berücksichtigt.
Veraltet
- Eine veraltete Form wäre das HTML-Attribut
float=in einem Element an Stelle vonstyle=und sollte ersetzt werden.float="right"wird zustyle="float:right"undfloat="left"iststyle="float:left"analog.
- Genauso wurde bis 1998
clear="right"(style="clear:right") undclear="left"(style="clear:left") sowieclear="all"(style="clear:both") verwendet. align="right"(entsprechendleft) hat bei Anwendung auf Block-Elemente die gleiche Wirkung wiefloat:rightbzw.left, bei Anwendung auf Inline-Elemente bewirkt es hingegen die Textausrichtung innerhalb des Elements.
Anhang: globales CSS
Nachstehend ein Schnappschuss auf globale Stil-Definitionen, die sich im Lauf der Zeit jedoch ändern können. Aktuell wirksame Deklarationen und ihr Speicherort wären über Wikipedia:Technik/Skin/MediaWiki zu ermitteln. Die Angaben gelten für Desktop und können auf Mobilgeräten oder speziellen Seiten abweichen.
div.floatright {
clear: right;
float: right;
position: relative;
margin: 0.5em 0 0.8em 1.4em;
}
div.floatleft {
clear: left;
float: left;
position: relative;
margin: 0.5em 1.4em 0.8em 0;
}
div.floatright p, div.floatleft p {
font-style: italic;
}
div.tright {
clear: right;
float: right;
margin: 0.5em 0 1.3em 1.4em;
}
div.tleft {
clear: left;
float: left;
margin: 0.5em 1.4em 1.3em 0;
}
Weitere Informationen
- Hilfe:CSS – Stildefinitionen in einer Wiki-Seite
- Hilfe:Tags – HTML-Elemente
