Automatische Ausrichtung
Die Ausrichtung von Text auf einer Website kann kompliziert werden, beispielsweise wenn rechtslaufende Sprachen wie Arabisch abgebildet werden sollen oder wenn aus gestalterischer Sicht Text von oben nach unten laufen soll. Wir geben euch in diesem Beitrag eine Übersicht über die verschiedenen CSS-Techniken zum Ausrichten und zum Positionieren von Text.
Horizontale Textausrichtung mit text-align
Um Text horizontal auszurichten, stehen euch mit CSS ähnliche Optionen wir in einer klassischen Textverarbeitung zur Verfügung. Ihr könnt Text links, zentriert oder rechts ausrichten bzw. Blocksatz verwenden. In CSS steuert ihr die Ausrichtung von Text über die Eigenschaft text-align. Es stehen folgende Werte zur Verfügung:
left: linksbündig
center: zentriert
right: rechtsbündig
justify: Blocksatz
Beachtet bitte, dass sich text-align auch an die Kind-Elemente weitervererbt und Inline-, sowie Inline-Block-Elemente beeinflusst. [2]
Verwechselt die Textausrichtung auch keinesfalls mit der Lese- bzw. Laufrichtung. Rechtslaufende Sprachen wie Hebräisch oder Arabisch würden falsch dargestellt werden, wenn ihr sie nur über text-align: right rechts ausrichtet. Die Satzzeichen stehen dann nämlich immer noch auf der falschen Seite der jeweiligen Zeile.
Horizontale Laufrichtung mit direction
Mit der CSS Eigenschaft direction steuert ihr die Laufrichtung von Text. Zur Auswahl stehen folgende Werte:
ltr für von links nach rechts laufenden Text (left to right) [2]
rtl für von rechts nach links laufenden Text (right to left) [2]
Folgender CSS-Code stellt einen Absatz rechtsläufig dar:
Der Unterschied zwischen rechtsbündig und rechtslaufend besteht darin, dass beispielsweise die Satzzeichen an anderer Stelle stehen. Für Texte in linkslaufenden Sprachen – z. B. dem nachfolgend abgebildeten Blindtext – ist rtl daher nicht geeignet. Für rechtslaufende Sprachen wie Arabisch ist der rtl-Wert allerdings zwingend notwendig
Gesamtes Layouts mit dir=“rtl“ spiegeln
Für rechtslaufende Sprachen kann es Sinn machen das gesamte Layout rechts auszurichten. Damit sich alle Blockelemente in einer Website automatisch rechts ausrichten und sämtlicher Text rechts läuft, ergänzt ihr einfach den -Tag eures Dokuments um das Attribut dir="rtl" (Direction: right-to-left).
Damit wird auch die Leserichtung des gesamten Dokuments gespiegelt. Satzzeichen werden also auf der linken Seite der jeweiligen Zeile angezeigt.
Im folgenden Beispiel wurde nichts am CSS verändert. Wir haben lediglich die Textausrichtung im -Tag wie beschrieben angegeben.
Vertikale Textausrichtung mit writing-mode
Um Text vertikal auszurichten existiert u.a. die CSS-Eigenschaft writing-mode. Wir haben bereits 2010 schon einmal über diese Eigenschaft berichtet. Allerdings war damals der Browsersupport auf den Internet Explorer beschränkt. Mittlerweile unterstützen es alle modernen Browser. Der Internet Explorer bis einschließlich Version 11 unterstützt jedoch andere Werte einer früheren Version von writing-mode die wir in dem erwähnten Artikel beschreiben.
Für alle anderen Browser (inkl. Microsoft-Browser ab Edge) verfügt die CSS-Eigenschaft writing-mode über folgende Werte:
horizontal-tb: ist die Standardeigenschaft und steht für »horizontal-top-to-bottom« – also die normale westliche Leserichtung von links nach rechts und von oben nach unten.
vertical-lr: steht für »vertical-left-to-right« [2]
vertical-rl: steht für »vertical-right-to-left« [2]
Mit writing-mode kann also bestimmt werden ob Text vertikal von links nach rechts oder andersherum vertikal und von rechts nach links läuft.
Text in einer Word-Tabelle ausrichten - so geht's [3]
1. Markieren Sie zuerst den gesamten Zelleninhalt, den Sie ausrichten möchten. Sollen mehrere Zellen verändert werden, können Sie die gleich mit markieren.
2. Klicken Sie oben rechts in der Menüleiste auf das neue Menü "Tabellentools" > "Layout".
3. Direkt darunter finden Sie im Kasten "Ausrichten" verschiedene Möglichkeiten, um den Text zu positionieren.
4. Hier können Sie zum Beispiel "Mitte-links" oder "Oben-rechts" anklicken, um den Text an der gewünschten Stelle anzuordnen.
5. Hinweis: Um den Text besser nach oben und unten ausrichten zu können, sollten Sie alle nicht genutzten Leerzeilen in den Zellen entfernen. [3]
Grafik zum umgebenden Text ausrichten
Da das img-Element ein Seite Inline-Element ist, können Grafiken mitten in einem Text platziert werden. Wenn nun aber die Grafik höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile in irgendeiner Weise zur Grafik ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zur Grafik ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zur Grafik ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten CSS-Stylesheets erzielen.
Beachten Sie:
Die Browser interpretieren zum Teil noch weitere Angaben. Diese sind jedoch nicht im HTML-Standard verzeichnet und führen deshalb zu ungültigem HTML. Erwähnt seien sie trotzdem:
Mit align="texttop" richten Sie den Text oben bündig zur Grafik aus, und zwar an der Oberkante des kleinsten Textes in der Zeile (texttop = oben am Text). [4]
Mit align="absmiddle" richten Sie den Text absolut mittig zur Grafik aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbündig zur Grafik aus, und zwar an der Unterkante des kleinsten Textes in der Zeile (absbottom = absolute bottom = in jedem Fall untenbündig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe. [4]
Text um Grafik fließen lassen
Grafiken, die Sie mit dem -Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt an der Grafik "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb der Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit nach unten CSS Stylesheets erzielen. [4]
Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb der Grafik angezeigt wird, können Sie einen Seite Zeilenumbruch mit dem Attribut clear= notieren.
Mit
erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb der Grafik fortgesetzt wird.
Mit
erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer linksbündig ausgerichteten Grafik fortgesetzt wird.
Mit
erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer rechtsbündig ausgerichteten Grafik fortgesetzt wird. [4]
Text [5]
Textfelder können unterschiedliche Schriftarten, -größen und -eigenschaften (fett, kursiv, ...) enthalten
Text kann horizontal oder vertikal angeordnet werden
Satz kann durch Unterschneidung (Kerning) einzelner Buchstaben verändert werden
Text kann einem Pfad folgen
Regulärer Text [5]
Startposition auf der Zeichenfläche auswählen
Text eingeben
Beachte: Umbruch muss manuell eingegeben werden [ENTER]
Fließtext [5]
mit dem Textwerkzeug wird ein Rahmen für den text aufgezogen
Text wird innerhlab des Rahmens automatisch umgebrochen
Beachte: Fließtext ist im SVG 1.2 Standard als Draft definiert. Darstellung in SVG-Renderern evtl. nicht unterstützt. Umwandlung in regulären Text möglich,
Formatierung [5]
mit der Menüzeile des Textwerkzeuges oder Dialog:
Schriftart
Schriftgröße
Ausrichtung (links, zentriert, rechts, Blocksatz nur bei Fließtext)
Beachte: vertikale Ausrichtung beginnt rechts oben, Zeilenumbruch läuft nach links
Unterschneidung (Kerning und Shifting) [5]
nur bei regulären Texten
Verschieben der Position einzelner Buchstaben nach links/rechts:
Verschieben einzelner Buchstaben von der Grundlinie (auf, ab):
Rotation von Buchstaben [5]
mit der Tastenkombination:
kerning.png
Text folgt einem Pfad [5]
1. Text mit dem Textwerkzeug erstellen
2. Pfad erstellen, z.B. eine Spirale
3. Text und Pfad mit dem Auswahlwerkzeug auswählen
4.
Pfad und Text können nachträglich modifiziert werden
Pfad kann z.B. durch entfernen von Füllung und Konturlinie unsichtbar gemacht werden
Text fließt in einer geometrischen Form [5]
• Umbruch folgt einer geometrischen Form
• Verbindung zwischen einem Textobjekt und einem Formobjekt
• Verbindung kann wieder aufgelöst werden
1. Text mit dem Textwerkzeug erstellen
2. geometrische Form erstellen (z.B. ein Rechteck)
3. Text und Pfad mit dem Auswahlwerkzeug auswählen
4.
⠀ Deklination des Substantivs. – Ressource: https://www.verbformen.de/deklination/substantive/?w=Ausrichtung
⠀ Textausrichtung mit CSS: Text von oben nach unten bzw. von rechts nach links schreiben. – Ressource: https://kulturbanause.de/blog/textausrichtung-mit-css-text-von-oben-nach-unten-bzw-von-rechts-nach-links-schreiben/
⠀ Word: Text in Tabelle ausrichten - so geht's. – Ressource: https://praxistipps.chip.de/word-text-in-tabelle-ausrichten-so-gehts_45203
⠀ Text. – Ressource: https://www.tu-chemnitz.de/urz/archiv/kursunterlagen/inkscape/text.html