CSS/Tutorials/Typografie/Textausrichtung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

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]

Browserunterstützung
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
    (bitte caniuse beachten)
  • hanging: rückt alle Zeilen außer der ersten ein.
    (bitte caniuse beachten)
  • inherit: (Standardwert)
Beachten Sie: Der Defaultwert ist inherit. Die Wirkung muss also bei Kindelementen explizit ausgeschaltet werden.
text-indent So sieht's aus
      .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, sodass 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.
So sieht's aus

vertical-align

Sie können mit der Eigenschaft vertical-align die vertikale (senkrechte) Ausrichtung von Text kontrollieren, default-Wert ist baseline. Es gibt dabei in Abhängigkeit der display-Eigenschaft verschiedene Interpretationen der Eigenschaft.

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 So sieht's aus
<!-- 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 (senkrecht) 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.
So sieht's aus
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.

Hauptartikel: CSS/Tutorials/Ausrichtung/Inhalte zentrieren

Unterlängen

Bilder sind von Hause aus auch inline-Elemente, d. h. sie können mit Text in einer Zeile stehen. Da der default-Wert von vertical-align baseline ist, stehen die Bilder – selbst wenn das Elternelement keinen Text enthält – auf 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

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.

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
  • 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 So sieht's aus
      .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.
So sieht's aus


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

Blocksatz formatieren

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

Silbentrennung und Zeilenumbrüche

Leerräume mit white-space

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 (dürfen am Zeilenende aber aus der Box hinaushängen), automatischer Umbruch
  • break-spaces Ähnlich pre-wrap, behält Leerstellen aber überall, auch am Zeilenende
  • pre-line Umbrüche werden behalten, Leerzeichen + Tabs kollabieren, automatischer Umbruch
  • inherit Einstellung des Elternelements

break-spaces wurde Mitte 2019 eingeführt und ist daher in älteren Browsern nicht verfügbar. Die übrigen Werte sind breit unterstützt.

Beispiel So sieht's aus
      .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; }
So sieht's aus
  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, sodass 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

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

Browserunterstützung
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 So sieht's aus
p {
  font-size: 1.5em;
  -webkit-hyphens: none;
  hyphens: none;
  max-width: 25em;
  text-align: justify;
}
.trennung {
  -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>
So sieht's aus

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.

Siehe auch

Folgende CSS-Eigenschaften bestimmen die Textausrichtung:


Quellen

  1. ↑ W3C: CSS Text Module Level 3 text-indent
  2. ↑ MDN: text-indent
  3. ↑ W3C: CSS Text Module Level 3 – Languages and Typesetting
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Typografie/Textausrichtung&oldid=89956“