Une pullquote c'est quoi

Pour commencer, il faut définir son besoin. Les pullquotes, on les trouve en général dans les magazines papier, très peu sur Internet. Ce sont ces petits blocs de texte, en plein milieu, écrits gros, qui reprennent des extraits importants de l'article. Moi je les trouve super pratique. Lorsque je survole un article, je ne lis que ça. Au pire, ça permet d'avoir une vague idée du contenu, au mieux elles te donnent envie de le lire. Tu vois, c'est un peu comme une bande annonce, t'as un petit aperçu du tout et si ça t'as convaincu, tu vas essayer de retrouver les morceaux au milieu de toute l'oeuvre. [1] Non ? Il n'y a que moi qui fait ça au ciné ?

Donc, ce qu'il faut noter c'est qu'on veut afficher des citations de l'article, en gros, un peu n'importe où. On va donc aborder deux choses : d'un coté la sémantique et de l'autre la mise en forme.

La sémantique

À l'heure du Web sémantique et du data mining, il devient important de choisir ses balises judicieusement. On ne peut plus utiliser des div à tout bout de champs pour représenter des blocs et des span pour le reste. Une pullquote, comme son nom l'indique, c'est une citation, et on va donc utiliser les balises à notre disposition : blockquote et q.

Quelle est la différence me direz-vous. Et bien si l'on s'en tient à la norme du W3C, la balise q est une balise inline qui doit être utilisée pour les courtes citations. À l'inverse, blockquote est une balise de type block qui doit être utilisée pour les citations plus longues.

La longueur d'une citation étant assez subjective, on va se servir de cette différence principalement pour la mise en page. Ainsi on différenciera les pullquotes inter-paragraphes, et les pullquotes intra-paragraphe. Maintenant, passons au design.

Le CSS

Pour commencer, on va créer une classe qui sera commune quelque soit la balise que l'on utilise. Pour faire original, on va simplement l'appeler pullquote. Comme je le disais, une pullquote doit être visible, elle doit ressortir, on va donc commencer par augmenter la taille et la graisse de la police. On utilise aussi une couleur différente (mais pas trop) de la couleur de base, ce qui nous donne quelque chose comme ça :

.pullquote {
    font-size: 125%;
    font-weight: bold;
    color: $monokai-yellow;
}

Dans mon cas, j'utilise SASS, d'où l'utilisation d'une variable pour la couleur, à vous de choisir la votre. Voilà pour le cas général, maintenant on va s'amuser un peu avec le type de balise utilisé.

Comme je vous le disais, on va utiliser la balise blockquote pour réaliser des pullquotes entre deux paragraphes. Dans l'idée une pullquote est très concentrée, elle ne s'étend pas sur tout une ligne, pour ma part j'ai choisi de n'utiliser que trois quarts de la largeur, et de la positionner au centre. La balise blockquote génère généralement une ligne verticale sur la gauche, ici je ne la veux pas, donc on enlève toutes les bordures. Ce qui nous donne :

blockquote.pullquote {
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
    border: none;
}

Rien de très sorcier pour l'instant. On va maintenant s'attaquer à la balise q. Celle-ci pourra être utiliser directement à l'intérieur d'un paragraphe. Dans un magazine les pullquotes sont placées un peu n'importe où et ça ne gène généralement pas la lecture. En revanche sur un site il est important de conserver une certaine continuitée. J'ai donc décidé de la placer à droite, de cette façon le texte est toujours bien aligné à gauche (le point de départ de la lecture). Encore une fois, il faut que ça reste compact et on veut continuer à avoir du texte lisible à côté, on fixe donc la largeur à 35% de la ligne. Pour qu'on puisse la placer à droite et que le texte se mette en forme en fonction, il faut transformer la balise en inline-block et utiliser la propriété float. Enfin on aligne le texte à droite.

q.pullquote {
    float: right;
    max-width: 35%;
    text-align: right;
    display: inline-block;
}

Voilà une bonne base mais avec ça, on va avoir des problèmes de marges. La pullquote ne semblera pas centrée verticalement entre deux paragraphes et pire, le texte des paragraphes pourrait venir se coller aux pullquotes de droite... On va donc rajouter quelques marges pour éviter ces problèmes :

.pullquote {
    font-size: 125%;
    font-weight: bold;
    color: $monokai-yellow;
    margin-bottom: 1.25rem;
}
q.pullquote {
    float: right;
    max-width: 35%;
    text-align: right;
    display: inline-block;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

Voilà pour des pullquotes bien placées et qui ressortent déjà pas mal. Mais on va faire encore un peu mieux.

Le filigranne

Pour bien faire comprendre qu'il s'agit d'une citation, rien de mieux que de rajouter des guillemets, mais pas n'importe comment. Pour commencer, il faut choisir des guillements esthétiques, ce qui n'est pas le cas pour la plupart des polices. Dans mon cas, j'ai utilisé la police d'icones Foundation Icon Fonts 3 qui fourni une icone représentant des guillemets ouvrants et fermants. Libre à vous de choisir autre chose. On commence donc simplement :

.pullquote:before {
    content:"\f1a3"; /* Quote character of Foundation Icon Fonts 3 */
    font-family: "foundation-icons";
    color: $monokai-light;
}

Ici, j'utilises une couleur proche de la couleur d'arrière plan, juste un peu plus claire. Bon c'est bien, mais elle ressort pas beacoup notre icone, on va donc augmenter sa taille. Le problème, c'est qu'en augmentant la taille, on augmente également l'interligne, et du coup notre première ligne se retrouvera séparée du reste de la citation. Pour corriger ça, on utilise la balise line-height pour forcer l'interligne :

    font-size: 500%;
    font-weight: normal; /* On augmente la taille, pas besoin en plus d'être en gras */
    line-height: 1rem;

Là, c'est plus visible ! Mais j'aimerais que l'icone apparaisse en arrière-plan de ma citation. C'est là que ça commence à se corser, il va falloir jouer avec les z-index. Or, cette propriété ne s'utilise que sur des éléments qui sont positionés , avec relative, absolute ou fixed. Dans notre cas, on ne veut pas particulièrement déplacer notre élément, on va donc ce contenter d'un relative qui ne fera rien de particulier. On va ensuite placer le texte au-dessus de l'icone :

.pullquote {
    ...
    position: relative;
    z-index: 0;
}
.pullquote:before {
    ...
    display: block;
    position: relative;
    z-index: -1;
}

Et voilà, le tour est joué ! On termine en corrigeant un peu la position de l'icone, et en l'alignant à gauche pour corriger l'alignement de la citation.

Le résultat

Voilà le CSS qui regroupe tout. Pour des exemples d'utilisation, le code de l'article Programming Sucks en est plein ! Je vous invites donc à le consulter.

/* pull-quote */
.pullquote {
    font-size: 125%;
    font-weight: bold;
    color: $monokai-yellow;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 0;
}
.pullquote:before {
    content:"\f1a3";
    font-family: "foundation-icons";
    color: $monokai-light;
    font-size: 500%;
    font-weight: normal;
    line-height: 1rem;
    text-align: left;
    display: block;
    position: relative;
    top: 1rem;
    z-index: -1;
}
blockquote.pullquote {
    max-width: 75%;
    margin-right: auto;
    margin-left: auto;
    border: none;
}
q.pullquote {
    float: right;
    max-width: 35%;
    text-align: right;
    display: inline-block;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

J'espère que cet article t'aura aidé. N'hésite pas à faire des remarques ou à proposer des améliorations, là juste en-dessous, dans les commentaires.