XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mehrspaltiger Text (http://xhtmlforum.de/showthread.php?t=73212)

uli123 18.04.2017 12:35

Mehrspaltiger Text
 
Hi,
ich suche nach einem Weg, mehrspaltige Texte erst bei einer Mindest-Textlänge zu verwenden.
Konkret:
Der Haupttext läuft im DIV "body" und wird zweispaltig angezeigt. Zwischenüberschriften <h2> und <h3> sowie <IMG> unterbrechen den Mehrspalter via column-span:all. Dadurch werden die Spalten nicht zu lang.

Soweit klappt das gut.

Nun gibt es aber leider auch sehr kurze Textabschnitte zwischen Bildern oder Überschriften, die natürlich auch zweispaltig angezeigt werden. So kann es sein, das eine Spalte drei Zeilen hat, die zweite zwei Zeilen, was sehr unschön aussieht.
Ich hatte die Hoffnung, mit widows:5;orphans:5; eine Art Mindestspaltenlänge von 5 Zeilen hin zu bekommen, aber das klappt nicht.

Hat jemand eine Idee?

Vielen Dank,
Uli

cloned 18.04.2017 13:30

widows und orphans greifen, wie im Print, bei einer neuen Seite. Da das Internet keine Seiten (A4, etc.) kennt, haben diese Angaben nur Auswirkungen, wenn man die Seite ausdruckt.

Für den Bildschirm gibt es so eine Funktion nicht, zumindest ist mir nichts bekannt.
Mögliche Lösungen: Mit Javascript die Textlänge abfragen und entsprechend reagieren oder im backend, vor der Ausgabe schon die Textlänge erkennen und je nach Textlänge eine zusätzliche Klasse (zb text-short) vergeben, welche dann eigene CSS Regeln (keine Columns) bekommt.

cloned 18.04.2017 13:30

edit: Ich poste in letzter Zeit oft doppelt :(

uli123 18.04.2017 13:57

Danke für Deine Antwort.
Zitat:

Zitat von cloned (Beitrag 550796)
widows und orphans greifen, wie im Print, bei einer neuen Seite. Da das Internet keine Seiten (A4, etc.) kennt, haben diese Angaben nur Auswirkungen, wenn man die Seite ausdruckt.

Das ist nicht ganz richtig. Der Edge steuert das sehr wohl präzise für den Bildschirm. Andere Browser sind da wohl nicht ganz CSS kompatibel.

Auch stimmt Deine Annahme nicht, dass Schusterjungen und Hurenkinder (ja, so heißt das wirklich in der Typografie ;) etwas mit dem Seitenwechsel zu tun haben (ich komme aus dem Print). Sie haben ausschließlich etwas mit der Spalte zu tun. Bei einspaltigen Texten ist der Umbruch dann ausschließlich der Seitenwechsel, bei mehrspaltigen zudem auch der Spaltenwechsel.
Zitat:

Für den Bildschirm gibt es so eine Funktion nicht, zumindest ist mir nichts bekannt.
Mögliche Lösungen: Mit Javascript die Textlänge abfragen und entsprechend reagieren ...
Ja, das hatte ich auch vermutet. Meine Hoffnung war, dass ich noch nicht alle Tricks kenne (und in CSS gibt es ja doch schon verzwickte Kombinationen ...

cloned 18.04.2017 14:51

Zitat:

Zitat von uli123 (Beitrag 550799)
Danke für Deine Antwort.

Das ist nicht ganz richtig. Der Edge steuert das sehr wohl präzise für den Bildschirm. Andere Browser sind da wohl nicht ganz CSS kompatibel.

Wie gesagt, mir war das nicht bekannt.
Laut caniuse unterstützt auch nur edge (und ie) die column-spezifikation wie erfordert, das heißt, irgendwann kommt sie auch für die restlichen Browser.

Zitat:

Zitat von uli123 (Beitrag 550799)
Auch stimmt Deine Annahme nicht, dass Schusterjungen und Hurenkinder (ja, so heißt das wirklich in der Typografie ;) [...] mehrspaltigen zudem auch der Spaltenwechsel.

Es ist schon ein paar Jahre her, dass ich print im Studium gelernt habe, verzeih, dass ich mir das nicht 100%ig korrekt gemerkt habe. Aber wer arbeite heutzutage auch noch in print :p :D


Zitat:

Zitat von uli123 (Beitrag 550799)
Ja, das hatte ich auch vermutet. Meine Hoffnung war, dass ich noch nicht alle Tricks kenne (und in CSS gibt es ja doch schon verzwickte Kombinationen ...

Der Trick heißt: Warten, bis alle Browser diese spezifikation ganz unterstützen, dann ist auch überall das gewünschte Verhalten zu erwarten. Damit ist aber nicht so bald zu rechnen.
Bis dahin: Keine Print-Layouts im Web nachbauen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0
© Dirk H. 2003 - 2017