Já faz algum tempo que estou obcecado com a maneira correta de fazer isso. Segui alguns conselhos online, fiz algumas pesquisas, tive algumas conversas e finalmente encontrei a especificação W3 relevante, que combinava com o que eu queria fazer. Então aqui está:
Completo <blockquote>com link de atribuição (recomendado)
<figure>
<blockquote cite="//dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element">
<p>The blockquote element represents a section that is quoted from another source.</p>
</blockquote>
<figcaption>— <cite><a href="http://dev.w3.org/html5/spec/grouping-content.html#the-blockquote-element" title="4.5 Grouping content — HTML5">W3C HTML5 specification</a></cite></figcaption>
</figure>Para mais informações sobre o porquê e como tudo isso faz sentido, leia nossa postagem do blog aqui .
Como um bônus, aqui está o SCSS que usamos atualmente no site do Project Evolution. Esses estilos adicionam uma aspas curvas de abertura no canto superior esquerdo e fecham o último parágrafo com uma aspas curvas embutidas.
blockquote {
font: italic 1.125em Georgia, serif;
line-height: 1.75;
padding: .5em 1.5em 0;
position: relative;
&:before, p:last-child:after {
color: #ccc;
font-style: normal;
font-weight: 700;
font-size: 2.25em;
}
&:before {
content: "“";
position: absolute;
top: -0.0625em; left: 0;
}
p:last-child:after {
display: inline;
content: "”";
line-height: 0;
vertical-align: text-bottom;
margin-left: .125em;
}
& + figcaption {
margin-left: 2em;
}
}Espero que isso ajude alguém com obsessões semelhantes.