CSS/Tutorials/Typographie/Textausrichtung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Unter Textausrichtung sind Angaben zur Gestaltung von Textelementen zu verstehen, die die Ausrichtung des Textes innerhalb des Elementes beeinflussen. Zu nennen sind hier Hoch- oder Tiefstellungen, Bündigkeit von Absätzen oder das Verteilen von Text in mehreren Spalten. Sinnvoll sind solche Angaben für alle HTML-Elemente, die Text enthalten können. Dazu gehören alle Elemente, die im Kapitel HTML/Textstrukturierung beschrieben werden. Auch auf das html- und das body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden - in diesem Fall gelten die Angaben für alle Text-Elemente der HTML-Datei.

Einrückung mit text-indent[Bearbeiten]

Mit der Eigenschaft text-indent definieren Sie die Einrückung der ersten Zeile eines Absatzes. Sie können durch negative Werte auch hängende Zeilen bewirken.[1][2]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Details: caniuse.com

Die Eigenschaft text-indent kann folgende Werte haben:

  • Eine positive oder negative absolute Längenangabe.
  • Eine prozentuale Angabe relativ zur Breite des beinhaltenden Blocks.
  • each-line: erste Zeile des Blockelementes und alle anderen nach einem erzwungenen Umbruch
    (CSS3: wird von keinem Browser unterstützt.)
  • hanging: rückt alle Zeilen außer der ersten ein.
    (CSS3: wird von keinem Browser unterstützt.)
  • inherit: (Standardwert)
Beachten Sie: Der Defaultwert ist inherit. Die Wirkung muss also bei Kindelementen explizit ausgeschaltet werden.
text-indent ansehen …
      .bookstyle        { text-indent: 4em; }
      .bookstyle > *    { text-indent: 0; }
      .datalist         { padding: 0; margin: 0; }
      .datalist li      { padding-left: 40px; text-indent: -40px; }
      .datalist li > *  { text-indent: 0; }
      .img-replace-technique {
        width: 32px;
        height: 32px;
        float: left;
        margin-right: 8px;
        text-indent: -9998px;
        overflow: hidden;
        background: url(Iconset.png);
      }
      .img-replace-technique.ff { background-position: 0 -62px; }
      .img-replace-technique.ie { background-position: 0 -31px; }
      .img-replace-technique.ch { background-position: 0 -155px; }
<!-- 1. -->
    <p class="bookstyle">Die erste Zeile erscheint eingezogen.
      Jede Zeile nach dem ersten automatischen oder expliziten
      Umbruch erscheint normal.
    </p>
<!-- 2. -->
    <ul class="datalist">
      <li>
        <strong>Ein Label:</strong>
        gefolgt von weiterem Text der nach dem Umbruch aber
        eingerückt erscheint.
      </li>
      <li>
        <strong>Ein Label:</strong>
        gefolgt von weiterem Text der nach dem Umbruch aber
        eingerückt erscheint.
      </li>
    </ul>
<!-- 3. -->
    <ul class="iconmenu">
      <li class="img-replace-technique ff">Mozilla Firefox</li>
      <li class="img-replace-technique ie">Microsoft Internet Explorer</li>
      <li class="img-replace-technique ch">Google Chrome</li>
    </ul>
  1. Der Absatz im Buchstil weist eine mittels positivem text-indent-Wert eingerückte erste Zeile auf. Weil die Einrückung vererbbar ist, muss man ihr Verhalten bei Kindelementen kontrollieren.
  2. Die Liste rückt jede erste Zeile durch einen negativen text-indent-Wert aus. Diese Ausrückung wird durch das padding-left jedoch kompensiert, so dass in der Tat alle Folgezeilen der Listenpunkte eingerückt sind.
  3. In einem Icon-Menu sollen die Textlabels durch einen großen negativen text-indent-Wert ausgeblendet und durch die Background-Images ersetzt werden.

vertical-align[Bearbeiten]

Sie können mit der Eigenschaft vertical-align die vertikale Ausrichtung von Text kontrollieren. Es gibt dabei in Abhängigkeit der display-Eigenschaft verschiedene Interpretationen der Eigenschaft.

  • CSS 1.0
  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Die Eigenschaft vertical-align wird vererbt, folgende Werte können zugewiesen werden:

  • eine Längenangabe, positive Angaben heben das Element, negative senken es
  • Prozentwerte, sie beziehen sich auf die Zeilenhöhe, positive heben das Element, negative senken es

