Kurz nach der Veröffentlichung des gestrigen Artikels über die markierte Headline gingen Reaktionen über Twitter, später auch in den Kommentaren des Beitrags ein. Darin wurden andere Lösungsvorschläge gemacht. Ich habe diese im Folgenden dokumentiert und jedem Vorschlag einen eigenen Codepen spendiert.
Der Sinn der gestrigen Übung war nicht, eine ideale Lösung vorzuschlagen. Dafür müsste ich auch Vorschläge für Mediaqueries machen. Doch dieses Detail kann jeder individuell im eigenen Projekt relativ simpel umsetzen. Ich wollte eine bessere Lösung zeigen, die nicht darauf baut, dass eine Überschrift sinnloserweise in drei Überschriften getrennt wird.
Ich finde die Ansätze interessant. Aber nicht jeder hatte offenbar die Limitierungen seines Ansatzes im Blick. Ich habe den Eindruck, es ging im Wesentlichen darum, die BR-Elemente wegzubekommen.
Mein Vorschlag
Durch die Nutzung der BR-Elemente kann ich den Zeilenumbruch direkt steuern. Es ist ein Element, das Redakteuere instinktiv verstehen und viel mehr lieben, als wir mögen. Aber die zusätzliche Formatierung mit SPAN-Elementen macht die Umsetzung in einem CMS durch Redakteure schwieriger.
See the Pen marked headline – example 1 by Jens Grochtdreis (@jensgro) on CodePen.
Die ausgelassene Version
Ich hatte bewußt eine Version mit Floats ausgelassen. Denn wenn die Agentur schon ein solches HTML-Chaos anrichtet, wie groß ist dann die Chance, dass Floating und Clearing verstanden wurden?
Wichtig ist bei dieser Lösung, dass die nachfolgenden SPAN-Elemente immer den vorherigen Float clearen. So wird ein Umbruch erzeugt, der dem BR gleich kommt. Wichtig ist zudem, die Überschrift ihre floatenden Kinder umfassen zu lassen. Das habe ich hier mit overflow:hidden gelöst. Ich hätte auch den Clearfix nehmen können.
See the Pen marked headline – example 2 by Jens Grochtdreis (@jensgro) on CodePen.
Vorschlag von Dennis Frank
Dieses Beispiel funktioniert nur, weil Dennis die Breite des umgebenden Containers – in seinem Beispiel BODY – beschränkt hat. Also muss für den Realitätscheck ein Wrapper-Container drum, der eine Breite vorgibt, damit die Worte an den richtigen Stellen umbrechen.
See the Pen marked headline – example 3 by Jens Grochtdreis (@jensgro) on CodePen.
Vorschlag von Marc Hinse
Diese Version ist wegen der doppelt verschachtelten SPAN-Elemente besser in einem CMS umsetzbar. Sie kommen einfach ins Template. Allerdings ist die Lösung von einem umgebenden Container abhängig, dem eine Breite gegeben wird. Diese Breite steuert dann den Umbruch. Das Ergebnis ist also zufällig das gleiche wie bei meinem Vorschlag. Es ist aber nicht individuell kontrollierbar. Zudem hängt die Überschrift links aussen und lässt sich dort auch nur schwer wegbewegen. Das CSS ist nicht einfach konfigurierbar und muss in seiner Mechanik unbedingt dokumentiert werden.
See the Pen marked headline – example 4 by Jens Grochtdreis (@jensgro) on CodePen.
Lösung von Tom Arnold
Auch diese Lösung kommt nur mit einem umfassenden Container aus. Ursprünglich stand noch eine Breite von 50% im CSS. Dabei ist aber das Endergebnis bei kleineren Breiten sehr schlecht, weil keine Mindestbreite erwähnt wird. Immerhin muss diese Lösung nicht mit Positionierungsproblemen, wie die von Marc leben. Von meiner Lösung unterscheidet sie sich nur durch die fehlenden BR-Elemente. Allerdings kommt sie auch weniger solide daher und benötigt eine separaten Wrapper-Container.
See the Pen marked headline – example 5 by Jens Grochtdreis (@jensgro) on CodePen.
Lösung von Dennis Erdmann
Dennis Erdmann wies mich auf ein ähnlich formatiertes Element innerhalb der Slider bei der Segeberger Kliniken Gruppe hin. Es handelt sich dabei um Zitate, keine Überschriften. Ich habe die dahinterliegende Idee auf die Überschriften transportiert.
Diese Lösung kommt wieder mit zwei ineinander verschachtelten SPAN-Elementen, hat einen Wrapper-Container, der die Breite und damit den Umbruch vorgibt und hat ein leichtes Positionierungsproblem, weil die Überschrift links rausragt.
See the Pen marked headline – example 6 by Jens Grochtdreis (@jensgro) on CodePen.
Vorschlag von Fabian Beiner
Fabian machte einen Vorschlag in den Kommentaren zum Artikel, der nur auf zwei Eigenschaften beruht. Das Ergebnis finde ich charmant. So kann ich auf die BR-Elemente verzichten.
See the Pen marked headline – example 7 by Jens Grochtdreis (@jensgro) on CodePen.
Vorschlag von Tomas Caspers
Der Vorschlag von Tomas verbessert den von Fabian in der Weise, dass nur noch eine Regel notwendig ist. Mein Favorit! Aber wir kommen nicht um die SPAN-Elemente herum.
See the Pen marked headline – example 8 by Jens Grochtdreis (@jensgro) on CodePen.
18. Juli 2014 um 12:31 Uhr
Noch eine Möglichkeit, ohne spans dafür wieder mit br 🙂
http://codepen.io/anon/pen/tyrEv
18. Juli 2014 um 12:34 Uhr
Gute Idee. Die hat aus meiner Sicht den Nachteil, dass sie die erste ist, die nicht im IE8 funktioniert. Alle anderen sind so simpel, dass das ausser Frage steht. Und auf den IE8 kann ich in meiner Praxis leider noch immer nicht verzichten.
18. Juli 2014 um 12:50 Uhr
Auf IE8 support können wir auch nicht verzichten. Da der Darstellungsunterschied minimal ist und die Lesbarkeit nicht beeinträchtigt ist konnte ich das zum Glück durchboxen 😉
18. Juli 2014 um 12:55 Uhr
Hi Jens,
bei mir ragt nichts links raus. Zumindest nicht, wenn man auch die Regeln für den inneren Span kopiert übernimmt. Man sieht ja im Beispiel, dass das passt.
Zum Thema Flexibilität: Auch bei meiner Lösung kannst Du (der Redakteur) einen manuellen Umbruch einfügen. Ohne wäre ja blöd. Einen umliegenden Container brauchst Du doch sowieso, diesen kann man dann schön per Media Query in der Breite verändern, genau wie die Schriftgröße etc. Drei spans halte ich für ziemlich sinnfrei. Denn das wäre sehr unflexibel. Was, wenn mal nur zwei Zeilen benötigt werden? Was, wenn vier? Klar, kann das CMS über die Zeilen iterieren und spans drum rum bauen. Aber dann bestimmt der Content das Markup, und das ist wohl kaum, was wir wollen.
18. Juli 2014 um 15:40 Uhr
Hi Marc,
Du hast Recht, ich hatte die letzte Regel übersehen und nicht mitkopiert. Ich habe es korrigiert.
Einen umliegenden Container brauche ich nicht unbedingt, jedenfalls keinen, der mir die Überschrift kontrolliert. Natürlich steckt die Überschrift in einem Container. Aber wenn ich die Breite der Überschrift mit diesem kontrolliere, wirkt sich das dann auch auf die anderen Inhalte aus. Das ist ungeschickt.
Ich denke, für die Redakteuere und die Nutzung in einem CMS wäre es das Beste, keine SPANs haben zu müssen und BR nach Notwendigkeit eingeben zu können.
18. Juli 2014 um 16:50 Uhr
Und das machst Du mit manuellen s nicht?
Ich finde manuelle Umbrüche ziemlich ungeschickt. Was wenn der Redakteur entscheiden möchte, dass die Überschrift auf großen Screens:
Zwischen Traumtor und Chancetod:
Die Mediathek!
Auf mittleren Screens:
Zwischen Traumtor
und Chancentod:
Die Mediathek!
und auf kleinen Screens:
Zwischen
Traumtor
und
Chancentod:
Die
Mediathek!
sein soll? Dann kommen Dir die manuellen s sowas von in Quere.
18. Juli 2014 um 16:51 Uhr
„Manuellen
s“ natürlich.18. Juli 2014 um 17:40 Uhr
Ich würde die Überschrift nicht umbrechen, sondern die Schrift verkleinern, damit sie in dem gewünschten Arrangement auch auf kleineren Bildschirmen zu sehen ist. Und wer braucht schon eine 30px-Headline auf seinem Smartphone?
18. Juli 2014 um 16:52 Uhr
Letzter Versuch: <br>s