Hilfe:Textgestaltung/Layoutfluss
Diese Hilfeseite beschreibt, wie sich bei der Textgestaltung einer Wiki-Seite Layoutfluss einsetzen lässt.
Grundprinzip
BearbeitenEs 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 Publikum. Was für Autoren 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
BearbeitenIn HTML gibt es zwei Grundtypen von Elementen:
inline
– zeilenweiser Textfluss;block
– Rechtecke mit vorgegebenen oder dynamisch errechneten Abmessungen.
Die Block-Elemente können rechts oder manchmal auch 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
/left
die 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:[2]
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 weltweit gültige 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
BearbeitenTabellen, 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:
.
Tabellen
BearbeitenTabellen ordnen ihr Layout ebenfalls nach dynamischen Gesichtspunkten im Endgerät 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 Publikum 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 das Publikum notwendigerweise suboptimal, weil praktisch immer schlechter als optimal; bestenfalls wirkungslos und redundant.
Unerwünscht ist eine starre Vorgabe der Seitenaufteilung mittels „Layout-Tabellen“. Diese geben eine feste Aufteilung der Seitenbreite vor, was für ein Desktop-Bildschirmfenster möglicherweise angemessen wäre, auf einem Smartphone jedoch dazu führt, dass nur der linke Bereich sichtbar und der rechte zunächst verborgen ist. Genau das sollte mittels Layoutfluss dynamisch gestaltet werden.
Layout-Hinweise
Bearbeiten- 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 Publikum 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 Publikum berücksichtigt.
Veraltet
Bearbeiten- 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:right
bzw.left
, bei Anwendung auf Inline-Elemente bewirkt es hingegen die Textausrichtung innerhalb des Elements.
Anhang: globales CSS
BearbeitenNachstehend 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 MediaWiki/Ressourcen 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
Bearbeiten- Hilfe:CSS – Stildefinitionen in einer Wiki-Seite
- Hilfe:Tags – HTML-Elemente
Anmerkungen
Bearbeiten- ↑
Die Klassendefinitionen setzen jeweils auch zunächst per
clear
auf den jeweiligen Rand zurück; garantieren somit, dass alle Blöcke untereinander am Rand vertikal aufgereiht sind. Sofern dynamisch nebeneinander horizontal angeordnet werden soll, mussstyle=
direkt verwendet werden. - ↑ dewikiCommonLayout