Erlaubt sind zudem folgende Schlüsselwörter:

  • baseline, richtet die Schrift-Grundlinie des Elements an der Grundlinie des Elternelements aus
  • middle, richtet die Kind-Box-Mitte an der Grundlinie plus der Hälfte der x-Höhe des Elternelements aus
  • sub, senkt die Grundlinie der Box auf die Höhe der Sub-Schrift des Parent-Elements, ohne die Schriftgröße zu verändern
  • super, hebt die Grundlinie der Box auf die Höhe der Super-Script des Parent-Elements, ohne die Schriftgröße zu verändern
  • text-top, richtet die Box-Oberkante an der Oberkante des Parent-Inhaltbereichs aus
  • text-bottom, richtet die Box-Unterkante an der Unterkante des Parent-Inhaltsbereichs aus
  • top, richtet den Inhalt der Box an der Oberkante der Linebox aus
  • bottom, richtet den Inhalt der Box an der Unterkante der Linebox aus
  • inherit, Voreinstellung, gibt an, dass der Wert des Elternelements übernommen wird

kein gültiges Schlüsselwort ist:

  • center, die meisten Browser interpretieren es dennoch als middle
Beispiel ansehen …
<!-- 1. -->
  <p class="one">Dieser Text hat verschiedene Inline-Elemente, 
  die bezüglich der Grundlinie wie folgt ausgerichtet sind: 
    <b style="vertical-align:super">Erhöht wie Superscript</b>
    <i style="vertical-align:sub">Abgesenkt wie Subscript</i>
    <span style="vertical-align:baseline">Erscheint normal</span>
  </p>

<!-- 2. -->
  <table>
    <tr>
      <td style="vertical-align:top">bündig oben</td>
      <td style="vertical-align:middle">zentriert</td>
      <td style="vertical-align:bottom">bündig unten</td>
    </tr>
  </table>
  1. Im Beispiel werden verschiedene Inline-Elemente innerhalb eines Block-Elements vertikal ausgerichtet.
  2. In Tabellen können Sie Zelleninhalte mit top middle oder bottom ausrichten. Damit die Auswirkung im Beispiel erkennbar wird, erhalten die Tabellenzellen eine Höhe und eine Hintergrundfarbe.
Beachten Sie: Für Tabellen lassen sich ausschließlich die Werte
  • top,
  • middle,
  • bottom angeben.
Beachten Sie: vertical-align ist nicht dazu geeignet, Blockelemente selbst auszurichten.

Unterlängen[Bearbeiten]

Bilder sind von Hause aus auch inline-Elemente, d.h. sie können mit Text in einer Zeile stehen. Der default-Wert von vertical-align ist baseline. Somit stehen die Bilder, auch wenn das Elternelement keinen Text enthält, in Höhe der Grundlinie. Wie sie in folgender Grafik sehen können, ist die Grundlinie aber die Unterseite der Kleinbuchstaben.

Grafik:Unterlänge

Der Platz für Unterlängen wie in g, p, j, q wird reserviert. Abhilfe schafft vertical-align: bottom.

text-align[Bearbeiten]

Sie können mit der Eigenschaft text-align die Ausrichtung von Text und inline-Elementen wie Bildern (img) oder Iframes (iframe), etc. innerhalb eines Blocklevel-Elements kontrollieren.

  • CSS 1.0
  • CSS 3.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Die Eigenschaft text-align kann folgende Werte annehmen:

  • left: für linksbündige Ausrichtung
  • right: für rechtsbündige Ausrichtung
  • center: für zentrierte Ausrichtung
  • justify: Blocksatz
  • inherit: erbt die Ausrichtung vom Elternelement
  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
  • start: (Standardwert) am Reihenbeginn relativ zur Schreibrichtung ausgerichtet, also links in einem ltr Kontext.
  • end: am Reihenende relativ zur Schreibrichtung ausgerichtet, also rechts in einem ltr Kontext
  • match-parent: wie inherit unter Berücksichtigung von start bzw. end
