Markierte Headline in vielen Varianten

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.

9 Kommentare

  1. Noch eine Möglichkeit, ohne spans dafür wieder mit br 🙂

    http://codepen.io/anon/pen/tyrEv

    • 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.

      • 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 😉

  2. 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.

    • 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.

      • Aber wenn ich die Breite der Überschrift mit diesem kontrolliere, wirkt sich das dann auch auf die anderen Inhalte aus.

        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.

  3. Letzter Versuch: <br>s