Question

我试图将文本从印刷书籍转换为HTML5，但与此同时，我试图保持其主题以及页面/段落/行的布局结构完全不变。例如，印刷书籍的每一页都被划分为<div>部分，例如。 <div class=page id=55>，以便它准确地模拟/表示印刷书籍的页面单位，并且还便于参考。我不在乎文本将如何在浏览器中呈现，这是我以后可以考虑的问题。我只希望HTML和浏览器“知道”印刷书的原始分页和布局。

问题在于，在印刷的书中，某些段落甚至是方框，表格等会延伸到下一页。如果我将其翻译为HTML，我会这样做：

<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...

这在HTML中是非法的，因为我们有一个<p>标记中断了</div>标记，然后是一个以纯文本开头的新div元素，该元素由{{1 }}标签。

HTML希望我用</p>结束断句的第一部分，并在div之后继续使用新的</p>标记，但是我不这样做是因为它没有对应于原书的分页，导致一半的段落被理解为2个适当的段落。

那么，如何在保持理论页面/段落/断句/页面中断结构和信息的同时使用法律HTML，或者至少使浏览者“知道”原始分页？是否有更合适的标签或方法来模拟分页符，同时保留页码ID？

也许类似

<p>

Answer 1

如何将每个页面的开头都包含一个标记来指定页码，而不是将每个页面封装在div中。 aside标记似乎适用于此。

<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>

如果需要继续一段，则必须分成多个元素，但是也许可以指定一个段落何时是上一个段落的延续。例如，使用如上所述的continued类。

如果您真的不想破坏p标记，则可以在其中放置span，仅出于语义原因。像这样的东西

<p>...and so the bold knight 
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>

但是这种语义比以前的解决方案意义更小。

Answer 2

尝试将display: inline;添加到类page的CSS样式或每个页面style的{{1}}属性中。

如何避免用HTML破坏主题部分（例如div）？

2 个答案: