Spalten erzeugen in Yellow

Weil Markdown nur Inline-Formate anbietet, erfordern Block-Elemente „HTML-Fummeleien“, wenn Yellow-Seiten damit gestaltet werden sollen. Ein eleganterer Lösungsweg führt über eine Extension.

Ergänzender Hinweis von Datenstrom

Bögen sind die Aufteilung von Raum in Spalten.

Der Artikel Columns für Yellow CMS von Herbert Unterlechner ist der Auslöser für diesen Artikel. So kann man es machen. Die dort geschilderten Schwierigkeiten lassen sich umgehen und mittels anderem CSS sehr übersichtlich „fluid design“ realisieren.

Der „Spaltenklassiker“ sind Tabellen. Einfache lassen sich in Markdown runterschreiben. Aus

| Anforderung      | Wie       | Aufwand | 
| ---------------- | --------- | ------- | 
| Einfache Tabelle | Markdown  | Niedrig | 
| Spalten          | HTML      | Hoch    | 
| Spalten          | Extension | Niedrig | 

wird (mit ein bisschen CSS dahinter)


Anforderung Wie Aufwand
Einfache Tabelle Markdown Niedrig
Spalten HTML Hoch
Spalten Extension Niedrig

Womit wir mittendrin wären. Denn es gibt im offiziellen Sortiment von Yellow keine „Spalten­ex­ten­sion“. Weil ich schon vor geraumer Zeit „variierende Blockformate“ als Anforderung hatte, ist die Erweiterunt Format entstanden. Mit der Veröffentlichung von Version 0.8.4 von Yellow gibt es die unter der verknüpften Adresse bei GitHub.

Was kann die Extension „Format“?

Objektiv betrachtet handelt es sich um eine vergleichsweise „dumme“ Erweiterung. Ihr ganzes Dasein beschränkt sich darauf, den Anfang oder das Ende eines DIV-Blocks zu markieren. Das kann man natürlich in Yellow direkt mit HTML machen. „Format“ bietet demgegenüber jedoch einige Vorteile:

  • Damit können auch Bearbeiter von Yellow-Seiten Blockformate erzeugen, für die das Nutzen von HTML-Code aus Sicherheitsgründen gesperrt ist
  • Der erzeugte Markdown-Text bleibt in allen Teilen gut lesbar
  • Zwischen Anfang und Ende der erzeugten Blöcke können andere Yellow-Funktionen genutzt werden
  • Die Befehlssequenz lässt sich bei Weiterverwendung des Textes mit einem Texteditor sehr einfach aus dem Markdown filtern

Weil DIVs allein noch keine Spalten machen, kann noch eine Klasse oder ein Stil mitgegeben werden. Beides hat lediglich den klitzekleinen Haken, dass man für Ersters natürlich wissen muss, welche dafür vorhanden und geeignet sind, für Letzteres muss man die Möglichkeiten von style="…" kennen. Zumindest für den ersten Fall hilft ggf. eine Liste, die auf einer internen Hilfsseite hinterlegt ist (versehen mit status:draft, siehe „Weiteres“ im Artikel „Eine Webseite mit Yellow erstellen“).

„Fluid Design“

Die Herausforderung an zeitgemäße Webseiten besteht mittlerweile hauptsächlich darin, dass sie auf unterschiedlichsten Geräten „gut aussehen“ soll. Eine besser befüllte Tabelle als das Beispiel oben ist auf Mobiltelefonen schnell ein echter Showstopper. Wird's schmal, wird's schnell zu eng dafür. Es hängt dann sehr stark vom verwendeten Browser ab, wie diese Herausforderung gelöst wird.

Auch die bisher vorherrschende Technik von umfließenden Blöcken (worauf der oben verlinkte Artikel basiert) stößt insbesondere bei mehreren Spalten nebeneinander, für die eigentlich kein Platz ist, schnell an ihre Grenzen. Dabei gibt es doch für alle neueren Browser (selbst IE10 aufwärts) die wunderbare CSS-Eigenschaft display:grid.

Weil alle Browser, die an diesen Befehl zerschellen, ein grundlegendes Sicherheitsrisiko darstellen, mache zumindest ich mir um die dort vermutlich unerfreuliche Formatierung keine Gedanken. Abwärtskompatibilität sollte Grenzen kennen.

display:grid

Hier bei BUOA.DE gibt es im CSS für Spalten drei Klassen:

.colh{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));
    grid-gap:2rem;
}
.col3{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
    grid-gap:1rem;
}
.col4{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
    grid-gap:1rem;
}

Damit werden „halbe“, drei oder vier Spalten definiert. Eine ausführliche Erläuterung von display:grid würde hier den Rahmen sprengen. Es gibt diverse Autoren, die sich daran versuchen, ein immer gut belastbarer Einstieg findet sich bei selfhtml. Das Wesentliche ist schnell zusammengefasst:

  • GRID funktioniert verlässlich und elegant ohne media-queryies (ggf. bei selfhtml nachschlagen…)
  • Die Spalten entstehen mit minimalem HTML-Code
  • Das Ergebnis passt sich wunderbar an die jeweiligen Möglichkeiten an
  • Es gibt keine „verhakten“ Blockelemente, die das Layout zerschießen

