Inhalte richtig bauen: Markdown, HTML und Animation

Markdown ist gewöhnlicher Text mit wenigen Zeichen für die Gestaltung.

Text formatieren

• # Titel, ## Untertitel für Überschriften
• **fett**, *kursiv*
• Zeile mit - beginnen für eine Aufzählung, mit 1. für eine nummerierte
• Neue Zeile: einfach Enter drücken
• --- in eigener Zeile zieht eine Trennlinie
• [Text](https://…) für einen Link
• Bild einfügen: Knopf Bild einfügen über dem Textfeld. Ausrichten: "center" oder "right" hinter die Bild-URL, z.B. ![Titel](url "center") (sonst links)

Icon-Kürzel

Ein Kürzel wird zu einem farbigen Symbol-Button, die zweite Form ist zusätzlich animiert:

• :phone: / :phone-ring: Telefon, klingelt
• :link: / :link-pulse: Link, pulsiert
• :mail: / :mail-shake: Brief, wackelt
• :calendar: / :calendar-flip: Kalender, blättert
• :location: / :location-bounce: Ort, wippt

Eine Uhrzeit wie 10:30 bleibt unverändert.

HTML im Markdown

Markdown darf rohes HTML enthalten, etwa ein <div> oder ein <style> mit einer Animation. Dafür gelten dieselben Regeln wie im Format HTML, auch für die Länge. Was der Bildschirm entfernt, steht im nächsten Abschnitt.

Im Format HTML schreiben Sie einen HTML-Ausschnitt, ohne <html>, <head> und <body>.

Erlaubte Formatierung

Übliche Tags funktionieren: <h1> bis <h3>, <p>, <strong>, <em>, <ul> / <ol> / <li>, <a href="…">, <br>, <mark>. Für die Gestaltung stehen <div> und <span> mit class und style bereit, eigenes CSS schreiben Sie in ein <style>.

Bilder

Nur Bilder aus der Mediathek, also Adressen unter /cdn/assets/…. In der Mediathek kopiert der Knopf URL kopieren die Adresse eines Bildes. Ein <img> mit einer fremden Adresse entfernt der Bildschirm ganz, ebenso ein <image> in einer SVG-Grafik.

Adressen im CSS

Auch CSS darf nur laden, was aus der Mediathek kommt. Das gilt für url() in jeder Eigenschaft, für image-set() und für @import, im style-Attribut wie in einem <style>-Block. Bilder und Schriften dürfen Sie zusätzlich direkt als data: einbetten, etwa eine Schrift mit src: url(data:font/woff2;base64,…) in @font-face. Steht im CSS eine andere Adresse, lässt sich der Inhalt nicht speichern, und der Editor weist Sie schon vorher mit einem Hinweis darauf hin.

Was entfernt wird

Vor dem Anzeigen entfernt der Bildschirm:

• jedes <script>
• <iframe>, <object> und <embed>
• Event-Handler wie onclick oder onload
• Links mit javascript:
• Bilder, Videos und Töne von fremden Adressen (<img>, <video>, <audio>, <source>)
• CSS mit einer fremden Adresse: im style-Attribut fällt das ganze Attribut weg, in einem <style>-Block die betroffene Regel
• in SVG-Grafiken jeder Verweis auf eine andere Datei, etwa fill="url(https://…)" oder <use href="https://…">
• alles, was nicht auf den Listen im nächsten Abschnitt steht, etwa <input>, <form> oder das Merkmal background an einer Tabelle

Enthält Ihr Inhalt etwas davon, zeigt der Editor unter dem Textfeld einen Hinweis. Ein solcher Inhalt lässt sich nicht speichern, und die Ablehnung nennt die Stelle. Die eine Ausnahme ist ein Bild in Markdown-Schreibweise mit fremder Adresse: es wird gespeichert, erscheint am Bildschirm aber nicht.

Icon-Badges

Die Kürzel wie :phone: gelten nur im Markdown-Modus. In HTML schreiben Sie den Badge direkt als <span> mit zwei Klassen, eine dritte Klasse setzt ihn in Bewegung:

• Telefon: q-ico q-ico-tel, klingelnd mit q-anim-ring
• Link: q-ico q-ico-link, pulsierend mit q-anim-pulse
• Brief: q-ico q-ico-mail, wackelnd mit q-anim-shake
• Kalender: q-ico q-ico-cal, blätternd mit q-anim-flip
• Ort: q-ico q-ico-pin, wippend mit q-anim-bounce

Zum Beispiel <span class="q-ico q-ico-tel q-anim-ring">☎</span>.

Der Bildschirm zeigt nur Elemente und Merkmale, die auf den Listen unten stehen. Alles andere entfernt er vor dem Anzeigen, und der Editor weist Sie schon vorher mit einem Hinweis darauf hin. Bei einem Element wie <font> oder <center> fällt nur das Element weg, der Text darin bleibt stehen. Die Listen sind dieselben, nach denen der Bildschirm bereinigt.

SVG-Grafiken sind erlaubt, auch mit Verläufen, Masken und Schatten. Ein Verweis darf dabei nur innerhalb des Inhalts zeigen, etwa fill="url(#verlauf)" oder <use href="#punkt">. Verweise auf andere Dateien und Bilder von fremden Adressen entfernt der Bildschirm.

Bewegung entsteht allein über CSS-Animationen, in einem <style> oder im style-Attribut, denn Skripte entfernt der Bildschirm. Aus diesen Animationen ergibt sich die Länge eines Inhalts.

So wird gemessen

• Eine Endlosschleife (infinite) zählt mit ihrer Dauer. Ihre Verzögerung verschiebt nur, an welcher Stelle der Schleife sie einsetzt, und zählt nicht mit.
• Eine endliche Animation zählt mit Verzögerung plus Dauer mal Wiederholungen: animation: titel 5s 2s 3 ergibt 17 Sekunden.
• Hat ein Inhalt mehrere Animationen, zählt die längste.
• Die Bewegung der Icon-Badges (Klassen, die mit q-anim- beginnen) zählt nicht mit.
• Hat ein Inhalt mehrere Sprachfassungen, zählt die längste davon.

Die Grenze

Ein animierter Inhalt darf höchstens 30 Sekunden lang sein, dieselbe Grenze wie für ein Video. Der Editor zeigt die gemessene Länge unter der Vorschau und sperrt das Speichern, solange sie darüber liegt. Ein Video wird beim Hochladen auf die Grenze gekürzt, ein zu langer animierter Inhalt dagegen wird beim Speichern abgelehnt: gekürzt fehlte am Bildschirm still sein Ende.

Steht an einer Zeitstelle var(), calc() oder eine verwandte Funktion wie min(), max() oder clamp(), lässt sich die Länge nicht bestimmen, und der Inhalt wird beim Speichern ebenfalls abgelehnt. Schreiben Sie Dauer und Verzögerung als feste Werte in s oder ms, oder geben Sie die Länge mit data-duration selbst an.

Am Bildschirm

Ist die gemessene Länge grösser als 12 Sekunden, hält der Inhalt seine Zone für genau einen Durchgang, wie ein Video, und danach folgt der nächste Inhalt. Eine kürzere Animation hält nichts fest: der Inhalt wechselt im gewohnten Takt, und eine kleine Schleife wie ein pulsierender Pfeil läuft einfach mit, solange er zu sehen ist. Das gilt in jeder Zone des Bildschirms.

Mit dem Attribut data-duration legen Sie die Länge eines Inhalts selbst fest, etwa <div data-duration="20s">. Die Angabe gewinnt über die Messung der Animationen, auch wenn diese länger oder nicht bestimmbar wäre; var() und calc() in den Animationen spielen für die Länge dann keine Rolle mehr. Sie gilt auch für einen Inhalt ganz ohne Animation, der dann genau so lange in seiner Zone steht. Anders als eine gemessene Länge hält eine angegebene die Zone auch dann, wenn sie unter 12 Sekunden liegt.

Wo die Angabe stehen muss

Am äussersten Element, also am ersten Element im Quelltext. Ein <style>, ein <script> und Kommentare davor werden übersprungen. In Markdown zählt das erste HTML-Element im Rohtext, auch wenn darüber eine Überschrift mit # steht. An einem inneren Element wirkt die Angabe nicht.

Gültige Werte

Eine Zahl mit s oder ms, zum Beispiel 20s, 1500ms oder 12.5s. Ungültig sind eine Zahl ohne Einheit, ein Leerzeichen zwischen Zahl und Einheit, ein Komma statt des Punkts und der Wert null. Bei einem ungültigen Wert sperrt der Editor das Speichern und nennt den Wert. Auch für die Angabe gilt die Grenze von höchstens 30 Sekunden.

Steht ein <style> als erstes Element im Quelltext, hebt der Browser es beim Einlesen in den Kopf des Dokuments, und dort verwirft es der Bildschirm. Dann fehlen die Animationen, und der Editor misst auch keine Länge. Die Vorschau im Editor zeigt das genauso, Sie sehen es also vor dem Speichern.

Die Abhilfe ist ein umschliessendes Element: setzen Sie den ganzen Inhalt samt <style> in ein <div>. In Markdown gilt dasselbe, wenn der Text mit einem <style> beginnt.