[HTML][CSS] Text Formatieren wie in der Zeitung

[BadByte]

hey Leuts,
wenn man auf einer Webseite eine Text liest, bei dem die Zeilen so lang sind wie der ganze Bidlschirm, dann verrutscht man leicht in der Zeile.

Die Zeitungen haben das Problem so gelöst, dass sie Spalten machen, und wenn eine Spalte voll ist, gehts oben bei der nächsten Spalte oben weiter..

Genau so wollt ichs auch machen, aber geht das überhaupt? Giebt es eine CSS Lösung mit der man einen Text so glieder kann? Oder muss ich das mit Javascript mit umständlichen String Funktionen machen....

Giebts vielleicht auch noch eine andere Möglichkeit, denText lesbarer zu machen und dabei die GESAMTE Breite des Bildschirms auszunutzen?

gruß: clemix

 

[Zweipunktnull]

Kurz und knapp: Nein.
Netscape unterstützt in den Versionen 3.x und 4.x eine Methode, mehrspaltigen Fließtext im Zeitungsstil in HTML zu realisieren. Dieses Feature gehört jedoch nicht zum HTML-Standard und wird auch von keinem Browser (mehr) unterstützt.

Du kannst natürlich den Text selbst in Spalten aufteilen und die dann mit float: left oder was weiß ich nebeneinander reihen.

Giebts vielleicht auch noch eine andere Möglichkeit, denText lesbarer zu machen

Bilder, Grafiken, Skizzen, usw. helfen sehr! Und sonst, wie oben erwähnt, selbst in Spalten aufteilen.

 

[BadByte]

wird mir wohl nicht viel anderes übrig bleiben, trozdem danke

 

[KonKorT]

Würde auch definitiv Hand am Zeilenabstand anlegen. Das erhöht die Lesbarkeit signifikant. Erreicht wird dies mittels des CSS-Befehls line-height.

 

[BadByte]

jo thx, aber dann hab ich immer noch eine Zeile die, wenns der Bidschirm hergiebt, 1000px lang ist....

 

[fliegenkiller]

gäbe es nicht ne Möglichkeit so etwas per Javascript zu implementieren? (bin nicht so gut in JS)

Als erstes müsstest du nun die Breite und die Höhe er Spalten ermitteln und dann herausfinden wie viele Zeichen es in die Spalten schaffen bzw wie viele Wörter.

Danach teilst du dann den Text in x gleichgrosse Textteile ein, für jedes x (also Spalte)
erzeugst du ein <div> Containertag und gibst dem die Höhe und die Breite an sowie die Position. Dann werden die Divs geschifted um die Spalten zu erzeugen.

Beispiel:

var input = TEXT_VON_LAENGE_3000_WOERTER;
var max_word = 1000; //die Maximalanzahl Wörter
var column_width = 300;
var column_height = 600;
var box_count = 0;

box_count = round(input / max_word); // TODO: Problem beim abrunden, boxzuwenig

//input text aufteilen

input = array();

//funktion implementieren
box(pos, height, width, text)

einfacher würde es in PHP gehen, mit der wordwarp methode, und dann die Zeilen jede Zeile als Array Index und dann Zeilwenweise ausgeben.(Ab bestimmter Zeile Neue Spalte)

ist vllt. etwas kompliziert beschrieben dürfte jedoch funtkionieren.

 

[BadByte]

ja, hab ich mir auch schon gedacht, nur dann muss man Courier als Schrieftart nehmen weil bei anderen Schrieften sind die Buchstaben unterschiedlich breit.
Wenn man die Wörter zählt und schaut ob die reinpassen, dann kann es sein, dsss jemand ein unwahrscheinlichlangeswort schreibt, was dann wieder alles kaput macht....


Mann könnte ausmessen, wie viel Pixel welcher Buchstabe hat, und dann dadurch berechnen wie lang eine Zeile währe und dann Absätze machen....

 

[fliegenkiller]

hab da was interessantes im netz gefunden. Mit CSS3 geht's!
http://www.w3.org/TR/2001/WD-css3-multicol-20010118/

 

[Zweipunktnull]

CSS3... Damit wird so einiges möglich werden, leider aber frühstens in 5 Jahren...
Es ist ja noch nicht mal draußen, aber bis dann alle relevanten Browser das auch noch unterstützen vergeht nochmal viel zeit...