Prose
À quoi il sert
Prose met en forme un contenu éditorial rendu en Markdown, avec une largeur de lecture bornée.
Quand l’utiliser
- Afficher un article ou une page de texte rendu depuis du Markdown.
- Appliquer titres, listes, citations, code et tableaux sans classe par élément.
Quand ne pas l’utiliser
- Pour un composant d’interface : Prose ne stylise ni boutons ni champs.
- Pour une mise en page à colonnes : Prose borne la largeur, il ne place pas le contenu.
Exemples
Défaut
Titre 1
Ceci est un paragraphe avec du texte normal, unlien, du code inline.
Titre 2
Un autre paragraphe avec plus de contexte.
Titre 3
- Premier point
- Deuxième point
- Troisième point
Une citation inspirante du domaine du design.
function example() {
return 'code block';
}| Colonne 1 | Colonne 2 |
|---|---|
| Donnée A | Donnée B |
| Donnée C | Donnée D |
<Prose>
<h2>Titre de section</h2>
<p>Paragraphe avec un <a href="/">lien</a> et du <code>code inline</code>.</p>
<ul>
<li>Premier point</li>
</ul>
</Prose>Accessibilité
Clavier
- Les liens restent des éléments a natifs, atteints par Tab.
- Le composant ne pose aucun tabindex : les blocs pre larges ne reçoivent pas le focus.
Lecteur d’écran
- Titres h1 à h6, listes et tableaux restent natifs, sans rôle ARIA ajouté.
- La légende d’un tableau (caption) est lue avec le tableau : elle vient du contenu.
Garanti par le composant
- Aucun attribut ARIA et aucun JavaScript ajoutés.
- Liens soulignés, citation en italique : l’information ne repose pas sur la couleur seule.
- Largeur de texte bornée par --pp-size-measure.
À la charge de l’intégrateur
- Garder une seule h1 par page : le titre de la page en porte déjà une.
- Ajouter tabindex="0" à un bloc pre large si son contenu doit être atteint au clavier.
- Fournir une caption à chaque tableau de données.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-line--pp-color-muted--pp-color-surface--pp-font-family-mono--pp-font-line-height-heading--pp-font-size--1--pp-font-size-0--pp-font-size-1--pp-font-size-2--pp-font-size-3--pp-font-size-4--pp-font-weight-bold--pp-radius-surface--pp-size-focus-width--pp-size-measure--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-space-l--pp-space-m--pp-space-s--pp-space-xs
Preuves et décisions
- WCAG 1.3.1 Information et relations
- WCAG 1.4.8 Présentation visuelle (AAA), largeur de ligne
- Longueur de ligne de 60 à 75 caractères, convention typographique (Bringhurst)
- Tests : packages/astro/test/Prose.test.ts
- Mesure : apps/docs/e2e/measure.spec.ts