Stilistisch durchaus interessant, fristet der „hängende Einzug“ im Webdesign ein Schattendasein. Sein Einsatz kann sich jedoch lohnen.
Der „hängende Einzug“ ist so etwas wie das Negativ des normalen Einzuges, bei dem die erste Zeile eines Textblocks eingerückt wird – ein probates und beliebtes Mittel, um einen Text lesbarer zu machen. Beim „hängende Einzug“ ist es genau umgekehrt, hier wird der Text gegen die ersten Zeile verschoben.
Realisieren lässt sich das relativ einfach mit einer Tabelle:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed | |
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Innerhalb einer 2*2 Tabelle werden die Zellen der ersten Zeile zusammengeschaltet; sie enthalten die erste Textzeile. Zelle Nr. 3 wird mit einigen Leerzeichen oder einem Blindgif auf die gewünschte Breite gebracht. Die letzte Zelle nimmt den Textblock auf.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed | |
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Eleganter liesse sich das selbe mit CSS erreichen. Hier werden die Absätze mit einem Tag wie diesem angereichert:
<p style="text-indent : -2em; margin-left : 10%">Text</p>
„text-indent“ verschiebt die erste Zeile negativ, das heißt nach links. Damit das funktionieren kann, muss der übrige Text mit dem „margin“-Befehl nach rechts (left = gegen den linken Rand) eingerückt werden. So etwas verstehen nur moderne Browser, insofern ist die Tabellen-Variante vorzuziehen. Jedoch liesse sich die Sache unter Umständen über ein externes Style Sheet auf vorhandene Web-Sites oder -Seiten anwenden.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Noch schöner wird es mit Blocksatz:
<p style="text-indent : -2em; margin-left : 10%"; align=justify>Text</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Experimentierfreudige Designer setzen auf Varianten für die erste Zeile. Zum Beispiel:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Wie hilfreich war dieser Beitrag?
Klicke auf die Sterne um zu bewerten!
Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0