Giter Site home page Giter Site logo

epub 电子书排版问题 about dedao-dl HOT 15 OPEN

yann0917 avatar yann0917 commented on August 16, 2024
epub 电子书排版问题

from dedao-dl.

Comments (15)

yann0917 avatar yann0917 commented on August 16, 2024

这里特别说明一下：

  1. 我开发的时候，是按某本书抓取数据写的，里面的排版格式可能没有包含那么多，就没考虑进来；
  2. 抓取到的 svg 数据，只处理了 <text> <image> 标签，也就是基本的文本和图片。像边框，代码段的灰色背景在<rect> <path> 为了请求完整的文本，请求参数width 和 height 写的很大，导致定位不到要写到什么地方，暂时没处理
  3. 字体是 FZFangSong-Z02 PingFang SC Source Code Pro ，如果本地有，生成 epub 的时候会用到，本地没有的话默认的宋体。字体的问题，后续会改进。
  4. 尾注 这个我没看到，暂时没处理。

总之关于电子书的排版细节会逐渐优化的，不可能一开始就把所有的情况考虑到。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

这里特别说明一下：

  1. 我开发的时候，是按某本书抓取数据写的，里面的排版格式可能没有包含那么多，就没考虑进来；
  2. 抓取到的 svg 数据，只处理了 <text> <image> 标签，也就是基本的文本和图片。像边框，代码段的灰色背景在<rect> <path> 为了请求完整的文本，请求参数width 和 height 写的很大，导致定位不到要写到什么地方，暂时没处理
  3. 字体是 FZFangSong-Z02 PingFang SC Source Code Pro ，如果本地有，生成 epub 的时候会用到，本地没有的话默认的宋体。字体的问题，后续会改进。
  4. 尾注 这个我没看到，暂时没处理。

总之关于电子书的排版细节会逐渐优化的，不可能一开始就把所有的情况考虑到。

是的是的作者写就很感谢了。我就是看到一些bug注明一下，作者有心情看看就好。多谢！

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

测试了一下的确本地安装了字体就没问题了，似乎不是html escape的问题。感谢作者。

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024
  1. 加粗、斜体已修复；
  2. 着重号，尾注跳转，文字放在背景图上，看到原因了，但是解析 svg 之后，因为只有文字，没法做特殊标记，暂时没想到解决办法。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

@yann0917 太感谢作者修复这些了。谢谢谢谢。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