Besonders cool ist die Tatsache, dass ein Grid-Bereich automatisch alle nachfolgenden Elemente einer Ebene („Kinder“) mit den Vorgaben der „grid-Klasse“ formatiert. Aus

[format col4]

Das ist ein famoser Demo-Text für die Spalte 1.

Das ist ein famoser Demo-Text für die Spalte 2

Das ist ein famoser Demo-Text für die Spalte 3. Weil es keinen Stress auslöst, kann eine Spalte auch mal mehr Text haben.

Das ist ein famoser Demo-Text für die Spalte 4

[format /]

wird


Das ist ein famoser Demo-Text für die Spalte 1.

Das ist ein famoser Demo-Text für die Spalte 2

Das ist ein famoser Demo-Text für die Spalte 3. Weil es keinen Stress auslöst, kann eine Spalte auch mal mehr Text haben.

Das ist ein famoser Demo-Text für die Spalte 4


… , weil jeder Absatz mit <p>…</p> umschlossen ist, das zu einem Blockelement wird. Wären mehr als vier Absätze in dieser Definition, würde automatisch eine weitere Zeile mit passend formatierten Absatzblöcken eröffnet.

Je nach verfügbarem Platz rutschen die Spalten neben oder untereinander. Nebeneinander sind sie immer gleich hoch, weshalb nachfolgender Text dort keinesfalls „hängen bleibt“, was bei den bisherigen Lösungen nur aufwändig lösbar ist („clear …“).

Sollen mehrere Blöcke gebildet werden, lässt sich das mit [Format -] lösen. In dieser „Leer-Form“ wird lediglich ein DIV geöffnet, mit dem dann alles umschlossen wird, was in ein Blockelement des Grids fließen soll.

Natürlich lässt sich [format] gleichermaßen für Float-Blöcke nutzen. Die gibt es hier bei BUAO.DE auf älteren Seiten ebenfalls. Sie stammen aus der Zeit, in der es kein „grid“ gab bzw. ich display:grid noch nicht kannte.

Für Fragen und Ergänzungswünsche bitte die Kommentarfunktion am Seitenende nutzen.

Nachtrag 03.06.2019

Von Datenstrom kam eine spannende Rückmeldung bzgl. einer Besonderheit des Ausrufezeichens, das im Cheat-Sheet für „Hinweise“ ausgewiesen ist.

Das Ausrufezeichen kann mit einer Formatanweisung ergänzt werden und funktioniert dann ähnlich wie die [format…]-Extension. Die übliche Anwendung sieht so aus:

! Hinweis mit „Warnung“-Farbe.

!! Hinweis mit „Fehler“-Farbe.

!!! Hinweis mit „Tipp“-Farbe.

Typischerweise werden damit einzelne Absätze mittels Format-Einstellungen in den Standard-Formatdateien hervorgehoben:


Hinweis mit „Warnung“-Farbe.

Hinweis mit „Fehler“-Farbe.

Hinweis mit „Tipp“-Farbe.


Das Ausrufezeichen lässt sich darüber hinaus auch so nutzen:

!{.right .notice1}
! Spalte rechts. Über mehrere Zeilen möglich.
! **Unterstützt** *Markdown-Fromatierung*.

Der zu umfließende Text. Der zu umfließende Text. Der zu umfließende Text. Der zu umfließende Text.

Weil es hier das Format .right gibt, sieht das dann so aus:


Spalte rechts. Über mehrere Zeilen möglich. Unterstützt Markdown-Fromatierung.

Der zu umfließende Text. Der zu umfließende Text. Der zu umfließende Text. Der zu umfließende Text.


Das lässt sich sogar „schachteln“:

!{.notice1}
! Warnung-Farbe
!!{.notice2}
!! Fehler-Farbe
!!!{.notice3}
!!! Tipp-Farbe
!
! Warnung-Farbe

und sieht dann so aus:

Warnung-Farbe

Fehler-Farbe

Tipp-Farbe

Warnung-Farbe

Das ist jetzt kein besonders pfiffiges Beispiel, es soll lediglich zeigen, wie die Anwendung funktioniert. Für kleinere Strukturen ist das eine hilfreiche Alternative zur [format…]-Extension, denn die Ausrufezeichen markieren den formatierten Bereich. Genau das kann eventuell etwas anstrengend und je nach Verschachtelungstiefe unübersichtlich werden. Für einfache Strukturen, wie oben im Beispiel für die vier Spalten mit je einem Absatz ist es jedoch eine gut handhabbare Formatierung, die dafür recht übersichtlich ist:

!{.col4}
!Das ist ein famoser Demo-Text für die Spalte 1.
!
!Das ist ein famoser Demo-Text für die Spalte 2
!
!Das ist ein famoser Demo-Text für die Spalte 3. Weil es keinen Stress auslöst, kann eine Spalte auch mal mehr Text haben.
!
!Das ist ein famoser Demo-Text für die Spalte 4


Das ist ein famoser Demo-Text für die Spalte 1.

Das ist ein famoser Demo-Text für die Spalte 2

Das ist ein famoser Demo-Text für die Spalte 3. Weil es keinen Stress auslöst, kann eine Spalte auch mal mehr Text haben.

Das ist ein famoser Demo-Text für die Spalte 4


Das Bild stammt von Pixabay.