Beispiel ansehen …
      .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { text-align: center; }
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end     { text-align: end; }
    <!-- 1. -->
    <p class="left">Dieser Text wird linksbündig ausgerichtet.</p>

    <!-- 2. -->
    <p class="right">Dieser Text wird rechtsbündig ausgerichtet.</p>

    <!-- 3. -->
    <p class="center">Dieser Text wird zentriert ausgerichtet.</p>
    <p class="center">
      <img src="poweredby_mediawiki_88x31.png" alt="MediaWiki">
    </p>

    <!-- 4. -->
    <section class="center">
      <p class="justify">Dieser Text wird im Blocksatz ausgerichtet. <br>
      Die letzte Zeile wird ausgerichtet im Kontext des Elternelements.</p>
    </section>

    <!-- 5. -->
    <p class="left" dir="rtl">עברית</p>

    <!-- 6. -->
    <p class="start" dir="rtl">עברית</p>

    <!-- 7. -->
    <p class="end" dir="rtl">עברית</p>
  1. Beispiel: der Text wird linksbündig ausgerichtet.
  2. Beispiel: der Text wird rechtsbündig ausgerichtet.
  3. Beispiel: der Text und das Bild werden zentriert ausgerichtet.
  4. Beispiel: der Text wird im Blocksatz ausgerichtet. Der Absatz steht im Kontext eines zentrierten Elternelement, was die Ausrichtung der letzten Zeile mit beeinflussen sollte. Aktuelle Browser orientieren sich bei der letzten Zeile jedoch an der Schreibrichtung.
  5. Beispiel: Die Schreibrichtung rtl übt keine Uminterpretation der Ausrichtung aus. Linksbündig bleibt linksbündig.
  6. Beispiel: Die Ausrichtung folgt am Zeilenstart relativ zur rtl Schreibrichtung und resultiert hier also in einer rechtsbündigen Ausrichtung.
  7. Beispiel: Die Ausrichtung folgt am Zeilenende relativ zur rtl Schreibrichtung und resultiert hier also in einer linksbündigen Ausrichtung.


Beachten Sie: Das HTML-Attribut align ist als obsolet gekennzeichnet und sollte nicht mehr verwendet werden.

Blocksatz formatieren[Bearbeiten]

Überschriften, Textabsätze und Tabellenzellen können Sie mit text-align: justify im Blocksatz ausrichten. Das Blocksatz-Verhalten hängt von anderen Eigenschaften wie white-space, letter-spacing und word-spacing ab.

In CSS3 gibt es die Möglichkeit mit hyphens eine automatische Worttrennung einzustellen.

Der Standard sagt nicht explizit, wie die letzte Zeile bei Blocksatz zu behandeln ist. Die aktuellen Browser stellen diese der Schreibrichtung folgend dar, als ob eine Eigenschaft text-align-last:start definiert sei. Wenn Sie in der letzten Zeile z.B. den Autor rechts platzieren wollen, können Sie text-align-last verwenden.

Empfehlung: Da die heute verbreiteten Browser keine automatische Silbentrennung im Fließtext anwenden, kann es bei Blocksatz zu größeren Lücken zwischen Wörtern kommen. Vermeiden Sie Blocksatz deshalb vor allem in schmalen Bereichen. Je breiter der Block ist, desto sauberer sieht der Text aus.
Blocksatz sieht zwar aufgrund der gleichmäßigeren Ränder sauberer aus, ist aber aufgrund der unterschiedlich großen Abstände zwischen den Wörtern für viele Nutzer schwieriger zu lesen.

Leerräume mit white-space[Bearbeiten]

Dieser Artikel behandelt die CSS-Eigenschaft white-space. Für eine allgemeine Erklärung siehe Whitespace.


Mit der Eigenschaft white-space kontrollieren Sie das Verhalten der Anzeige von Whitespace (Leerzeichen und Umbrüchen) im Quelltext sowie den automatischen Textumbruch.

Die Eigenschaft white-space kontrolliert drei Dinge:

  1. Wie werden Umbrüche im Quelltext behandelt?
  2. Wie werden benachbarte Leerzeichen und Tabs im Quelltext behandelt?
  3. Darf der Text automatisch umgebrochen werden?

