Hinweis

Der Quelltext dieser Datei kann über jeden Browser direkt eingesehen werden. Das komplette CSS befindet sich im head-Bereich, steht also auch direkt im Quelltext.

Das Layout mit der kleinen Schrift in Großbuchstaben habe ich vom Ursprungstext übernommen. Siehe dazu auch meine Anmerkung am Schluß dieser Ausführung.

Original ohne CSS

Dadurch sind Leerzeichen und, wichtiger noch, fehlende Leerzeichen sichtbar. Die Browser brechen den Text nur an Leerzeichen um. BUCHKATRIN oder ROTHEKAMERATHOMAS und so weiter sind für die Browser hingegen jeweils Worte, innerhalb derer nicht umgebrochen wird. Dadurch entstehen die teilweise sehr breiten Leerflächen an den Zeilenenden.

BUCHKATRIN ROTHEKAMERATHOMAS SCHNEIDER, BJÖRN ULLRICH, ROBERT LAATZ UND ANDERESCHNITTSILKE BOTCHTONOLIVER SROWELEITMUSIKTHOMAS MÄVERSSOUNDDESIGNANDRES WASSERFALLANIMATIONCAROLINE HAMANN, LYDIA GÜNTHER, LISA NEUBAUER, GABRIEL MÖHRING, JONATHAN WEBBER, MATTHIAS DAENTSCHELDARSTELLERSPRECHER: CLAUDIA MICHELSEN, HANNS ZISCHLER, INKA FRIEDRICH, MAXIMILIAN BRAUER, MARTIN SCHNEIDER, ARNO FUHRMANNPRODUZENTKATRIN ROTHEPRODUKTIONSLEITUNGNICOLE SCHINKREDAKTIONARTE, RBBFILMFÖRDERUNGMEDIENBOARD BERLIN BRANDENBURGVERLEIHKATRIN ROTHE IN KOOPERATION MIT XY

Original mit CSS

Hier werden vermeintliche Leerzeichen angezeigt, die aber durch CSS erzeugt wurden. Für den Zeilenumbruch nimmt der Browser aber die Leerzeichen aus dem HTML-Quelltext im body-Bereich. Und der stimmt mit dem vorherigen Quelltext überein.

BUCHKATRIN, ROTHEKAMERATHOMAS und so weiter werden also weiterhin nicht getrennt.

BUCHKATRIN ROTHEKAMERATHOMAS SCHNEIDER, BJÖRN ULLRICH, ROBERT LAATZ UND ANDERESCHNITTSILKE BOTCHTONOLIVER SROWELEITMUSIKTHOMAS MÄVERSSOUNDDESIGNANDRES WASSERFALLANIMATIONCAROLINE HAMANN, LYDIA GÜNTHER, LISA NEUBAUER, GABRIEL MÖHRING, JONATHAN WEBBER, MATTHIAS DAENTSCHELDARSTELLERSPRECHER: CLAUDIA MICHELSEN, HANNS ZISCHLER, INKA FRIEDRICH, MAXIMILIAN BRAUER, MARTIN SCHNEIDER, ARNO FUHRMANNPRODUZENTKATRIN ROTHEPRODUKTIONSLEITUNGNICOLE SCHINKREDAKTIONARTE, RBBFILMFÖRDERUNGMEDIENBOARD BERLIN BRANDENBURGVERLEIHKATRIN ROTHE IN KOOPERATION MIT XY

Quelltext in einer Zeile mit span-Elementen aber ohne spezielles CSS

Die einzelnen Aufgabenbereiche wie Buch, Kamera, Schnitt und so weiter stehen in span-Elementen, der Rest des Textes nicht. An allen sichtbaren Leerzeichen können die Browser den Text umbrechen.

Buch Katrin Rothe Kamera Thomas Schneider, Björn Ullrich, Robert Laatz und Andere Schnitt Silke Botch Ton Oliver Sroweleit Musik Thomas Mävers Sounddesign Andres Wasserfall Animation Caroline Hamann, Lydia Günther, Lisa Neubauer, Gabriel Möhring, Jonathan Webber, Matthias Daentschel Darsteller Sprecher: Claudia Michelsen, Hanns Zischler, Inka Friedrich, Maximilian Brauer, Martin Schneider, Arno Fuhrmann Produzent Katrin Rothe Produktionsleitung Nicole Schink Redaktion Arte, RBB Filmförderung Medienboard Berlin Brandenburg Verleih Katrin Rothe in Kooperation mit XY

