Home Previous Zeitschrift 1999/06 Next Archiv Index
  Inhalt:

Einführung 

Techniken

Definition von Tabellen

Verschachtelte Tabellen

Autor

Online Publishing 3

Zeilenlängen und Umbrüche auf Websites

Einführung

Wenn man durch das Internet surft stößt man immer wieder auf Websites, auf denen sich Texte von dem linken bis zum rechten Bildschirmrand erstrecken. Eine der wichtigsten Regeln, von denen die Lesbarkeit und damit die Verständlichkeit von Texten abhängt, betrifft aber die Frage der optimalen Zeilenlänge:
Zwölf Zentimeter sind demnach die maximale Zeilenlänge. Das sind fünf bis sieben Worte. Textzeilen, die länger sind, insbesondere auch dann, wenn sie auf dem Bildschirm stehen, sind nicht nur sehr mühsam lesbar, sondern sehen auch unschön aus.

Techniken

Anfänger übersehen dabei häufig, daß eine normale Zeilenschaltung bei der Anzeige von HTML-Dateien ignoriert wird. Beide Zeilen werden automatisch, nur von einem Leerzeichen getrennt, aneinander angefügt.
In HTML sind aber verschiedene Techniken vorgesehen, um die Zeilenlänge festzulegen, bzw. einen Zeilenumbruch zu erzwingen. 
Einen erzwungenen aber starren Zeilenwechsel kann man mit dem Tag <BR> erzwingen. Dies kommt aber verständlicherweise nicht für Fließtexte in Frage.
Eine weitere Möglichkeit ist die Verwendung der im letzten Beitrag besprochenen Frame-Technologie. Hier kann man einen Rahmen mit exakt der Laufweite des Textes einrichten. Abgesehen davon, daß viele Webdesigner nachwievor bemüht sind, Frames zu vermeiden, ist dieses Verfahren spätestens dann nicht geeignet, wenn man mehrspaltige Texte darstellen möchte.
Die eleganteste Methode ist der Einsatz der ab HTML Version 4 möglichen Cascading Style Sheets (CSS). Hierbei kann man in einer Art Dokumentenvorlage alle Parameter wie z.B. Spaltenbreite, Typographie etc. als Standard definieren und dann den Text einfach in das Dokument "reinfließen" lassen. Nachteil dieses Verfahrens ist, dass immer noch mehr als 50% der im Einsatz befindlichen Browser HTML 4 nicht unterstützen.
Ein möglicherweise etwas archaisch anmutendes Verfahren, das aber den Vorteil hat äußerst einfach, wirkungsvoll und obendrein kompatibel zu sein, ist die Verwendung von Tabellen.
Dieses Verfahren ist nicht ohne Grund das derzeit verbreitetste Verfahren zur Seitengestaltung, das selbst von Tools zur dynamischen Website-Erzeugung verwendet wird.
Es erlaubt nicht nur die Festlegung einer starren Zeilenlänge mit dem Ergebnis eines automatischen Zeilenumbruches, sondern auch eine optimierte Seitengestaltung für die unterschiedlichsten Bildschirmauflösungen: stellt man nämlich eine solche Tabelle zentriert auf den Bildschirm ergibt sich immer ein harmonischer Gesamteindruck der Seitenaufteilung. Nebenbei lassen sich in einer solchen Tabelle auch sehr einfach Abbildungen, Steuerelemente oder Marginalien in einer separaten Spalte unterbringen und eindeutig positionieren.

Definition von Tabellen

Der HTML-Programmieraufwand ist dabei außerordentlich gering. Eine typische Tabellendefinition, die für nahezu alle Bildschirmauflösungen optimal ist und dabei eine lesbare Zeilenlänge gewährleistet sieht folgendermaßen aus:

 <CENTER>
  <TABLE WIDTH=600 CELLPADDING=0 CELLSPACING=0 BORDER=0>
   <TR><TD WIDTH=400 VALIGN="TOP">
    hier steht der Tabellentext
  </TD>
   <TD WIDTH=200 VALIGN="TOP" ALIGN="RIGHT">
    hier stehen z.B. Marginalien
   </TD></TR>
  </TABLE>
 </CENTER>
Diese Tabelle haben wir von vornherein zentriert angeordnet. Die linke Spalte hat eine Breite von 400 Pixel und ist für den Text gedacht. In der rechten Spalte, die rechtsbündig ausgerichtet ist, können z.B. Marginalien oder Abbildungen untergebracht werden.

Verschachtelte Tabellen

In obigem Beispiel fällt auf, daß die Anzeige der Tabellenbegrenzung (BORDER) ausgeschaltet ist. Dies läßt sich immer nur für die gesamte Tabelle, nicht aber für eine einzelne Zelle oder gar eine Linie definieren. Trotzdem müssen Sie in dieser Variante nicht auf Tabellen in Ihrem Text verzichten. HTML erlaubt es auf einfache Art, mehrere Tabellen, ineinander zu verschachteln. Das obige Beispiel sähe dann aus wie folgt:

 <CENTER>
  <TABLE WIDTH=600 CELLPADDING=0 CELLSPACING=0 BORDER=0>
   <TR><TD WIDTH=400 VALIGN="TOP">
    hier steht der Tabellentext
<!-- Hier fängt die zweite Tabelle an -->
    <TABLE CELLPADDING=0 CELLSPACING=5 BORDER=1>
   <TR><TD VALIGN="TOP">
    linke Spalte, erste Zeile
   </TD>
   <TD VALIGN="TOP">
    rechte Spalte, erste Zeile
   </TD></TR>
   <TR><TD VALIGN="TOP">
    linke Spalte, zweite Zeile
   </TD>
   <TD VALIGN="TOP">
    rechte Spalte, zweite Zeile
   </TD></TR>
 </TABLE>
<!-- Hier hört die zweite Tabelle auf -->
   </TD>
   <TD WIDTH=200 VALIGN="TOP" ALIGN="RIGHT">
    hier stehen z.B. Marginalien
   </TD></TR>
  </TABLE>
 </CENTER>
Diese Tabelle ist sichtbar, da der Rahmen (BORDER) auf die Breite "1" gesetzt wurde. Sie müssen sich in aller Regel dieses Grundformat nur einmal anlegen (wie z.B. bei diesem Magazin) und lassen dann Ihre Texte nur noch an den markierten Stellen "einfliessen". Der Textumbruch geschieht dann von selbst. Lediglich die Absatzwechsel müssen Sie HTML-typisch mit <P> (vergrößerter Zeilenabstand) oder <BR> (einfacher Zeilenabstand) einfügen, um die Texte optisch zu gliedern. 

Robert H. Hucho
Seit 1985 Geschäftsführer der HUCHO communication GmbH
(Berlin, Mühlenbeck, Reutlingen),
eines bundesweit arbeitenden Dienstleisters für
Technische Dokumentation, der seit 1991 mit
einem Schwerpunkt auch elektronische Medien erstellt.
Internet http://www.hucho.net



Als Fachbeirat für elektronische Medien der Online-Zeitschrift "Technische Dokumentation" freut sich der Autor über die Zusendung weiterer Beiträge zu diesem Themenkomplex per eMail unter rhh@hucho.net.

Wir suchen insbesondere einen oder mehrere Autoren,

  • die regelmäßig elektronische Medien (Lernprogramme, Websites etc.) analysieren und beispielhaft besprechen 

  • die über geeignete Software für das elektronische Publizieren berichten.

Zum Seitenanfang


© ADOLPH Verlag GmbH - Letztes Update 03.05.2004