white-space nimmt die möglichen Werte:

  • normal (Standardwert) Umbrüche kollabieren, Leerzeichen + Tabs kollabieren, automatischer Umbruch
  • nowrap Umbrüche kollabieren, Leerzeichen + Tabs kollabieren, kein automatischer Umbruch
  • pre Umbrüche werden behalten, Leerzeichen + Tabs werden behalten, kein automatischer Umbruch
  • pre-wrap Umbrüche werden behalten, Leerzeichen + Tabs werden behalten, automatischer Umbruch
  • pre-line Umbrüche werden behalten, Leerzeichen + Tabs kollabieren, automatischer Umbruch
  • inherit Einstellung des Elternelements
Beispiel ansehen …
      .normal     { white-space:normal; }
      .pre        { white-space:pre; 
                    font-family:monospace; }
      .pre-wrap   { white-space:pre-wrap; }
      .pre-line   { white-space:pre-line; }
      .nowrap     { white-space:nowrap; }
  1. Es gilt das normale Whitespace-Verhalten. Leerzeichen und Umbrüche kollabieren und Text wird umgebrochen, wenn notwendig.
  2. Im Code-Beispiel bleiben Umbrüche und Leerzeichen erhalten. Kein automatischer Umbruch erfolgt.
  3. Im Gedicht bleiben Umbrüche erhalten, normale Leerzeichen aber werden zusammengefasst.
  4. In der Quellenangabe bleibt Whitespace erhalten, so dass der Name eingerückt erscheint. Automatischer Umbruch ist jedoch möglich.
  5. Der automatische Umbruch bei diesem pathologischen Fall wurde durch nowrap verboten.

Trennung mit hyphens[Bearbeiten]

Mit der Eigenschaft hyphens (engl. hyphen - Bindestrich) können Sie eine automatische Worttrennung einrichten.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • manual, keine automatische Silbentrennung, Voreinstellung, bedingte Trennstriche (&shy; bzw. &#173;) werden beachtet
  • none, keine automatische Silbentrennung, bedingte Trennstriche werden unterdrückt, Umbruch erfolgt ausschließlich an Leerzeichen
  • auto, automatische Silbentrennung, manuell definierte bedingte Trennstriche werden dabei vorgezogen.
  • inherit, Einstellung des Elternelements


Beispiel ansehen …
p {
  font-size: 1.5em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  max-width: 25em;
  text-align: justify;
}
.trennung {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
<p>
  Donaudampfschiffahrtsgesellschaftskapitän (seit der
  Rechtschreibreform 1996, und damit erst nach Auflösung
  des Unternehmens:
  Donau­dampfschifffahrtsgesellschaftskapitän) war eine
  inoffizielle Bezeichnung für einen Kapitän der von 1829
  bis 1991 existierenden Donaudampfschiffahrtsgesellschaft
  (DDSG). Das Wort ist ein populäres Beispiel für die
  Bildung von Mehrfachkomposita in der deutschen Sprache.
</p>
<p class="trennung">
  Donaudampfschiffahrtsgesellschaftskapitän (seit der
  Rechtschreibreform 1996, und damit erst nach …
</p>
Durch den erzwungenen Blocksatz mithilfe der Eigenschaft text-align werden die Leerräume zwischen den Wörtern verbreitert, was zu unschönen Effekten führt, wenn die Absätze sehr schmal oder einzelne Wörter sehr lang werden.
Beachten Sie: Wenn Sie die automatische Silbentrennung verwenden möchten, muss für das entsprechende Element oder eines der Elternelemente mittels des Attributs lang die verwendete Sprache angegeben werden[3].
Beachten Sie: Eine für ein Element festgelegte Worttrennungseinstellung wird ohne Ihr Zutun an die Kindelemente vererbt.


Achtung!

Die Eigenschaft hyphens ist derzeit (Stand: Juli 2020) noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Edge, Internetexplorer -ms-hyphens
für Safari -webkit-hyphens

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


Siehe auch[Bearbeiten]

Folgende CSS-Eigenschaften bestimmen die Textausrichtung:


Quellen[Bearbeiten]

  1. W3C: CSS Text Module Level 3 text-indent
  2. MDN: text-indent
  3. W3C: CSS Text Module Level 3 – Languages and Typesetting