CSSWunschzettel

Ausgangssituation

Abb. 1: Einspaltiger Fließtext mit Infokasten.

Mehrspaltigkeit im Satzspiegel

Abb. 2: Zweispaltiger Fließtext mit Infokasten, in die erste Spalte gepreßt.

Infokasten ausgelagert

Abb. 3: Aus dem Block mit mehrspaltigem Fließtext herausgenommener Infokasten.

Optimierte Variante mit in die letzte Textspalte integrierten Infokasten

Abb. 4: Wunsch für die Unterstützung, die Spalte für den Infokasten festlegen zu können.

Zusätzlich die Breite der letzten Spalte festgelegt

Abb. 5: Zusätzlicher Wunsch, dieser Spalte eine Breite zuweisen zu können.

column-float

16.2.2013, 6.3.2013 Nachdem die Navigatorhersteller Jahre Zeit hatten, die (vom W3C leider noch immer nicht verabschiedete) CSS3Empfehlung über mehrspaltigen Text umzusetzen, kann man nun von einigermaßen breit angelegter Unterstützung ausgehen. Es ist eine gute Idee, diese Funktion zu nutzen, denn mehrspaltiger Text führt zu optisch gutaussehenden Seiten, eben ähnlich dem Satzspiegel in Zeitungen. Auf einigen Präsenzen, die ich schrieb, habe ich diese Mehrspaltigkeit schon eingesetzt. Auf dieser Präsenz findet man ihn nur an ganz wenigen Stellen – dort, wo mit Sicherheit keine Infokästen mit Bildern o.ä. einbezogen sind.

Infokästen können eine Unternavigation enthalten, Tabellen oder Bilder. Der Fließtext – deshalb heißt er so – umfließt diese Infokästen, sodaß der Platz einer Seite in der vollen Breite ausgenutzt wird. Diese Kästen sind eben nunmal am besten am rechten Satzspiegelrand untergebracht. So sieht man es auch in Zeitungen, Zeitschriften und ähnlichen Publikationen. Bei linksbündigen Infokästen (wie die Bildchen auf der Startseite von Web.de) und kurzem Text führt dies regelmäßig zu extrem häßlich aussehenden letzten Wörtern direkt darunter. Abb. 1 zeigt die rechtsbündige Anordnung und der aufmerksame Leser bemerkt, daß ich sie längst nutze. Der HTMLCode dafür sieht so aus:

<div>
 <div style="width: 10em; float: right;">
  Bild, Tabelle usw.
 </div>
 bla bla
</div>

Die Bilder rechts übrigens sollen nur ein Schema aufzeigen und decken sich gar nicht exakt mit dem hier beschriebenen CodeFragment. Hierin sind auch nur irgendwelche Abstände berücksichtigt, weil dies für die Betrachtung nicht relevant ist. Die herstellerspezifischen CSSAttribute übergehe ich aus demselben Grund. Auch nutze ich hier die InlineSchreibung für CSS, damit nicht noch mehr Zeilen nötig werden.

Abhängig von der Navigatorfensterbreite (oder besser gesagt dem Viewport) ist die Restbreite für den Text nun z.B. 1070em. Zusammen mit dem gewünschten Blocksatz und der gerade bei deutschen Texten notwendigen Silbentrennung ergibt sich schnell eine schlecht lesbare Textanordnung. Es muß also die aus Zeitungen bekannte und so geschätzte Mehrspaltigkeit her! Leider ist das leichter gesagt als getan, denn ein umgebendes <div> nur mit den Eigenschaften für Mehrspaltigkeit zu versehen, reicht nicht aus. Abb. 2 zeigt deutlich, daß der Infokasten nun in der ersten Textspalte sitzt.

<div style="column-width: 20em;">
 <div style="width: 10em; float: right;">
  Bild, Tabelle usw.
 </div>
 bla bla
</div>

Das kann beabsichtigt sein, ich bevorzuge aber klar weiterhin, die Infokästen ganz rechts darzustellen. Um die Textelemente innerhalb eines <div>s und den Infokasten separat mit CSS anfassen zu können, benötigt man eine Struktur wie diese:

<div>
 <div style="width: 10em; float: right;">
  Bild, Tabelle usw.
 </div>
 <div style="column-width: 20em;">
  bla bla
 </div>
</div>

