Figure

Une <figure> rattache la légende à ce qu’elle décrit, ce qu’un paragraphe sous une image ne fait pas. Passez src pour le cas courant, ou des enfants pour tout le reste qui mérite une légende.

Figure de base

figure({
  src: '/logo.svg',
  alt: 'Le logotype sitelo',
  caption: 'Le logotype, tel qu’il apparaît dans la barre du haut.',
  style: '--su-figure-bg: var(--su-surface-2)',
})

Copier

Avec un rapport réservé

ratio enveloppe l’image dans un aspectRatio(), pour que la légende ne saute jamais vers le bas quand l’image charge.

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' }),
)

Copier

Légender autre chose

Sans src, les enfants sont le contenu de la figure.

figure({ caption: 'Tableau 1 — sortie d’un build par défaut.' },
  table({
    dense: true,
    columns: [{ key: 'file', header: 'Fichier' }, { key: 'size', header: 'Taille', align: 'end' }],
    rows: [
      { file: 'index.html', size: '4,1 ko' },
      { file: '404.html', size: '860 o' },
      { file: 'sitemap.xml', size: '155 o' },
    ],
  }),
)

Du code avec une légende

Notez la prop text de code() : partout dans cette bibliothèque les enfants sont rendus comme du HTML, donc un extrait contenant des balises doit être échappé, sinon le navigateur le construit au lieu de le montrer.

figure({ caption: 'Une page sitelo dans son intégralité.' },
  code({ text: 'export default () => "<h1>Bonjour</h1>"' }),
)

Texte alternatif

L’attribut alt est toujours écrit, vide si vous ne donnez rien — une image sans alt du tout est annoncée par son nom de fichier, ce qui est pire que le silence. Une légende ne remplace pas l’alt : la légende est lue par tout le monde, l’alt décrit l’image à qui ne peut pas la voir.

Quand la légende dit déjà tout ce que dit l’image, alt: '' est la bonne réponse.

Dans de la prose

Les figures sorties d’un rendu Markdown sont déjà stylées par prose(). Ce composant est pour les figures que vous construisez vous-même.

Props