Skip to content

Der Teufel steckt im Detail

Vor einigen Tagen hatte ich berichtet, wie sich mithilfe der <details>- und <summary>-Elemente von HTML 5 ganz leicht “ausklappbare” Erläuterungen - nur mit HTML und ggf. CSS, ohne Javascript - erzeugen lassen. Danach ist mir aufgefallen, dass wir - also vor allem vermutlich yellowled - das in Serendipity auch schon nutzen: im 2k11-Theme wird damit im Blog die einblendbare “Vorschau” der Trackback realisiert, und im Backend findet derselbe Mechanismus bei der Einblendung weiterer Informationen in den Plugin-Boxen Anwendung.

In einem Kommentar zu meinen Blogeintrag hatte Beat dann vorgeschlagen, statt der Screenshots doch lieber ein Live-Beispiel im Blog zu zeigen. Das wollte ich dann “mal eben schnell” nachholen - und natürlich ging das dann nicht “mal eben”, und nicht richtig schnell, so dass ich daran dann länger geknobelt habe. Mittlerweile tut es aber.

<details> und <summary> in der Praxis

Lorem ipsum!

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.

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

Trackbacks

Mitch’s Manga Blog am : Ausklappbare Blöcke

Vorschau anzeigen
Thomas schreib in seinem Blog über ausklappbare Absätze und wie er sie in Serendipity umgesetzt hat. Da ich in einem der nächsten Blog-Artikel (so ich ihn denn mal schreibe ∗hust∗ ∗hust∗) ein Spoiler-Tag brauche, kommt

Netz - Rettung - Recht am : Serendipity 2.3.5 released

Vorschau anzeigen
Während im Hintergrund an Serendipity 2.4 geschraubt wird, haben sich wieder genügend Fehlerbehebungen angesammelt, die ein Bugfix-Release rechtfertigen, so dass am vergangenen Wochenende Serendipity 2.3.5 veröffentlicht wurde. Die Einzelheiten zu den Än

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Beat am :

Beat

Danke für das Update und die weiterführenden Erläuterungen. Mit dem WYSIWYG-Editor geht das "out of the box" nicht.

Ich zitiere dazu einen Entwickler-Kommentar aus meinem Testblog:

Sollen "details" und "summary" tags erlaubt sein, so müssen diese explizit als Ausnahmen in die Extra Allowed Content [EAC] aufgenommen werden, siehe line 76 ff der ckeditor/cke_config.js. Und das muss bei jedem Update des CKEditors wieder entsprechend angepasst werden.

Ich finde die Idee nach wie vor smart. Da ich selbst jedoch ein reiner Anwender, ohne vertiefte PHP- oder Markdown-Kenntnisse bin, bleibt es wohl bei der Idee…

Gruss Beat

Thomas Hochstein am :

Thomas Hochstein

Ah, danke für den Hinweis! - Ich habe <details> und <summary> jetzt als erlaubte Elemente für den WYSIWYG-Editor aufgenommen, und nach einem schnellen Test scheint das seinen Zweck zu tun (man muss natürlich, solange es keinen Button dafür gibt, für die Eingabe in die Quellcode-Ansicht wechseln, aber der Editor entfernt diese Tags jedenfalls nicht mehr sofort wieder).

mitch am :

mitch

Das muss ich mir mal angucken, ich brauche demnächst ein Spoiler-Tag im Blog. Keine Ahnung, ob ich mir da schon Mal was gebastelt hatte.

Im RSS klappt damit bei mir übrigens alles vom Beispiel bis zum Artikelende ein und aus. Liegt vermutlich aber am Reader (Feedly Classic for Android).

Thomas Hochstein am :

Thomas Hochstein

Ist bei mir genauso und könnte daran liegen, dass die erste Veröffentlichung sinnigerweise vor Installation des Plugin-Upgrades (und damit noch mit verteilten "<p>") erfolgte, die vielleicht dazu führen, dass das "</details>" nicht erkannt wurde. Aber wer weiß, was Feedly so treibt. :-)

mitch am :

mitch

Die Tags in Deiner Antwort verschwinden im RSS auch. Außerdem werden die "" dort zu „“ – kann das das Markdown-Plugin sein?

Ich muss das mal bei mir gegen testen, aber vorher muss ich meinem emacs-orgmode-s9y-Export das Tag beibringen ;-)

Thomas Hochstein am :

Thomas Hochstein

Die Tags in Deiner Antwort verschwinden im RSS auch.

Das wird daran liegen, dass ich serendipity_event_unstrip_tags installiert habe. Das vergisst vermutlich, die Tags im RSS durch Entities zu ersetzen. (Im Sidebar-Comment-Plugin passiert dasselbe.)

Außerdem werden die "" dort zu „“ – kann das das Markdown-Plugin sein?

Ich denke ja - ich habe SmartyPants mitaktiviert, das sollte so etwas tun. In den Kommentaren aber eigentlich auch …

Ich muss das mal bei mir gegen testen, aber vorher muss ich meinem emacs-orgmode-s9y-Export das Tag beibringen

Die Unterstützung fehlt offenbar noch an manchen Stellen; so ist das eben mit "neuen" HTML-Elementen. :-)

Thomas Hochstein am :

Thomas Hochstein

Das wird daran liegen, dass ich serendipity_event_unstrip_tags installiert habe. Das vergisst vermutlich, die Tags im RSS durch Entities zu ersetzen.

So ist es. Aber so wird es nicht mehr sein.

Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Markdown-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Identicon/Ycon Autoren-Bilder werden unterstützt.
Formular-Optionen