Leider ergibt sich daraus das Bild wie in Abb. 3. Der Infokasten steht frei und der Fließtext ist keiner mehr. Da ich auch Seiten nutze, die sehr textlastig sind, aber nur ein bis zwei Bilder mit Bildunterschriften im Infokasten habe, führt dieses Vorgehen zu einem unausgewogenen, linkslastigen Entwurf und auch zu Platzverschwendung.

Gesucht wird also eine Möglichkeit, allein in CSS angeben zu können, daß ein Infoblock am z.B. rechten Satzspiegelrand eines mehrspaltigen Fließtextes eingebaut wird. Das könnte mit einer CSSAngabe wie columnfloat im <div> des Infokastens geschehen.

<div style="column-width: 20em;">
 <div style="width: 10em; column-float: right;">
  Bild, Tabelle usw.
 </div>
 bla bla
</div>

Abb. 4 zeigt wieder, was gemeint ist. Dabei könnte man für columnfloat diese Optionen bereitstellen:

Optionen für das erwünschte CSSAttribut columnfloat

left
Das Blockelement wird linksbündig ins umgebende Blockelement mit mehrspaltigen Fließtext eingebunden. Die Breite kann dabei auch über eine Spaltenbreite betragen.
center
Das Blockelement wird zentriert ins umgebende Blockelement mit seiner Breite und Höhe eingebunden. Die Breite kann dabei auch über eine Spaltenbreite betragen.
right
Das Blockelement wird rechtsbündig ins umgebende Blockelement mit mehrspaltigem Fließtext eingebunden. Die Breite kann dabei auch über eine Spaltenbreite betragen.
first
Das Blockelement wird in die erste Fließtextspalte des umgebende Blockelements eingebunden. Diese Spalte nimmt die Breite des eingebundenen Blockelements an.
n
Das Blockelement wird in die <n>te Fließtextspalte des umgebende Blockelements eingebunden. Diese Spalte nimmt die Breite des eingebundenen Blockelements an.
last
Das Blockelement wird in die letzte Fließtextspalte des umgebende Blockelements eingebunden. Diese Spalte nimmt die Breite des eingebundenen Blockelements an.

Soweit sich nur eine Spalte darstellen läßt, soll columnfloat wie das reguläre float wirken. Da es bei dieser Form wie in Abb. 4 wieder zu extrem kleinen Restspaltenbreiten neben dem eingebundenen Blockelement kommen kann, sollte man auch das last angeben können, sodaß diese betroffene Spalte dieselbe Breite wie das Blockelement erhält. Die anderen Spalten müssen dann nur noch geringfügig in ihrer Breite angepaßt werden. Damit kommen wir zu Abb. 5.

<div style="column-width: 20em;">
 <div style="width: 10em; column-float: last;">
  Bild, Tabelle usw.
 </div>
 bla bla
</div>

Leider ist dieses columnfloat (noch) nur ein frommer Wunsch, denn das W3C ist offenbar der Ansicht, derart komfortable Gestaltungsmöglichkeiten seien überflüssig, wie man sie aus den Druckmedien kennt. Selbstverständlich könnte man die Art der Zuweisung eines einzubettenden Blocks in einen anderen auch einfacher und flexibler mit floatcontext: column/block; oder gleich mit display: column; erreichen. Die Positionierung wird dann mit float oder position, width, top usw. erledigt. Da müssen sich die Navigatorenhersteller und das W3C einigen. Was bei Spezialfällen passiert, fällt auch darunter – etwa bei mehreren Infokästen mit verschiedener Breite in der selben Spalte oder wenn Bilder als Teil des Fließtextes neben einem Infokasten zu liegen kämen, wo kein Platz für diese ist.

Ein weiterer wunder Punkt in diesem Zusammenhang ist die fehlende Unterstützung für die Abtrennung von Blöcken voneinander. Diese entstehen dadurch, daß man eine gewisse Maximalhöhe für die Spalten vorsehen muß, damit der Nutzer nicht kilometerweise rauf und runterscrollen muß, nur um die nächste Spalte lesen zu können. Eine feste Vorgabe wie maxheight: 20em; ist ziemlich unsinnig, da es ja wohl auf die Höhe des Viewports ankommt. Hier bietet sich also eine der neuen Maßeinheiten von CSS3 an: maxheight: 80vh;, was 80% der ViewportHöhe sind.

