Zeilenumbruch und w3c
Eckhart Wörner
- html
Wie sollte ein Browser ein ewig langes Wort nach w3c korrekt interpretieren? Soll er einen automatischen Umbruch an einer zufälligen Stelle machen oder soll er das Wort in eine Zeile schreiben, unabhängig davon, ob man quer scrollen muss?
Gruß, Eckhart
Hallo Eckhart,
Wie sollte ein Browser ein ewig langes Wort nach w3c korrekt interpretieren? Soll er einen automatischen Umbruch an einer zufälligen Stelle machen oder soll er das Wort in eine Zeile schreiben, unabhängig davon, ob man quer scrollen muss?
Ein ewig langes Wort bleibt ein ewig langes Wort. So etwas wie automatische Silbentrennung gibt es bei HTML afaik nicht. Möchtest du an einer bestimmten Stelle einen Zeilenumbruch, kannst du ihn mit <br> erzwingen. Du kannst auch mit <wbr> einen Umbruch erlauben, dies gehört afaik jedoch nicht zum HTML-Standard.
mfg Torsten
Hallo Eckhart,
Wie sollte ein Browser ein ewig langes Wort nach w3c korrekt interpretieren? Soll er einen automatischen Umbruch an einer zufälligen Stelle machen oder soll er das Wort in eine Zeile schreiben, unabhängig davon, ob man quer scrollen muss?
Jain. Letzteres kommt am ehesten hin.
Beispiel:
Das hier soll die Box, die von <body> erzeugt wird, sein:
+-------------------------------+
| |
| |
| |
| |
| |
+-------------------------------+
Wenn das Wort zu lange ist, dann passiert folgendes:
+-------------------------------+
| fksökfölksöfkösklöskölksölfköslkölfksöklsf
| |
| |
| |
| |
+-------------------------------+
<######------------------------->
Die Box wird *nicht* größer, das Wort "fließt" jedoch raus. (overflow) Da die Box von <body> jedoch nicht den Anzeigebereich bestimmt, bekommt der *Anzeigebereich* (nicht jedoch <body>!) Scrollbalken. (das <###-----> soll der Scrollblaken sein)
Man kann dies auch unterbinden, indem man mit CSS overflow: hidden; anwendet:
+-------------------------------+
| fksökfölksöfkösklöskölksölfkös|
| |
| |
| |
| |
+-------------------------------+
Dann wird das Wort abgeschnitten.
Man kann auch overflow:scroll verwenden:
+-------------------------------+
| fksökfölksöfkösklöskölksölfkös|
| |
| |
| |
|<####------------------------->|
+-------------------------------+
Hier bekommt <body> selbst den Scrollbalken. (und nicht der Anzeigebereich)
Bei Absätzen sieht man das ganze noch deutlicher:
+------------body---------------+
| +------------p--------------+ |
| | fksökfölksöfkösklöskölksölfköslkölfksöklsf
| +---------------------------+ |
| |
| |
| |
+-------------------------------+
<######------------------------->
Beispiel: http://www.christian-seiler.de/temp/test-element-width-1.html (der Umbruch bei den Leerzeichen wurde mit CSS verhindert, um es zu verdeutlichen) Achtung: Das Beispiel solltest Du Dir mit Mozilla oder Opera anschauen, im IE funktioniert es nicht. Ziehe das Fenster einfach kleiner, dann siehst Du es. (Die Breite des Absatzes <p> wird hier durch die Breite von <body> begrenzt, <body> ist so breit wie die zur Verfügung stehende Fläche des Anzeigebereichs; trotzdem erscheinen Scrollbalken)
Wenn Du nun Boxen hast, die *nicht* von Blockelementen erzeugt werden, dann sieht die Sache anders aus:
Bei Tabellenzellen wird der Tabellenlayoutalgorithmus verwendet. Wenn man jetzt von table-layout: auto; ausgeht (also nicht table-layout: fixed;) dann wird die benötigte Mindestbreite des Inhalts der Tabellenzelle berechnet. Danach wird die Breite der Tabellenzelle genommen, die sie durch Beschränkungen bekommen hätte. Diese beiden Größen werden verglichen. Die größere "gewinnt". (Wenn der Inhalt also kleiner als die verfügbare Breite sein kann, dann wird die verfügbare Breite genommen, wenn der Inhalt größer sein muss, dann wird die Mindestbreite des Inhalts genommen. Dabei wird dann die komplette Tabelle ausgedehnt. Bei einer ein-Tabellenzelle-Tabelle sähe das ganze dann so aus:
+------------body---------------+
| +-----------------------table--------------------+
| | +-----------------------td-------------------+ |
| | | fksökfölksöfkösklöskölksölfköslkölfksöklsf | |
| | +--------------------------------------------+ |
| +------------------------------------------------+
| |
| |
+-------------------------------+
<######------------------------->
<body> wird wie gesagt nicht ausgedehnt, da der ganz oben erwähnte Algorithmus darauf angewendet wird. Die Tabell wird jedoch im Gegensatz zum Absatz ausgedehnt.
Soweit zur Theorie. Praktisch gesehen verhält sich der IE falsch. (aus der Sicht des Standards) Dort wird die Box, die das Wort enthält, automatisch mit ausgedehnt, wie bei einer Tabelle.
Ich hoffe, ich konnte Dir weiterhelfen.
Viele Grüße,
Christian
Der Standard dazu: http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
Hallo Christian!
siehe Bild!
Hallo mdkiller,
siehe Bild!
Hmmm. Eigentlich sollte der IE ja white-space: nowrap; unterstützen... Keine Ahnung, woran das liegt. Naja, nachdem der IE sich sowieso nicht standardkonform verhält, was den overflow angeht, dürfte das das geringste Problem sein.
Viele Grüße,
Christian
Hallo,
siehe Bild!
Du verwendest einen customisierten Browser (welche IE version?) also muss du die Programmierer der Sprakssenversicherung fragen, was sie mit dem Browser angestellt haben:
IE6:
<img src="http://www.meta-text.net/etc/element_width.gif" border="0" alt="">
Grüße
Thomas
Hallo Eckhart,
Wie sollte ein Browser ein ewig langes Wort nach w3c korrekt interpretieren?
Soll er einen automatischen Umbruch an einer zufälligen Stelle machen oder
soll er das Wort in eine Zeile schreiben, unabhängig davon, ob man quer
scrollen muss?
Das ist eine interessante Frage. Aktueller Stand ist, daß der Browser das
Wort in eine Zeile schreibt.
Eigentlich kann es nicht Sache des Autors sein, seine Seite so zu tippen,
wie man es aus Schreibmaschinenzeiten gewohnt ist. Selbst die Silben und
Zeilen umzubrechen und Trennstriche einzufügen. Abgesehen von der Arbeit
gibt es dafür weitere Gründe, die ich später noch erläutern werde.
Es gibt verschiedene Methoden, diese Silbentrennung zu kontrollieren, indem
man an einigen Stellen bestimmte Elemente einfügt, eigentlich Steuerzeichen.
Es sind jedoch Browsereigene Elemente, die niemals zum offiziellen
Sprachstandard gehört haben, Relikte aus den Browserkriegen. Von ihrer
Benutzung ist abzuraten. Eine kurze Übersicht über diese Elemente findest Du
in SELFHTML im Kapitel 'Zeilenumbruch'.
http://selfhtml.teamone.de/html/text/zeilenumbruch.htm
Was hat sich nun das W3C dazu gedacht? Da muß man etwas in der Geschichte
zurückgehen. HTML 3.2 war ja noch ein Mix aus Elementen, die entweder
den in ihnen enthaltenen Text optisch, oder aber andererseits logisch
formatierten. Mit HTML 4.0 wurde damit aufgeräumt, das Ziel ist eine
Trennung von logischer Textstruktur ("Das ist eine Überschrift, das ist
ein Absatz...") und dem Aussehen. Für letzteres gibt es Stylesheets, die
die Formatierung des in HTML nur strukturierten Textes übernehmen. XHTML,
die in XML reformulierte Variante von HTML, führt dieses Prinzip weiter,
wobei man bemerken muß, daß XHTML und CSS natürlich noch weiterentwickelt
werden. Alles decken sie noch nicht ab.
In HTML 4 gibt es aber noch Altlasten von der visuellen Formatierung. Eine
davon ist ein Mittel zur Silbentrennung, ein Entity mit dem wunderschönen
Namen .
http://www.w3.org/TR/html4/struct/text.html#h-9.3.3
http://www.edition-w3.de/TR/1999/REC-html401-19991224/struct/text.html#h-9.3.3
(deutsche Kommentierte Übersetzung)
Dieses Entity soll Autoren ermöglichen, in längeren Wörtern einen
Trennstrich einzufügen, der aber nur dann auftritt, wenn das Wort an
einen Rand ankommt. Ansonsten versteckt er sich, der schüchterne
Trennstrich.
Dummerweise habe ich hier keinen Browser gefunden, der ihn in diesem Sinne
interpretiert. Entweder der Trennstrich ist nicht da und das Wort wird als
ganzes umgebrochen oder es wird der Trennstrich im Wort angezeigt und beide
Wortteile mit dem Trennstrich in der Mitte werden als ein Wort erkannt und
auch insgesamt umgebrochen, also entweder davo oder danach. Es ist zwar eine
schöne Idee, aber denoch nicht einsetzbar im praktischen Einsatz.
HTML 4 wurde dann in XML zu XHTML 1.0 neu formuliert und definiert. Einige
Altlasten vielen dabei wegen, einige blieben. Dann wurde XHTML 1.0 Strict
in Module zerlegt, die jeweils nur einen Teilbereich von XHTML beschreiben
(Text, Tabellen, Links); das ganze zusammen nennt man nun XHTML 1.1.
wird zwar noch als Entity definiert, die expliziten Erläuterungen zur
speziellen Darstellung dieses Zeichens, die man noch im HTML 4 Standard
findet, sind hier schon verschwunden.
Es gibt also zur Zeit keine verbindliche Methode, irgendwie Silbentrennung
auf Webseiten durch HTML zu erreichen. Doof, ich weiß.
Aber es ist logisch und konsequent innerhalb des Gedankengebäudes des W3Cs
und der Trennung von Inhalt und Aussehen durch das Zweiergespann (X)HTML/CSS.
XHTML maßt sich in einem gewissen Sinn Universalität an. Daß Text und andere
Informationen innerhalb des Gerüstes von XHTML gespeichert und durch die
Auszeichnung durch Tags mit struktureller und semantischer Bedeutung
versehen wird. In der Theorie kannst man inzwischen sogar ein XHTML-Dokument
auf Klingonisch schreiben.
Diese Universalität ist nicht nur beim gespeicherten Zustand sondern auch
bei der Ausgabe gewünscht. Es hat das XHTML-Dokument nicht zu interessieren,
ob es grafisch auf dem Bildschirm, auf dem Fernseher oder in der Projektion
ausgegeben wird. Oder ob es gedruckt wird, ob es auf der Braillezeile
ausgegeben wird, ob es auf einen dieser antiken Börsenticker auf einem
langen Papierstrom getickert wird oder vorgelesen wird. Ob dabei ein Wort
getrennt wird, ist von der Ausgabe abhängig. Von dem jeweiligen Aussehen
bei der Ausgabe und dabei noch von verschiedenen Begleitumständen, wie
zum Beispiel von der Breite des Browserfensters. Eine Trennungsstelle ist
also kein integraler Bestandteil des Wortes, wenn das Wort nur Bedeutung
symbolisieren soll.
Silbentrennung ist also etwas, das man dem überlassen sollte, das für
die Ausgabe des XHTML-Dokumentes zuständig ist, und das ist zum Beispiel
der Browser in Tateinheit mit Cascading Stylesheets. Und so wie es aussieht,
ist inzwischen genau so eine Kontrolle für CSS 3 geplant, nämlich im Modul
Text.
http://www.w3.org/TR/2003/WD-css3-text-20030226/#word-break-inside
Dort wird die tatsächliche Kontrolle der Silbentrennung dem Browser
aufgebürdet. Dieser sollte ein Wörterbuch und ein Wissen um die spezifischen
Trennungsregeln haben und wenn nötig das Wort dann trennen. Schließlich hat
jede Sprache andere Trennungsregeln ("Trenne nie ST, denn ..."), bei
Sprachen, die nicht auf dem Unterschied zwischen Buchstaben und Wörtern
aufgebaut sind, wie unsere westlichen Sprachen ist es sogar noch
komplizierter. Und erst Mischtechniken aus beiden Sprachen. (Welche
Trennungsregeln hat eigentlich Klingonisch?)
Ich kann mir das recht gut vorstellen. Schon jetzt stellt mein aktuelles
Betriebssystem eine Rechtschreibprüfung zur Verfügung, die mir an den
unmöglichsten Stellen begegnet, wie zum Beispiel in der Eingabezeile des
IRC-Clienten. Ähnlich stelle ich mir globale Trennungsregelbücher
vorstellen, die dann auch dem Browser zur Verfügung gestellt werden, je
nachdem, was für eine Sprache das Betriebssystem hat.
Aber das ist leider noch lange Zukunftsmusik. Es wird noch lange dauern
bis CSS 3 implementiert ist und sich vor allem durchgesetzt hat. Ich denke
5 Jahre sind noch optimistisch.