Netz - Rettung - Recht

<details> und <summary> in der Praxis

Der “Quellcode” dafür sieht wie folgt aus (mit serendipity_event_markdown und Markdown Extra, damit Markdown auch innerhalb von HTML geparsed werden kann):

<details markdown="1"><summary>Lorem ipsum!</summary>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

* Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
* vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
* et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</details>

Natürlich geht das auch ohne Markdown; dann müsste man eben bspw. komplett HTML verwenden, etwa so:

<details><summary>Lorem ipsum!</summary>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,</li>
<li>vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</li>
<li>et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</details>

So weit, so gut; es passen auch Listen und alles mögliche anderen Elemente in einen <details>-Abschnitt.

Das ganze hat allerdings, wie schon geschildert, nicht ganz auf Anhieb geklappt.

Anpassungen am CSS

Initial war kaum erkennbar, dass dort etwas “ausklappbar” ist; es fehlte nämlich das typische “Dreieck” vor dem summary. Das liegt daran, dass das Stylesheet von 2k11 für das <summary>-Element im Frontend display: block; vorsieht, es also nicht als Liste anzeigt. Es dürfte zu erwägen sein, das auf die Darstellung der Trackbacks zu begrenzen. Bis dahin kann man in einem User-Stylesheet (user.css) Abhilfe schaffen, zum Beispiel so:

/* restore browser defaults for details & summary */
.content details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: disclosure-closed inside;
}

.content details[open] > summary:first-of-type {
  list-style-type: disclosure-open;
}

.content details > summary:first-of-type > *|* {
  /* Cancel "list-style-position: inside" inherited from summary. */
  list-style-position: initial;
}

Das entspricht dem Browser-Stylesheet des Firefox.

Update vom 25.04.2020: Die vorstehende Änderung ist nicht mehr nötig, weil das Stylesheet von 2k11 mit der Version 2.3.5 von Serendipity entsprechend angepasst wurde.

Außerdem finde ich persönlich es schick, wenn die Überschrift des <details>-Elements, also <summary>, durch Fettschrift hervorgehoben und das gesamte Element etwas kleiner (und mit verringertem Zeilenabstand) dargestellt wird. Dementsprechend müssen dann auch die Abstände zwischen den Absätzen kleiner sein. Außerdem möchte ich nicht, dass der “ausklappbare” Bereich bzw. - solange nichts ausgeklappt ist - die Überschrift nach innen eingerückt sind; beides soll vielmehr auf der linken Seite bündig abschließen. Das alles habe ich im user.css so gelöst:

/* details & summary */
.content details {
    font-size: 80%;       
    line-height: 1.6em;   
    padding-left: 1em;
}

.content details > summary {
    font-weight: bold;
    margin-left: -1em;
    margin-bottom: 0.5em; 
}

.content details p, 
.content details ul,
.content details ol {
    margin-bottom: 0.2em;
}

Anpassungen am Markdown-Plugin bzw. an PHP Markdown

Die Darstellung sah immer noch nicht richtig aus; eine genauere Betrachtung ergab, dass um die einzelnen Teile des <details>-Elements <p>-Elemente verstreut waren. Das kann nicht richtig sein; ich hielt erst serendipity_event_nl2br für den Bösewicht, es stellte sich aber heraus, dass der Fehler in Wahrheit im Markdown-Parser von serendipity_event_markdown lag. Trotz Probieren ließ sich dafür keine Abhilfe schaffen; also musste ich einen Blick in die Innereien von PHP Markdown werfen - das ist die Bibliothek, auf die das Markdown-Plugin aufsetzt.

Offenbar wurde <details> im Gegensatz zu bspw. <pre> nicht als Block-Level-Element erkannt. Die Lektüre im Issue-Tracker des PHP-Markdown-Projekts ergab Hinweise auf eine mögliche Lösung, die ich dann getestet und umgesetzt habe. Die Änderung wurde bereits in den PHP-Markdown-Code übernommen. Um nicht auf ein neues Release warten zu müssen, habe ich die Änderungen direkt in die Code-Kopie in unserem Markdown-Plugin kopiert, so dass sie für Serendipity direkt nach dem Update des Plugins zur Verfügung stehen.

Nun funktioniert’s in meinem Blog so, wie das sein soll.

Wer einen “grafischen” WYSIWYG-Editor verwendet, muss ggf. darauf achten, dass dieser <details> und <summary> erkennt und nicht ausfiltert. Ob der mit Serendipity ausgelieferte Editor das kann, weiß ich nicht, weil ich ihn nicht verwende (und bislang den Code des Editors auch nicht recht durchschaut habe).

Danke jedenfalls nochmal an Beat für seinen Vorschlag, das direkt im Blog zu demonstrieren, wenn die Umsetzung auch mehrere ungeplante “Abstecher” nach sich zog.

Titelbild © pripir - stock.adobe.com