javascript - HTML 中的复杂引号

Question

我正在尝试以老式的方式格式化引号。 — 有没有办法从这个输入开始:

<p>He argued that <q>the King by his proclamation or other ways cannot change any part of the common law, or statute law, or the customs of the realm</q> and concluded that…</p>

到此输出(显示在浏览器上):

He argued that “the King by his procla-
“ mation or other ways cannot change any
“ part of the common law, or statute law,
“ or the customs of the realm” and con-
cluded that…

在上面的示例中，连字符、对齐 和行长度 是任意设置的，仅供说明之用。 它们没有任何关系。

我希望，当 <q> 中出现换行符时, 每个后续行(在 <q> 中)，在显示时，前面都有一个引号(以便读者在视觉上将引用隔离开来)。这是一种格式化间接引语的老式方法。

到目前为止我能想出的最好办法是使用 <blockquote> 的一个不令人满意的伪解决方法结合 text-shadow在 CSS 中:

* {font-family: monospace; line-height: 1.4em; width: 25em; margin: 0;}

blockquote { position: relative; padding-left: 1.2em; text-indent: -1.2em; overflow-y: hidden;}

blockquote::before {content:"“"; position: absolute; top: 1.4em; left: 1.2em; text-shadow: 0 1.4em 0 #000, 0 2.8em 0 #000, 0 4.2em 0 #000;}

<p>He argued that <blockquote>“the King by his proclamation or other ways cannot change any part of the common law, or statute law, or the customs of the realm”</blockquote> and concluded that…</p>

(这可能有点像我想要的(有点)，但考虑到 <blockquote> 的 block 性质最终不起作用；此外，当设置 inline 时，将引号设置在左侧的预期效果是丢了。)

编辑:确认答案。

显然，我们要走 JS 路线。我考虑过:

• 查找浏览器计算 换行符，并将每个换行符替换为 "<br>&ldquo;&nbsp;" (最终导致合理的文本出现多个问题——因此不理想)；
• @A-Haworth 建议“[一种] 使用虚拟元素查找换行符的方法，逐渐添加 [ing] 文本并在文本变高时点 [ting]。”

但我就是不知道如何做这些事情。另外，一定有我没有想到的解决办法。

有什么想法吗？

上次编辑(2022 年 2 月 16 日)

没有人，真的吗？

Answer 1

这可能无法以简单的方式完成。我试着写了一个可能对你有帮助的小函数。方案有待敲定，但可以走基本思路。如果您需要动态解决方案，请使用调整大小观察器，如示例中所示。

function quote(el, leftPad = 16) {
  const txt = el.textContent.trim().split(" ");
  const ctx = document.createElement("canvas").getContext("2d");
  const styleList = getComputedStyle(el);
  ctx.font = `${styleList.fontWeight} ${styleList.fontSize} "${styleList.fontFamily}"`;
  const maxWidth = el.clientWidth;
  let paragraph = [];
  let line = "";
  let lineWidth = 0;
  let blockquote = false;
  const symbolMap = new Map();
  let firstLineBreak = false;
  let quoteRowCount = 0;

  const getWordLength = (word) => {
    let wordWidth = 0;
    for (let i = 0; i < word.length; i++) {
      if (!symbolMap.has(word[i])) {
        symbolMap.set(word[i], ctx.measureText(word[i]).width);
      }
      wordWidth += symbolMap.get(word[i]);
    }
    return wordWidth;
  };

  for (let i = 0; i < txt.length; i++) {
    const word = txt[i] + " ";
    const width = getWordLength(word);
    lineWidth += width;
    if (txt[i].search('"') >= 0) blockquote = !blockquote;
    if (lineWidth > maxWidth) {
      paragraph.push(line);
      if (!firstLineBreak && blockquote) {
        line = '<br><span class="newline"></span>';
        firstLineBreak = true;
        quoteRowCount++;
      } else {
        if (blockquote) quoteRowCount++;
        line = "";
      }
      lineWidth = leftPad + width;
    }
    line += word;
  }
  if (line.trim() !== "") paragraph.push(line);
  el.innerHTML = paragraph.join("<wbr>");

  const newLineElement = el.querySelector(".newline");
  if (newLineElement) newLineElement.style.height = `${quoteRowCount}em`;
}

const el = document.querySelector("p");
quote(el);
// or if you need ResizeObserver =>
//new ResizeObserver(() => quote(el)).observe(el);

p {
  width: 220px;
  font-size: 16px;
  font-family: Arial;
  padding: 0;
  box-sizing: content-box;
}

.newline {
  display: block;
  width: 1em;
  padding-right: 1em;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
  word-break: break-word;
}

.newline:before {
  content: '""""""""""""""""""""""""';
}

<p>
  He argued that "the King by his proclamation or other ways cannot change any part of the common law, or statute law, or the customs of the realm" and concluded that…
</p>