iOS中使用CSS多列的电子书（计算不同列中的文本范围）

Posted 2023-03-14

【中文标题】iOS中使用CSS多列的电子书（计算不同列中的文本范围）

【英文标题】：Ebook in iOS using CSS multi-column (calculate range of text in different column)

【发布时间】：2010-12-21 10:13:40

【问题描述】：

我在这里的第一个问题。如果我做错了什么，请纠正我。

我在这里找到了一个资源，演示如何使用 CSS 多列对 html 进行分页。 http://groups.google.com/group/leaves-developers/browse_thread/thread/27e4bf5ff3c53113/f137dc01b6d853b7

我的问题是： 如何计算不同列（页）中文本的范围/位置？

例如，在更改字体大小时， 当前页面中的文本将跳转到另一个页面。 为了解决这个问题，程序应该保存当前的文本位置， 并在重新格式化网页后移至正确的页面（列）。

对于实现书签功能也很有用。

我认为应该用javascript来完成，但我是javascript新手。

欢迎任何建议和提示。

【参考方案1】：

这是一个笼统的问题，很难回答，所以我会尝试为您指出我可能会尝试的方向。

我不知道您的页面布局的外观或功能如何，但理论上您可以做到这一点的一种方法是在更改字体大小时检查“列”的文本节点（假设此字体大小更改通过单击按钮实现）。因此，例如，假设您有一个带有 id #column_1 的 div，每当有人单击按钮 ui 元素时，您都可以评估 #column_1 的前几个字符，然后搜索您的字符串以找到该文本，并加载任何否。您定义为围绕该文本的“页面”的字符数，并调用您的渲染方法“转向”到该页面。所以你的函数流程可能看起来像这样：

zoomControl.click(click event) //do something when you click the zoom control
var text = findTextofCurrentPage() //get the first bit of text of your current 'page'
renderLargerTextSize() //re-render your 'page' w/ larger text (for user feedback purposes)
renderPageWith(text) //render/navigate to the 'new' page wherein your the text in the variable 'text' can be found

显然，这是一个超级通用的“想法”，您可以使用哪些函数/方法来实现这一点，但我认为如果您深入研究 JS 并说出类似 JQuery 之类的内容，则可以相对轻松地完成。

【讨论】：

感谢您的回复。主要问题是，由于列是动态生成的，程序不知道哪些文本属于当前列。