Abbildung

Ein <figure> bindet die Unterschrift an das, was sie beschreibt — was ein Absatz unter einem Bild nicht tut. Übergib src für den Normalfall, oder Kinder für alles andere, das eine Unterschrift verdient.

Einfache Abbildung

figure({
  src: '/logo.svg',
  alt: 'Die sitelo-Wortmarke',
  caption: 'Die Wortmarke, so wie sie in der oberen Leiste erscheint.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Kopieren

Mit gehaltenem Verhältnis

ratio wickelt das Bild in ein aspectRatio(), damit die Unterschrift beim Laden des Bildes nie nach unten springt.

grid({ min: '13rem' },
  figure({ src: '/logo.svg', alt: '', ratio: '16 / 9', caption: 'ratio: 16 / 9' }),
  figure({ src: '/logo.svg', alt: '', ratio: '1 / 1', caption: 'ratio: 1 / 1' }),
)

Kopieren

Etwas anderes beschriften

Ohne src sind die Kinder der Inhalt der Abbildung.

figure({ caption: 'Tabelle 1 — Ausgabe eines Standard-Builds.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Datei' }, { key: 'size', header: 'Größe', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 kB' },
      { file: '404.html', size: '860 B' },
      { file: 'sitemap.xml', size: '155 B' },
    ],
  }),
)

Code mit Unterschrift

Beachte die Prop text an code(): Kinder werden in dieser Bibliothek überall als HTML gerendert, ein Beispiel mit Tags muss also escaped werden, sonst baut der Browser es, statt es zu zeigen.

figure({ caption: 'Eine sitelo-Seite, vollständig.' },
  code({ text: 'export default () => "<h1>Hallo</h1>"' }),
)

Alt-Text

Das Attribut alt wird immer geschrieben, leer, wenn du nichts angibst — ein Bild ganz ohne alt wird über seinen Dateinamen angesagt, was schlimmer ist als Schweigen. Eine Unterschrift ist kein Ersatz: die Unterschrift liest jede, der Alt-Text beschreibt das Bild jemandem, der es nicht sehen kann.

Wenn die Unterschrift bereits alles sagt, was das Bild sagt, ist alt: '' die richtige Antwort.

In Fließtext

Abbildungen, die aus einem Markdown-Renderer kommen, gestaltet prose() bereits. Diese Komponente ist für Abbildungen, die du selbst baust.

Props