更改字体时基于页面的加载 epub

Posted 2023-03-14

【中文标题】更改字体时基于页面的加载 epub

【英文标题】：page based load epub when changing font

【发布时间】：2014-04-08 06:36:31

【问题描述】：

我正在做像 iBooks 这样的电子书阅读器应用程序。我已成功读取 .epub 文件。但我的问题是：-

我必须添加字体大小增加和减少以及字体更改功能。当我增加和减少字体大小时，我必须调整页面。如何在页面中拆分 html 字符串？ .

您可以在两张图片中看到。更改字体大小后，html 字符串被分离并且格式被折叠。

提前致谢

【问题讨论】：

你是如何加载 epub 文件的？那是 UIWebView 还是别的什么？

使用 UIwebview。基本上我有电子书的 html 字符串。所以我想拆分那个html字符串

您能否澄清一下您所说的“拆分该 html 字符串”是什么意思？

@Joshua 感谢回复。我想像在 iBooks 应用程序中一样更改字体大小。

我有 .epub 电子书文件，我已经成功解析。现在我想根据字体大小和字体名称计算 UIwebview 中应该有多少字符。

【参考方案1】：

嗯，这真的是一个很难的问题......

我有一个方法可以将 HTML 页面分成两部分：第一页和其余部分。然后，您可以在“rest”上重复调用该方法以获取所有页面。

设置 $num_words = 100 从页面中取出前 $num_words 个单词 => $first_page_html; 将 $first_page_html 放入 UIWebView 并“渲染”它（参见下面的注释）。 检查 UIWebView 的高度。合身吗？如果是，则从算法中返回。 如果单词不适合 UIWebView，请执行 $num_words--; 否则，执行 $num_words++; 转到 2

这是第一个应该以某种方式工作的算法。但也存在优化机会和隐藏问题：

您可能应该执行二进制搜索而不是线性搜索。所以 $num_words 不应该是 100, 99, 98, 97, 96, ..., 62，而是 100, 80, 60, 70, 65, 64, 63, 62。问 webview 如何它比预期的更大或更小。 IE。如果 webview 的高度太大了 30%，这意味着你应该将它减少 (1-1/(1+30%))=23%，所以你应该在第一步中将字数乘以 0.77 .

当文档中有硬分页时，您的函数应该考虑到这一点。

通过调用 webView.scrollView.contentSize.height 获取 UIWebView 的高度。我认为您必须等待 UIWebView 完成渲染才能检查高度。

如果您对 HTML 的结构有更多了解，您可以使用 UIWebView 中的 -stringByEvaluatingjavascriptFromString: 方法添加单个单词并查看会发生什么。这样，webview 就不必一直重新渲染所有内容。

注意：“渲染”是指调用-loadHTMLString:baseURL:，然后等待调用-webViewDidFinishLoad: 委托方法。

如果性能是一个问题，以某种方式在 Javascript 中对该算法进行编码可能会更快（对于设备而言），但我认为这会困难得多。

【讨论】：

感谢回答。你能给我最简洁的代码吗？并且还想知道这本书是否包含 1000 页，那么我认为加载需要更多时间。

用我的算法，如果你想得到你必须先渲染所有页面的数量。 （您应该将子页面保存到一些缓存目录，因为 1000 个 UIWebView 实例可能会使应用程序崩溃。）代码将很复杂，有许多必须解决和测试的边缘和边界情况。我需要很多小时才能提供一个由 Objective-C 代码组成的体面算法。这对我来说和对你一样难，所以你必须自己做;）也许有比我的算法更好的方法来解决这个问题，但我认为一个不完美的算法比没有算法更好.

不错的算法，我也是这样做的，但我使用了段落（<p> 标签）而不是单词，这不太准确，但运行速度更快。

@sage444 你试过包含 1000 页的 epub 文件吗？

@sage444 你能给我一些想法吗？谢谢

【参考方案2】：

终于得到了答案。很简单。在 ios 7 中，您不需要为分页或任何逻辑编写 javascript。

只需设置 UIWebview 属性。这是我的代码。

self.webView.paginationMode = UIWebPaginationModeLeftToRight;
self.webView.paginationBreakingMode = UIWebPaginationBreakingModePage;
self.webView.scrollView.delegate = self;
self.webView.scrollView.pagingEnabled = YES;
self.webView.scrollView.alwaysBounceHorizontal = YES;
self.webView.scrollView.alwaysBounceVertical = NO;
self.webView.scrollView.bounces = YES;

这里是示例代码a：https://github.com/kalpesh22m/Epub-Reader-With-Pegination

【参考方案3】：

首先要增加字体大小，您需要在 em 中指定字体大小。在使用 em 之前，你需要给 body font-size:62.5% 并且对于 div 内的元素，给 font-size 像 1.2em （它将充当 12px）。因此，当您想增加任何 Div 的字体大小时，您只需将正文的字体大小增加 10%。 而且您不需要计算字符来调整页面，如果您正在制作响应式书籍，这不是一个好习惯。使用 css 的 column 属性，让 css 处理您的页面流。 请参阅以下链接了解字体大小和可流动的 html 结构

js fiddle

<a href="http://jsfiddle.net/hJ6Mj/4/">Js Fiddle</a>

另见“readium js for chrome”。这将使您了解如何在浏览器上呈现 epub 文件