Hilfe:Textgestaltung/Layoutfluss

aus Wikipedia, der freien Enzyklopädie
< Hilfe:Textgestaltung
(Weitergeleitet von Hilfe:Clear)
Zur Navigation springen Zur Suche springen

Diese Hilfeseite beschreibt, wie sich bei der Textgestaltung einer Wiki-Seite Layoutfluss einsetzen lässt.

Grundprinzip

[Bearbeiten | Quelltext bearbeiten]

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).

Bild
oder
anderes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis. Maecenas non commodo ante. Morbi hendrerit ullamcorper eleifend.

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

[Bearbeiten | Quelltext bearbeiten]

In HTML gibt es zwei Grundtypen von Elementen:

  1. inline – zeilenweiser Textfluss;
  2. 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:

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 Bildparameter links / left die Eigenschaft float:left).
style="float:right"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus.
style="float:left"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus.

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
class="float-right"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus.
class="float-left"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus.

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
class="floatright"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis.
class="floatleft"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis.
class="tright"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis.
class="tleft"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et lacinia purus. Fusce placerat odio interdum ante maximus, a sodales sem mattis.

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

[Bearbeiten | Quelltext bearbeiten]

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) fortsetzen
  • clear:left – links normal (bis zum Rand) fortsetzen
  • clear: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 aufzuheben
  • clear: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.

Etwa
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:

Etwa
eine
Infobox
oder
anderes
das
rechts
hoch
ist
Kleineres
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

[Bearbeiten | Quelltext bearbeiten]

Tabellen 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 | Quelltext 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.
Eine Infobox
oder anderes
auf der
rechten Seite
lässt dem
Text keinen
Platz mehr.
Ein Bildchen
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 | Quelltext bearbeiten]
  • Eine veraltete Form wäre das HTML-Attribut float= in einem Element an Stelle von style= und sollte ersetzt werden.
    • float="right" wird zu style="float:right" und float="left" ist style="float:left" analog.
  • Genauso wurde bis 1998 clear="right" (style="clear:right") und clear="left" (style="clear:left") sowie clear="all" (style="clear:both") verwendet.
  • align="right" (entsprechend left) hat bei Anwendung auf Block-Elemente die gleiche Wirkung wie float:right bzw. left, bei Anwendung auf Inline-Elemente bewirkt es hingegen die Textausrichtung innerhalb des Elements.

Anhang: globales CSS

[Bearbeiten | Quelltext bearbeiten]

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 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 | Quelltext bearbeiten]

Anmerkungen

[Bearbeiten | Quelltext bearbeiten]
  1. ↑ 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, muss style= direkt verwendet werden.
  2. ↑ dewikiCommonLayout
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Hilfe:Textgestaltung/Layoutfluss&oldid=246784683#clear“