I have text written like so:
"Something something," he said. "Lorem ipsum dolor sit amet, ne natum elitr his, usu ex dictas everti, utamur reformidans ad vis. Eam dissentiet deterruisset an, vis cu nullam lobortis. Doming inimicus eu nec, laudem audire ceteros cu vis, et per eligendi splendide. Ne legere tacimates instructior qui. Te vis dicat iudico integre, ex est prima constituam consequuntur. Vix sanctus voluptaria ei, usu ornatus iracundia ne, nam nulla iudico no. Duo ei labores nusquam.
"In harum docendi fuisset vis. Meis constituam ea quo. Ei vim prima liber officiis. Ad modo tota augue est, fugit soleat blandit eos ex."
The text follows an annoying typographical rule for multi-paragraph quotes: a quote which spans a paragraph doesn't have an end quote at the end of each internal paragraph, but it has an extra one at the start of each internal paragraph. HTML5 doesn't allow <p>
elements inside <q>
elements, but this situation is worse: the second quote doesn't even include all of the paragraph, so even if it did (or if I used, say, <div class=quote>
) I can't see a way to mark this up without mis-aligned elements.
(Of course I could just embed quotation marks rather than use <q>
, but I'm looking for thoughts on the best way to do this.)
The previous answer (redefining quotes: '\201c' '\201d' '\2018' '\2019';
) works, but it overrides the user's locale and forces American style quotation marks.
Instead, this:
<style>
q.continued::after { font-size: 0; }
</style>
…
<p>
I replied, <q class="continued">Blah blah blah.</q>
</p>
<p>
<q class="continued">And not only that!</q>
</p>
<p>
<q>So there!</q>, and left the room.
</p>
Produces:
I replied, ”Blah blah blah.
”And not only that
”So there!”, and left the room.
Which should work correctly with any locale's quotation characters.
Note that display:none
would be better, but it doesn't work.
The browser (Chrome at least) notices that the closing quote is missing and switches to the alternate quote mark for the following paragraphs.