Quelltext in einer Zeile mit span-Elementen und angepasstem CSS

Buch Katrin Rothe Kamera Thomas Schneider, Björn Ullrich, Robert Laatz und Andere Schnitt Silke Botch Ton Oliver Sroweleit Musik Thomas Mävers Sounddesign Andres Wasserfall Animation Caroline Hamann, Lydia Günther, Lisa Neubauer, Gabriel Möhring, Jonathan Webber, Matthias Daentschel Darsteller Sprecher: Claudia Michelsen, Hanns Zischler, Inka Friedrich, Maximilian Brauer, Martin Schneider, Arno Fuhrmann Produzent Katrin Rothe Produktionsleitung Nicole Schink Redaktion Arte, RBB Filmförderung Medienboard Berlin Brandenburg Verleih Katrin Rothe in Kooperation mit XY

Quelltext mit span-Elementen jeweils in einer neuen Zeile und angepasstem CSS

Dadurch ist der HTML-Quelltext im body-Bereich übersichtlicher und Fehler werden problemloser erkannt, die Anzeige im Browser bleibt gleich.

Buch Katrin Rothe Kamera Thomas Schneider, Björn Ullrich, Robert Laatz und Andere Schnitt Silke Botch Ton Oliver Sroweleit Musik Thomas Mävers Sounddesign Andres Wasserfall Animation Caroline Hamann, Lydia Günther, Lisa Neubauer, Gabriel Möhring, Jonathan Webber, Matthias Daentschel Darsteller Sprecher: Claudia Michelsen, Hanns Zischler, Inka Friedrich, Maximilian Brauer, Martin Schneider, Arno Fuhrmann Produzent Katrin Rothe Produktionsleitung Nicole Schink Redaktion Arte, RBB Filmförderung Medienboard Berlin Brandenburg Verleih Katrin Rothe in Kooperation mit XY

Semantik

Von der Semantik und damit Barrierefreiheit beziehungsweise Zugänglichkeit her sind alle bisherigen Beispiele eine Katastrophe und sollten tunlichst vermieden werden.

Deshalb noch ein korrektes Beispiel und danach der Beleg, dass daraus mit etwas CSS auch die ursprünlich gewünschte Darstellung erzeugt werden kann.

Quelltext semantisch korrekt mit dem dl-Element ohne angepasstem CSS

Buch
Katrin Rothe
Kamera
Thomas Schneider, Björn Ullrich, Robert Laatz und Andere
Schnitt
Silke Botch
Ton
Oliver Sroweleit
Musik
Thomas Mävers
Sounddesign
Andres Wasserfall
Animation
Caroline Hamann, Lydia Günther, Lisa Neubauer, Gabriel Möhring, Jonathan Webber, Matthias Daentschel
Darsteller
Sprecher: Claudia Michelsen, Hanns Zischler, Inka Friedrich, Maximilian Brauer, Martin Schneider, Arno Fuhrmann
Produzent
Katrin Rothe
Produktionsleitung
Nicole Schink
Redaktion
Arte, RBB
Filmförderung
Medienboard Berlin Brandenburg
Verleih
Katrin Rothe in Kooperation mit XY

Quelltext semantisch korrekt mit dem dl-Element und angepasstem CSS

Buch
Katrin Rothe
Kamera
Thomas Schneider, Björn Ullrich, Robert Laatz und Andere
Schnitt
Silke Botch
Ton
Oliver Sroweleit
Musik
Thomas Mävers
Sounddesign
Andres Wasserfall
Animation
Caroline Hamann, Lydia Günther, Lisa Neubauer, Gabriel Möhring, Jonathan Webber, Matthias Daentschel
Darsteller
Sprecher: Claudia Michelsen, Hanns Zischler, Inka Friedrich, Maximilian Brauer, Martin Schneider, Arno Fuhrmann
Produzent
Katrin Rothe
Produktionsleitung
Nicole Schink
Redaktion
Arte, RBB
Filmförderung
Medienboard Berlin Brandenburg
Verleih
Katrin Rothe in Kooperation mit XY

Nebenbei sind die beiden letzten Beispiele ein schönes Beispiel dafür, wie durch ein schlechtes Layout die Lesbarkeit eines Textes deutlich verschlechtert werden kann. Für mich ist der unformatierte Text deutlich angenehmer und übersichtlicher lesbar.