Correct HTML for multi-paragraph quotes

Question

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.)

Answer 1

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.

Answer 2

The cleanest way to do this is indeed with quotation marks; they are just as semantically appropriate as using the <q> element. From the spec:

The use of q elements to mark up quotations is entirely optional; using explicit quotation punctuation without q elements is just as correct.

Code Example:

In the following example, quotation marks are used instead of the q element:

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

Having said that, you can still do this using <div class=quote> to mark the start and end of a multi-paragraph quotation as you've suggested, coupled with the following CSS:

q {
  quotes: '\201c' '\201d' '\2018' '\2019';
}

.quote > p:not(:last-of-type) > q:last-child {
  quotes: '\201c' '' '\2018' '';
}

<div class=quote>
  <p><q>Something something,</q> he said. <q>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.</q></p>

  <p><q>In harum docendi fuisset vis. Meis constituam ea quo. Ei vim prima
     liber officiis. Ad modo tota augue est, fugit soleat blandit eos ex.</q></p>
</div>

But this requires using <div class=quote> wherever necessary in the first place. Granted, as it's just a div, it doesn't set the text containing the quotation apart from the rest of the prose (in contrast, a blockquote would be entirely inappropriate for this reason), or otherwise change the meaning of the text, but it's still not as clean as you might like. It does however work regardless of whether that second paragraph has been represented in its entirety or if there is more text following the closing quotation mark — or indeed, even if the second paragraph contains both the end of one quotation and the start of another (just move your </div> end tag to where the second quotation ends).

You'll notice in the above snippet that the <q> elements themselves are split by paragraph; this is perfectly normal since <q> is a phrasing element and therefore, as you've stated, cannot span multiple flow elements. But if you really are worried that the split <q> elements will be seen (particularly by AT) as two separate quotations altogether, you can either associate them using a class or a custom data attribute, or just go with quotation marks which are much simpler and will convey the meaning of the text just as effectively.