I'm making a book reader web application. From the server I get a long string with all of the book text in HTML format. It looks something like this:
我正在制作一本图书阅读器网页应用程序。从服务器我得到一个长字符串，其中包含HTML格式的所有书籍文本。它看起来像这样：
<div><p>Alice was beginning....</p></div></div>to get very ... </div>
What I want is to split this text into pages. I want to get something like this:
我想要的是将这个文本分成页面。我想得到这样的东西：
<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...
A single page should fill the viewport. Users shouldn't be able to scroll the book text. Instead, they should be able to move between the pages using buttons.
单个页面应填充视口。用户不应该滚动书籍文本。相反，他们应该能够使用按钮在页面之间移动。
I need some function to measure all content, split it into pieces of same maximum height, and tag the pieces with page numbers. It must also take into account pictures and long paragraphs (which may not fit on a single page).
我需要一些功能来测量所有内容，将其分成相同最大高度的片段，并用页码标记片段。它还必须考虑图片和长段落（可能不适合单页）。
How can I accomplish all of this?
我怎样才能完成所有这些？
1 个解决方案
#1
4
To find out the dimensions of each bit of content, you'd have to let the browser actually render it and then measure it. Additionally, if you want to break in the middle of flow (e.g. in the middle of a paragraph), things get pretty difficult. (You cannot measure individual characters/words without wrapping them in elements.) You'd also have to disable zoom, etc., so that your measurements have some lasting meaning. All in all, HTML rendering engines are specifically tailored to render flow content, which is pretty much the opposite to paged content.
要找出每个内容的维度，您必须让浏览器实际渲染它然后进行测量。另外，如果你想在流的中间打破（例如在段落的中间），事情变得相当困难。 （您无法在不将元素包含在元素中的情况下测量单个字符/单词。）您还必须禁用缩放等，以便您的测量具有一定的持久意义。总而言之，HTML呈现引擎专门用于呈现流内容，这与分页内容完全相反。
However, there are some approaches to paging, you could take, neither of which actually deals with rendering the whole text and taking measurements.
但是，有一些分页方法，您可以采用，这两种方法实际上都不涉及渲染整个文本和进行测量。
Scroll Override
One approach I'd try would be to simply
我试过的一种方法就是简单
- render all text into a container,
- 将所有文本渲染到容器中，
- style the container in such a way that the scrollbar is not visible (e.g. by pushing it off the screen),
- 以这样的方式设置容器的样式，使滚动条不可见（例如，将其从屏幕上推下），
- disable manual scrolling, and
- 禁用手动滚动，和
- provide "paging" buttons that programatically scroll by exactly the height of your "page".
- 提供“分页”按钮，以编程方式精确滚动“页面”的高度。
This solution has the advantage of being simple to implement, but it's not perfect. Images can be rendered across the break and the user wouldn't be able to see them whole.
该解决方案具有易于实现的优点，但并不完美。图像可以在整个休息时间呈现，用户将无法完整地看到它们。
Columns
The only other approach I could think of at short notice is using columns. You'd have to
我能在短时间内想到的另一种方法是使用列。你必须这样做
- render all text into a container,
- 将所有文本渲染到容器中，
- style the container to be "infinitely" wide and have "infinite" number of columns, each the width of the page,
- 将容器设置为“无限”宽，并且具有“无限”列数，每个列都是页面的宽度，
- absolutely position the container in its parent,
- 绝对将容器放在其父级中，
- make your "paging" buttons move the container horizontally by the width of the page.
- 使“分页”按钮水平移动容器的页面宽度。
This solution needs modern browsers with support for columns, but using columns solves the problem of properly breaking flow content into pages. I'd recommend trying this first, if at all possible.
此解决方案需要支持列的现代浏览器，但使用列可以解决将流内容正确分解为页面的问题。如果可能的话，我建议先尝试一下。
#1
4
To find out the dimensions of each bit of content, you'd have to let the browser actually render it and then measure it. Additionally, if you want to break in the middle of flow (e.g. in the middle of a paragraph), things get pretty difficult. (You cannot measure individual characters/words without wrapping them in elements.) You'd also have to disable zoom, etc., so that your measurements have some lasting meaning. All in all, HTML rendering engines are specifically tailored to render flow content, which is pretty much the opposite to paged content.
要找出每个内容的维度，您必须让浏览器实际渲染它然后进行测量。另外，如果你想在流的中间打破（例如在段落的中间），事情变得相当困难。 （您无法在不将元素包含在元素中的情况下测量单个字符/单词。）您还必须禁用缩放等，以便您的测量具有一定的持久意义。总而言之，HTML呈现引擎专门用于呈现流内容，这与分页内容完全相反。
However, there are some approaches to paging, you could take, neither of which actually deals with rendering the whole text and taking measurements.
但是，有一些分页方法，您可以采用，这两种方法实际上都不涉及渲染整个文本和进行测量。
Scroll Override
One approach I'd try would be to simply
我试过的一种方法就是简单
- render all text into a container,
- 将所有文本渲染到容器中，
- style the container in such a way that the scrollbar is not visible (e.g. by pushing it off the screen),
- 以这样的方式设置容器的样式，使滚动条不可见（例如，将其从屏幕上推下），
- disable manual scrolling, and
- 禁用手动滚动，和
- provide "paging" buttons that programatically scroll by exactly the height of your "page".
- 提供“分页”按钮，以编程方式精确滚动“页面”的高度。
This solution has the advantage of being simple to implement, but it's not perfect. Images can be rendered across the break and the user wouldn't be able to see them whole.
该解决方案具有易于实现的优点，但并不完美。图像可以在整个休息时间呈现，用户将无法完整地看到它们。
Columns
The only other approach I could think of at short notice is using columns. You'd have to
我能在短时间内想到的另一种方法是使用列。你必须这样做
- render all text into a container,
- 将所有文本渲染到容器中，
- style the container to be "infinitely" wide and have "infinite" number of columns, each the width of the page,
- 将容器设置为“无限”宽，并且具有“无限”列数，每个列都是页面的宽度，
- absolutely position the container in its parent,
- 绝对将容器放在其父级中，
- make your "paging" buttons move the container horizontally by the width of the page.
- 使“分页”按钮水平移动容器的页面宽度。
This solution needs modern browsers with support for columns, but using columns solves the problem of properly breaking flow content into pages. I'd recommend trying this first, if at all possible.
此解决方案需要支持列的现代浏览器，但使用列可以解决将流内容正确分解为页面的问题。如果可能的话，我建议先尝试一下。