更正 HTML 多段引号

Question

我的文字是这样写的：

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

文本遵循多段引文的恼人排版规则：跨越一个段落的引文在每个内部段落的末尾没有结束引号，但在每个内部段落的开头都有一个额外的引号内部段落。 HTML5 不允许 <p> 元素包含在 <q> 元素中，但这种情况更糟：第二个引号甚至没有包含整个段落，所以即使它包含（或者如果我用过，比方说，<div class=quote>) 我看不到在没有未对齐元素的情况下标记它的方法。

（当然，我可以只嵌入引号而不是使用 <q>，但我正在寻找执行此操作的最佳方法。）

Answer 1

最干净的方法确实是用引号；它们在语义上与使用 <q> 元素一样合适。来自 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>

话虽如此，您可以仍然按照您的建议使用<div class=quote>来标记多段引文的开始和结束，再加上以下 CSS:

q {
  quotes: '1c' '1d' '18' '19';
}

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

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

但这首先需要在必要时使用 <div class=quote>。当然，因为它只是一个 div，它不会将包含引文的文本与散文的其余部分区分开来（相比之下，块引号因此完全不合适），或者以其他方式改变的含义文本，但它仍然没有您想要的那么干净。然而，无论第二段是否完整呈现，或者是否在结束引号后有更多文本，或者事实上，即使第二段包含一个引文的结尾和另一个引文的开头（只是将 </div> 结束标记移动到第二个引号结束的位置）。

您会注意到在上面的代码片段中 <q> 元素本身是按段落拆分的；这是 perfectly normal，因为 <q> 是一个措辞元素，因此，正如您所说，不能跨越多个流程元素。但是，如果您真的担心拆分的 <q> 元素会被（尤其是 AT）视为两个单独的引号，您可以使用 class 或自定义数据属性将它们关联起来，或者直接去带有引号，引号更简单，也能有效地传达文本的意思。

Answer 2

之前的答案（重新定义 quotes: '1c' '1d' '18' '19';）有效，但它覆盖了用户的语言环境并强制使用美式引号。

相反，这个：

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

生产：

I replied, ”Blah blah blah.

”And not only that

”So there!”, and left the room.

对于任何区域设置的引号字符，它应该可以正常工作。

请注意 display:none 会更好，但它不起作用。浏览器（至少 Chrome）注意到缺少结束引号并切换到以下段落的备用引号。

更正 HTML 多段引号

Correct HTML for multi-paragraph quotes

html

semantic-markup