Table des matières
La balise <blockquote> définit une citation. Des exemples en Markdown et en Html.
En Markdown
Citation courte
>une citation courte
une citation courte
Citation plus longue avec des retours à la ligne
>Une citation plus longue :
Paroles, ou phrase, passage, texte empruntés à un auteur et que l'on reproduit textuellement,
de vive voix ou par écrit, pour illustrer, éclairer ou appuyer ce que l'on veut dire.
Faire des citations ; recueil, choix, rapprochement de citations ; le goût des citations ;
une citation exacte, tronquée.
Synon. emprunt, extrait.
Je prépare longuement le discours où j'intercale à propos quelques citations latines.
Une citation plus longue :
Paroles, ou phrase, passage, texte empruntés à un auteur et que l’on reproduit textuellement, de vive voix ou par écrit, pour illustrer, éclairer ou appuyer ce que l’on veut dire.
Faire des citations ; recueil, choix, rapprochement de citations ; le goût des citations ; une citation exacte, tronquée.
Synon. emprunt, extrait.
Je prépare longuement le discours où j’intercale à propos quelques citations latines.
En HTML
Grâce au CSS, il est possible d’améliorer l’affichage de ces citations.
Il faudra alors quitter le Markdown pour retrouver le Html.
Le CSS
.quote {
position:relative;
width:90%;
padding:10px 20px;
margin:10px auto;
font:italic 16px/1.4 Georgia, serif;
color:#61581B;
background:#F2E16E;
margin-bottom:40px;
border-radius: 10px;
}
.quote:after {
content:"";
position:absolute;
top:100%;
left:25px;
border-width:30px 30px 0 0;
border-style:solid;
border-color:#F2E16E transparent;
-webkit-transform:skewX(-15deg);
-moz-transform:skewX(-15deg);-ms-transform:skewX(-15deg);
-o-transform:skewX(-15deg);
transform:skewX(-15deg);
}
.credit {
margin:1em 0 0;
font:14px/1.2 Arial, sans-serif;
}
.credit:before {
content:"— ";
}
blockquote, p {
padding:0;
margin:0;
}
Le Html
<div class="quote">
<blockquote>
<p>
Non mais t'as déjà vu ça ? <br />
En pleine paix ! <br />
Il chante et puis crac, un bourre-pif ! <br />
Il est complètement fou ce mec. <br />
Mais moi, les dingues, je les soigne. <br />
Je vais lui faire une ordonnance, et une sévère… <br />
Je vais lui montrer qui c'est Raoul. <br />
Aux quatre coins de Paris qu'on va le retrouver,
éparpillé par petits bouts, façon puzzle. <br />
Moi, quand on m'en fait trop, je correctionne plus :
je dynamite, je disperse, je ventile !
</p>
</blockquote>
</div>
<p class="credit">
Bernard <span class="auteur">Blier</span>, <strong>
Les Tontons flingueurs</strong> (1963),
écrit par Michel <span class="auteur">Audiard</span>
</p>
Résultat
Non mais t'as déjà vu ça ?
En pleine paix !
Il chante et puis crac, un bourre-pif !
Il est complètement fou ce mec.
Mais moi, les dingues, je les soigne.
Je vais lui faire une ordonnance, et une sévère…
Je vais lui montrer qui c'est Raoul.
Aux quatre coins de Paris qu'on va le retrouver, éparpillé par petits bouts, façon puzzle.
Moi, quand on m'en fait trop, je correctionne plus : je dynamite, je disperse, je ventile !
Bernard Blier, Les Tontons flingueurs (1963), écrit par Michel Audiard
Les « small caps »
J’écris les noms propres avec des petites capitales (small caps) ; pour les afficher, je crée une classe « auteur » que j’ajoute dans le CSS.
.auteur {
font-variant: small-caps;
}