@yann0917 看起来忧患这本书为例还是有个小bug (补注：试了一下别的电子书都有这个问题）
下面是错误代码

Error: parse utils.HtmlContent{Content:"<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n\t<style>\n\t\t@font-face { font-family: \"FZFangSong-Z02\"; src:local(\"FZFangSong-Z02\"), url(\"https://imgcdn.umiwi.com/ttf/fangzhengfangsong_gbk.ttf\"); }\n\t\t@font-face { font-family: \"FZKai-Z03\"; src:local(\"FZKai-Z03\"), url(\"https://imgcdn.umiwi.com/ttf/fangzhengkaiti_gbk.ttf\"); }\n\t\t@font-face { font-family: \"PingFang SC\"; src:local(\"PingFang SC\"); }\n\t\t@font-face { font-family: \"Source Code Pro\"; src:local(\"Source Code Pro\"), url(\"https://imgcdn.umiwi.com/ttf/0315911806889993935644188722660020367983.ttf\"); }\n\t\ttable, tr, td, th, tbody, thead, tfoot {page-break-inside: avoid !important;}\n\t\timg { page-break-inside: avoid; max-width: 100% !important;}\n\t\timg.epub-footnote { padding-right:5px;}\n\t</style>\n</head>\n<body>\n</body>\n</html>", ChapterID:"cover.xhtml", PathInEpub:"/OEBPS/Text/cover.xhtml", TocLevel:0, TocHref:"", TocText:""} failed: Filename already used: cover.xhtml

看起来是代码里创建了封面以后再把原来的文件加进去有了冲突？顺便多一句，得到还挺奇怪的，有些书我看到封面文件还是不一样的名字。真的是感谢作者抽空处理。

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024

@yann0917 看起来忧患这本书为例还是有个小bug (补注：试了一下别的电子书都有这个问题） 下面是错误代码

Error: parse utils.HtmlContent{Content:"<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n\t<style>\n\t\t@font-face { font-family: \"FZFangSong-Z02\"; src:local(\"FZFangSong-Z02\"), url(\"https://imgcdn.umiwi.com/ttf/fangzhengfangsong_gbk.ttf\"); }\n\t\t@font-face { font-family: \"FZKai-Z03\"; src:local(\"FZKai-Z03\"), url(\"https://imgcdn.umiwi.com/ttf/fangzhengkaiti_gbk.ttf\"); }\n\t\t@font-face { font-family: \"PingFang SC\"; src:local(\"PingFang SC\"); }\n\t\t@font-face { font-family: \"Source Code Pro\"; src:local(\"Source Code Pro\"), url(\"https://imgcdn.umiwi.com/ttf/0315911806889993935644188722660020367983.ttf\"); }\n\t\ttable, tr, td, th, tbody, thead, tfoot {page-break-inside: avoid !important;}\n\t\timg { page-break-inside: avoid; max-width: 100% !important;}\n\t\timg.epub-footnote { padding-right:5px;}\n\t</style>\n</head>\n<body>\n</body>\n</html>", ChapterID:"cover.xhtml", PathInEpub:"/OEBPS/Text/cover.xhtml", TocLevel:0, TocHref:"", TocText:""} failed: Filename already used: cover.xhtml

看起来是代码里创建了封面以后再把原来的文件加进去有了冲突？顺便多一句，得到还挺奇怪的，有些书我看到封面文件还是不一样的名字。真的是感谢作者抽空处理。

那倒不是这个原因，生成 epub 的这个库 github.com/bmaupin/go-epub，默认封面文件的名字是cover.xhtml , 获取的电子书封面名字刚好都是 cover.xhtml, 换一下不重复就好了。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

@yann0917 谢谢作者修了封面文件的bug！ 看到作者在修文字对齐的内容。想提个小建议就是图片也有对齐问题。举个例子
五凉史（世间之盐系列）
版权信息这一章附有大量图片，全部都应该是居中的。

说实话这个完全不影响阅读。作者每天都在修bug都不好意思提issue了。就是记录一下供参考。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

找到一个表格的例子。在此记录一下。不过处理表格本来就很麻烦，从SVG转也不知道有没有信息，加上作者用了大width/height来取完整的文本。我就假设太麻烦了所以也不麻烦作者看，就是记录一下：
成汉国史
第六章：成汉社会经济、文化与民族 表6-1 表6-2 等

作者改了图片的对齐情况。不过有些图片没有style信息，导致加了

了以后图片显示不正确。我自己加了一个判断style是否为空就解决问题了。估计作者还在开发。开发完了以后我发个小PR就好。

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024

找到一个表格的例子。在此记录一下。不过处理表格本来就很麻烦，从SVG转也不知道有没有信息，加上作者用了大width/height来取完整的文本。我就假设太麻烦了所以也不麻烦作者看，就是记录一下： 成汉国史 第六章：成汉社会经济、文化与民族 表6-1 表6-2 等

作者改了图片的对齐情况。不过有些图片没有style信息，导致加了

了以后图片显示不正确。我自己加了一个判断style是否为空就解决问题了。估计作者还在开发。开发完了以后我发个小PR就好。

表格线段在<rect> 标签里，文字在<text> 标签里，源码是这样的，怎么解析成表格也是个问题：

<rect x="7581.000000" y="637.000000" width="12498.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="637.000000" width="12498.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="638.000000" width="1.000000" height="-1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="638.000000" width="1.000000" height="-1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="683.000000" width="12498.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="683.000000" width="12498.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="684.000000" width="1.000000" height="-1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="684.000000" width="1.000000" height="-1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="637.000000" width="1.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="683.000000" width="1.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="638.000000" width="1.000000" height="45.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="7581.000000" y="638.000000" width="1.000000" height="45.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="637.000000" width="1.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="683.000000" width="1.000000" height="1.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="638.000000" width="1.000000" height="45.000000" fill="transparent" stroke="rgb(73, 73, 73)" />
<rect x="20078.000000" y="638.000000" width="1.000000" height="45.000000" fill="transparent" stroke="rgb(73, 73, 73)" />



<text x="29.000000" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3216" len="3">类</text>
<text x="45.000031" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3219" len="3" newline="true">型</text>
<text x="7589.859375" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3247" len="3">田</text>
<text x="7605.859375" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3250" len="3" newline="true">租</text>
<text x="20086.843750" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3280" len="3">户</text>
<text x="20102.843750" y="527.000000" width="16.000031" top="510.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3283" len="3" newline="true">调</text>
<text x="29.000000" y="573.000000" width="16.000031" top="556.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3327" len="3">男</text>
<text x="45.000031" y="573.000000" width="16.000031" top="556.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3330" len="3" newline="true">丁</text>
<text x="7589.859375" y="573.000000" width="16.000031" top="556.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3358" len="3">三</text>
<text x="7605.859375" y="573.000000" width="16.000031" top="556.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3361" len="3" newline="true">斛</text>
<text x="20086.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3396" len="3">绢</text>
<text x="20102.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3399" len="3">数</text>
<text x="20118.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3402" len="3">丈</text>
<text x="20134.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3405" len="3">、</text>
<text x="20150.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3408" len="3">绵</text>
<text x="20166.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3411" len="3">数</text>
<text x="20182.843750" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3414" len="3" newline="true">两</text>
<text x="29.000000" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3463" len="3">女</text>
<text x="45.000031" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3466" len="3" newline="true">丁</text>
<text x="7589.859375" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3494" len="3">一</text>
<text x="7605.859375" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3497" len="3">斛</text>
<text x="7621.859375" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3500" len="3">五</text>
<text x="7637.859375" y="619.000000" width="16.000031" top="602.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3503" len="3" newline="true">斗</text>
<text x="29.000000" y="665.000000" width="16.000031" top="648.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3548" len="3">疾</text>
<text x="45.000031" y="665.000000" width="16.000031" top="648.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3551" len="3" newline="true">病</text>
<text x="7589.859375" y="665.000000" width="16.000031" top="648.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3588" len="3">七</text>
<text x="7605.859375" y="665.000000" width="16.000031" top="648.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3591" len="3">斗</text>
<text x="7621.859375" y="665.000000" width="16.000031" top="648.515625" height="22.000000" style="font-size:16px;font-family:'PingFang SC';" offset="3594" len="3" newline="true">半</text>

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

折腾rect这个太麻烦了就是记录一下。多谢作者一路开发。到现在已经基本没问题很好用了。

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024

其实还有个办法，不解析 svg 了，直接嵌入 svg ,不过这样就得提前设置好 width,height , 按页下载而不是按章节下载了，否则还是会出现下载的内容不完整、行截断的情况。

下图，生成 epub 直接嵌入 svg 是可行的。
image

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024

其实还有个办法，不解析 svg 了，直接嵌入 svg ,不过这样就得提前设置好 width,height , 按页下载而不是按章节下载了，否则还是会出现下载的内容不完整、行截断的情况。

下图，生成 epub 直接嵌入 svg 是可行的。 image

这样出现的问题是，整个页面是一张图片，注释都弹不出来。。

from dedao-dl.

rainrdx avatar rainrdx commented on August 16, 2024

天哪多谢作者想。其实现在解析地已经基本上完美了，也很方便用。十分谢谢作者抽空了。

from dedao-dl.

yann0917 avatar yann0917 commented on August 16, 2024

尾注跳转的问题已解决

from dedao-dl.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.