Ankündigung

Einklappen
Keine Ankündigung bisher.

Textausrichtung und Blocksatz

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Textausrichtung und Blocksatz

    Linksbündig, rechtsbündig, zentriert und Blocksatz. Sowie im Druck bietet auch das Web die Möglichkeit Absätze gestalten und auszurichten. Aber warum kann man dort große Fehler machen und gibt es auch Lösungsansätze?

    Um eine Webseite zu gestalten nutzen wir oft die Möglichkeit Texte auszurichten und dabei gibt es im grundelegende vier Möglichkeiten Texte auszurichten. Entweder linksbündig, rechtsbündig, zentriert oder als Blocksatz. Im meinen Beitrag geht es nur um den Blocksatz, welche Fehler man mit diesem machen kann und welche Möglichkeiten es gibt, um die Fehler auszugleichen.

    Was ist eigentlich ein Blocksatz und wie arbeitet er?

    Bei dem Blocksatz wird der Text so ausgerichtet, dass der Textrand bis zur Begrenzungsrahmen oder Bildschirmgröße passt. Dabei werden längere Wörter in die nächste Zeile geschoben. Zusätzlich wird der Wortabstand der Zeile passend angepasst, sodass ein Abschnitt des Absatzes in die Zeile passt, danach wird umgebrochen in ganzen Wörtern.

    Hilfe und Problem zugleich

    Dies ist leider auch der Nachteil zugleich. Textlücken werden in unterschiedlichen Größen dargestellt und sind etwas sehr klein und in der nächsten Zeile sehr groß. Dies sieht nicht nur unschön aus, sondern verhindert den Lesefluss. Eine Möglichkeit wäre es auf Blocksatz zu verzichten. Was von den meisten von uns übersehen wird, kann sich Nachteilig auf die Besucher/Leserschaft der Webseite auswirken. Besonders bei Seiten mit ausreichenem Text ist dieser Effekt zu bemerken.

    Ein großer Lösungsansatz ist: Hyphens

    Sollten wir wegen oben genannten Problemen auf Blocksatz verzichten? Die Antwort lautet: Nein! Es gibt eine Lösung um gleichmäßige Abstände der Wörter zu generieren ohne auf Blocksatz zu verzichten. Die Lösung heisst Hyphens - zu deutsch: Silbentrennung. Dabei wird die Silbentrennung angewand, wobei zu lange Wörter getrennt und damit können die gleichmäßigen Abstände der Wörter gewährleistet werden. Mithilfe der CSS-Eigenschaft hyphens, ist dies umzusetzen. Dabei verwenden alle großen Browser ein Wörterbuch, wo ein Großteil auf unserem Wortschatz gespeichert werden. Besonders sichtbar ist es mit den Browsern Google Chrome, Mozilla Firefox und Microsoft Internet Explorer/Edge. Aber aufgepasst nicht jede Sprache wird genauso gut unterstützt wie Englisch, Französisch oder Deutsch. Im Großen und ganzem lässt sich damit aber sehr gut arbeiten.

    Technische Umsetzung der Silbentrennung

    Für die Silbentrennung wird die CSS Eigenschaft Hyphens verwendet - hier ein Beispiel:

    Code:
    .absatz-block {
    text-align: justify;
    hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    }
    Weitere Informationen über Silbentrennung im Web

    https://www.mediaevent.de/css3-silbentrennung-hyphens/
    https://developer.mozilla.org/de/docs/Web/CSS/hyphens
    https://css-tricks.com/almanac/properties/h/hyphenate/ [Englisch]
    https://wiki.selfhtml.org/wiki/CSS/E...chtung/hyphens


    Gruß

    Euer Localfu
    Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
    Albert Einstein

homepage-forum.de - Hilfe für Webmaster! Statistiken

Einklappen

Themen: 56.398   Beiträge: 428.157   Mitglieder: 27.758   Aktive Mitglieder: 87
Willkommen an unser neuestes Mitglied, phomsunwin.

Online-Benutzer

Einklappen

214 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 213.

Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

Die neuesten Themen

Einklappen

Kostenlose Homepage bei Jimdo!

Einklappen

Jimdo

Die neuesten Beiträge

Einklappen

Lädt...
X