Blockquote (Bloc de citation)

Les blocs de citations permettent de rapporter les mots ou les phrases de quelqu’un ; les paroles ou le passage empruntés à un auteur.

Usage

Le bloc citation est un élément important qui est mis en avant dans un ensemble textuel.
Il ne peut être utilisé que pour afficher une citation.
Il peut comporter un auteur.
Il existe une version particulière quand il est inclus dans du texte, sans exergue. On parle alors d’incise.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Author (auteur).

Ce composant est pour les blocs de citation (balise <blockquote>) et n’est pas pour l’affichage d’une simple citation dans le corps d’un texte (pour ce cas on utilise la balise <q>, cf. la citation incise en bas de page). Toutefois, il embarque aussi le style pour ces citations incises, c’est pourquoi ce cas est démontré plus bas.

Du point de vue du HTML, la balise <blockquote> ne nécessite pas forcément d’autre balise pour son contenu si celui-ci n’est composé que d’un paragraphe, mais à partir du moment où la citation comporte un auteur ou des éléments particuliers de mise en forme (plusieurs paragraphes, de l’italique…), le HTML interne devient obligatoire. Par conséquent, ce composant impose l’utilisation d’un balisage du contenu. Ainsi, si ce contenu se compose d’un paragraphe unique, sans rien de plus, il devra quand même être inclus dans une balise <p>.

Bloc citation dans un article

Pas besoin de classe spécifique pour créer une citation. Tout contenu d’un article présent dans une balise <blockquote> sera considéré comme telle. Cela implique qu’il doit y avoir une classe su-article sur un parent.

Dans les rendus ci-dessous, nous avons rajouté un paragraphe au-dessus et au-dessous pour mieux illustrer la mise en situation.

Sans auteur

Sans l’auteur, celle-ci se présente simplement par le contenu dans un <p> directement enfant de <blockquote> (lui-même descendant de su-article et siapui).

<div class="su-article">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
    <blockquote class="su-margin-top-l su-margin-bottom-l">
      <p>La logique est le refuge des gens sans imagination.</p>
    </blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
</div>

Avec auteur

L’auteur s’ajoute dans une balise <footer> après la citation mais dans le <blockquote>. Ce footer doit avoir la classe su-author pour être bien stylé. Par ailleurs, si l’on donne la source de la citation, il est préférable de la mettre dans une balise <cite>.

<div class="su-article">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
    <blockquote class="su-margin-top-l su-margin-bottom-l">
      <p>La folie dans la méthode, c’est ce qu’on appelle le génie.</p>
      <footer class="su-author">— Frank Herbert, extrait de <cite>Dune</cite>.</footer>
    </blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.>
</div>

HTML dans le blockquote

Comme expliqué en introduction, il faut au minimum inclure une balise <p>, mais on peut ajouter du contenu supplémentaire…

<div class="su-article">
    <blockquote class="su-margin-top-l su-margin-bottom-l">
      <p>Je suis là depuis la nuit des temps.<br />
      Parfois je donne, parfois je prend.<br />
      <strong>A moi de décider à qui et quand</strong>.</p>
      <footer class="su-author">— Merlin, extrait de <cite>Excalibur</cite>.</footer>
    </blockquote>
</div>

<div class="su-article">
    <blockquote class="su-margin-top-l su-margin-bottom-l">
      <p>–&nbsp;Oui mais Doc, je suis de retour <em>du futur</em>…</p>
      <p>–&nbsp;Nom de Zeus&nbsp;!</p>
      <footer class="su-author">— Dialogue extrait du <cite>Retour vers le futur 2</cite>.</footer>
    </blockquote>
</div>

Bloc citation hors article

Si vous avez besoin de placer une citation en dehors d’un article, la classe su-blockquote existe pour l’afficher comme attendu. Vous aurez toutefois aussi besoin de classes de marges disponlibles dans les Helpers (classes d’aide).

<blockquote class="su-blockquote su-margin-top-l su-margin-bottom-l">
    <p>Moi j’ai appris à lire, ben je souhaite ça à personne.</p>
    <footer class="su-author">— Leodagan, extrait de <cite>Kaamelot</cite>.</footer>
</blockquote>

Citation incise

Comme dit plus haut, les citations incises ne sont pas le même composant, elles s’appuient sur la balise <q> et servent à intégrer une citation au milieu de texte standard. Le CSS associé, porté par le core (les CSS minimum), se contente de gérer les guillemets à la française (« ») à la place des navigateurs qui ne respectent pas l’ajout d’espace insécable…

<p><q>Le poête est un voleur de feu.</q> d’après Arthur Rimbaud.</p>

Toutefois, ce composant ajoute une particularité dans le cas d’une citation incise dans un article : il permet de forcer (ou non, cela peut dépendre du thème…) la graisse du texte en gras.

<main class="su-article">
    <p><q>Pour survivre à la guerre, il faut devenir la guerre.</q> d’après John Rambo.</p>
</main>

Liste des classes disponibles

su-blockquote (si besoin de surcharge)

Classes annexes

su-article (zone éditoriale d’un détail article)
su-author (dépendant du composant Author (auteur))