javascript - 寻求帮助在 html5 中指定教科书格式，专门用于平板电脑，其中包括笔记

Question

我 9 岁的儿子视力非常低，1/10。目前，他学校的支持人员为他提供了课本的 pdf 扫描件，并为他提供了良好的培训，让他可以在 PC 上访问课本。

但是，由于多种原因，我认为这不太理想:

• 大文件大小(一本地理书是 300Mb，做扫描不是技术人员)
• 文本大小只能通过缩放间接控制，我的 child 需要至少全程 40pt 文本
• 难以导航，即需要大量来回滚动只是为了读一句话让整个阅读过程有点累。
• 无法做笔记和/或填写答案区域教科书。
• 无法访问目录/索引/
• PC 问题(重量/功率/与平板电脑相比的总冷度)

所以，我认为 html5 的世界为我提供了答案。我希望迈向的过程如下:

• 我扫描教科书并通过像 ABBY 这样的 OCR 程序运行它们
  FineReader。
• 这给了我原始文本和图像

• 将原始数据转换为 html5 格式，结构类似于

  <div class="book">
      <div id="TOC"></div> (This TOC will be built dynamically)
      <div class="page" id="1"> (Important to keep the notion of pages to allow him to have the same reference as the rest of the class)
          <div class="text"></div>
          <div class="img"></div>
          <div class="answerzone"></div>
          <div class="footer"></div>
      </div>
  </div>
  

• 接下来，javascript 启动并添加以下功能

  • 大的、半透明的左箭头和右箭头总是在屏幕的底 Angular
  • 大的、半透明的页码总是很明显，例如在右上角
  • 左上角的半透明大符号，可访问以下功能
  • 访问目录
  • 增大/减小字体大小
  • 添加一个区域，他可以在其中使用手写笔从键盘或屏幕上书写文本。这个区域可以有一个图像作为背景，例如他需要在答案周围画圈。
  • 他添加的所有内容(文本/图像)都本地存储在平板电脑上

毕竟，这是问题部分。有没有人有找到解决方案的类似要求的经验？我可以做 javascript 的东西(我想我可以)直到添加文本/图像并在本地存储所有内容。有没有人指出可以满足我需要的现有 html5 解决方案？

最好的问候，

冷

附言我已经放弃了整个 epub 的东西，因为让我们面对现实吧，它只是 html，为什么不使用浏览器而不是电子书阅读器解决方案？

Answer 1

看看这篇文章:Building Books with CSS3

那是一篇很棒的文章，其中包含许多非常有用的技巧。显然，您将不得不生成大量 HTML，但使用那篇文章中展示的技术，您将不必生成几乎一样多的无用 HTML。那篇文章确切地告诉您如何处理页码和目录，并且使用 JavaScript 创建用于更改页面的左右箭头并不难(自然而然地使用 CSS 设置样式)。

至于注释，我不太清楚你是想要它用于平板电脑还是 PC。如果是用于 PC，我建议使用预构建工具，例如 Zotero .如果它适用于平板电脑，那么您可能需要见机行事，因为您可以做什么或不能做什么因平板电脑而异。