Eckhart Wörner: Zeilenumbruch und w3c

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

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

    --
    Opinions are like assholes: everybody has one.
    ss:| zu:| ls:# fo:| de:[ va:| ch:? n4:& rl:? br:& js:| ie:% fl:( mo:}
  2. 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

    1. Hallo Christian!

      siehe Bild!

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

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

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

    • Tim
    --
    tft-2003-05-Silbentrennung