Bedauerlicherweise ist die Unterstützung für diese Einheit noch ziemlich dürftig (getestet am 6.3.2013), denn Opera 12.14 ignoriert sie völlig und Comodo Dragon zeichnet nur die Trennstriche zwischen den Spalten in dieser Höhe (der Fließtext geht über die gesamte Seitenhöhe). Nur Firefox Nightly 22.0a1 interpretiert sie richtig. Außerdem gilt diese Angabe für den gesamten Block mit allen Absätzen darin, sodaß der komplette Inhalt in Spalten mit 80% der ViewportHöhe abgebildet wird und diese unter dem Infokasten hinweg am rechten Navigatorfensterrand hinauslaufen. Damit haben wir einen Pyrrhussieg davongetragen, denn die Mehrspaltigkeit mit maximaler Spaltenhöhe haben wir uns durch einen horizontalen Rollbalken erkauft.

Die untereinandergesetzten Blöcke sollten auch nur zwischen den Absätzen trennen. Hierfür ist eine entsprechende Automatik gefragt, am besten zusammen mit vorausschauender Programmierung durch Einsatz von breakinside: avoidcolumn; (das auch erst einmal alle wichtigen Navigatoren unterstützen müßten). Damit ist ganz klar noch ein erhebliches Maß an Entwicklungsarbeit vonnöten. Ziemlich wahrscheinlich ist eine (zunächst nur rudimentäre) Umsetzung spielend einfach zu erreichen. Die Navigatorhersteller könnten hier endlich einmal eine sinnvolle Funktionalität einbauen anstatt ihres üblichen Aktionismus. Wer geht mit gutem Beispiel voran?

Nachtrag 19.8.2014: Inzwischen ist diese Problematik auch beim W3C angekommen. Håkon Wium Lie (der Erfinder von CSS, Mitarbeiter des W3C und Technikchef von Opera Software ASA) brachte vorgestern die letzte Aktualisierung für einen sehr detailliert ausgearbeiteten Vorschlag zu eingebetteten Bildern oder Kästen in CSS3 ein, das FiguresModul. Hier die Einzelheiten zu diskutieren, halte ich für überflüssig und nicht angebracht. Stattdessen verweise ich auf die (leider englischsprachige) Seite mit dem Artikel CSS Figures – http://figures.spec.whatwg.org/. Bedauerlicherweise wird ausgerechnet der Navigator Opera (oder besser gesagt, sein Interpreter Presto), der bisher in fast jeder neuen Technologie als Vorreiter fungierte, nicht mehr weiterentwickelt. Ein offener Brief an Håkon Wium Lie ist auf der Seite Opera veröffentlicht.

nth-column-width

Läßt es sich einrichten, den Textspalten separate Breiten zuzuordnen? Ein <Element>:nthcolumnwidth(2) {18%;} sollte doch wohl machbar sein. W3C: Bitte in Standard aufnehmen!


Umfragen
Ist die Seite „CSS-Wunschzettel“ sachlich hilfreich?
Ist die Seite „CSS-Wunschzettel“ detailliert genug?
NoteMengeMenge
00,0%
10,0%
20,0%
30,0%
40,0%
50,0%
60,0%
70,0%
80,0%
90,0%
100,0%

läuft seit dem 19.2.2013 (3 Jahre 2 Monate)

noch keine Stimmen

noch keine Stimmen

NoteMengeMenge
00,0%
10,0%
20,0%
30,0%
40,0%
50,0%
60,0%
70,0%
80,0%
90,0%
100,0%

läuft seit dem 19.2.2013 (3 Jahre 2 Monate)

noch keine Stimmen

noch keine Stimmen

0, gar nicht
3
6
9
10, absolut
0, gar nicht
3
6
9
10, absolut
Stö­rer stim­men bit­te mit 0 ab!

Ihr Kommentar

Es gibt noch keinen Kommentar zu dieser Seite. Seien Sie der erste Kommentator!

vionlink comments von vision impress webdesign

Wortwolke

separate zuzuordnen Wium 220a1 Punkt herstellerspezifischen einigermaßen abgebildet Technologie hinweg machbar davongetragen einzubettenden Zeitschriften schnell Teil überflüssig Höhe column-float einbauen Zeilen aufmerksame getan zentriert Seiten Druckmedien Navigator Maximalhöhe verweise Silbentrennung reguläre Optionen Entwicklungsarbeit kurzem umgebendes nth-column-width mehrspaltigem rechtsbündig -Schreibung Ansicht Stattdessen sitzt angepaßt Struktur relevant eingesetzt enthalten runterscrollen fungierte weiterentwickelt