记一次SVG in EPUB踩坑
本帖最后由 Aeroblast 于 2019-6-21 22:16 编辑很多轻小说会在图片上放字，还有用一些特别的章节封面。如果单拿出来写在外面感觉没有在插图上那么好，做个特效还容易太浅看不到，但是直接改图如果再修改还得开PS再导出……这时候就是SVG的出场啦~（设想事实上，我在几年前做书的时候用过一次，而当时的目的是节省空间——那本书的每章标题是写在一页胶片一样的背景上，用SVG引用这个图片做背景在中间写一行字就行了。这个效果和做个背景引用图片一样，不过定位更准一些。这一次尝试，打算在SVG里先覆盖掉原来的文字再写上翻译的文字。覆盖其实没毛病，但是文字有一个问题就是竖排……测试环境：MSEdge（下称Edge）， AppleBooks（下称果机），Lithium（下称：锂）。
方案1：最近梯子很慢，所以先用的百度……倒腾了一下，首先第一个方案出炉……
<foreignObject width="120" height="1024" y="252." x="1155"> <body xmlns="http://www.w3.org/1999/xhtml"> <p style="font-size:55px;margin:0;writing-mode:vertical-rl">「<span style="color:#27ada8;">实</span><span style="color:#e4536c">际</span>上，<span style="color:#e4536c">我</span>也<span style="color:#27ada8;">对</span><span style="color:#e4536c">你</span>——」</p> </body> </foreignObject>
拿Chrome打开看上去很完美。这个相当于在SVG里嵌入了一个HTML。Sigil会报错不过没问题，强行保存不修复……Edge：字号变大了，可能因为是HTML吧……而且应用了背景的调整（去掉页面主题倒是没问题，是透明的）。点开以后字扁了一点，不过基本没问题……http://imglf3.nosdn.127.net/img/bHlLeVpPL0RHYldtL1duMlF0SEhwM281KzVtRVRvb3dUZC9LMFJoN0xsaUh0Qjh1R1JqWVJ3PT0.png?=imageView&thumbnail=500x0&quality=96&stripmeta=0&type=jpg%7Cwatermark&type=2
锂：乱七八糟的……这玩意本身就不支持竖排，看起来更像是触发了换行……果机：竖排是竖排，但是标点符号还是横着的。这个方案还是NG吧。Edge常年开主题，Sigil保存还会报错。
方案2：还是求助了谷歌，找到了一个看上去还行的<g writing-mode="tb-rl"><text y="252." x="1155" font-size="55" fill="#000000" letter-spacing="-7">「<tspan fill="#27ada8">实</tspan><tspan fill="#e4536c">际</tspan>上，<tspan fill="#e4536c">我</tspan>也<tspan fill="#27ada8">对</tspan><tspan fill="#e4536c">你</tspan><tspan letter-spacing="-5">——」</tspan></text></g>拿Chrome打开看上去很完美。Edge：字扁了一点，不过这次开着主题也没问题了锂：和方案1的果机一个效果http://imglf5.nosdn.127.net/img/bHlLeVpPL0RHYldtL1duMlF0SEhwK2phOFhhUnhvVW9ENjV0S2JjVEQvWTQ1ZW56Rk1UZE53PT0.jpeg?=imageView&thumbnail=500x0&quality=96&stripmeta=0&type=jpg%7Cwatermark&type=2
果机：变得十分完美。追加测试Kindle for Android & Kindle paperwhite：和方案2锂/方案1果机一个样。呃……看看还有没有别的方法？
方案3：
<texty="252" x="1155" font-size="55" fill="#000000"letter-spacing="-7"><tspan x="1163" dy="-27" rotate="90">「</tspan><tspan x="1155" dy="110" fill="#27ada8">实</tspan><tspan x="1155" dy="55" fill="#e4536c">际</tspan><tspan x="1155" dy="55">上</tspan><tspan x="1180" dy="35">，</tspan><tspan x="1155" dy="65" fill="#e4536c">我</tspan><tspan x="1155" dy="55">也</tspan><tspan x="1155" dy="55" fill="#27ada8">对</tspan><tspan x="1155" dy="55" fill="#e4536c">你</tspan><tspan x="1163" dy="30" rotate="90" >—</tspan><tspan x="1163" dy="60" rotate="90">—</tspan><tspan x="1163" dy="55" rotate="90">」</tspan></text>
这个太暴力了，上面任何一个平台完美显示，但是……这个也太麻烦了吧！？和当初想的随手改改完全不一样啊……
以下是结论：竖排省点力气吧，反正做半天一眼就扫过去了
横排倒是没问题，可以用在很多地方……基本上支持SVG的阅读器都没问题……虽然任何排版都可以用字调位置搞出来……我还没找到什么好使的工具，只能手写……有没有推荐呢……
另外，滤镜特效只有果机能用，而且点开放大（双击）也没了……所以还是别用滤镜了……Edge对SVG图片的点开放大是按照页面上的显示大小，而同样样式的普通图片则是有多大是多大，所以……跨页的宽图也别用了
最后放个仍然没校完的书，有兴趣可以看看SVG实际的尝试。最后主要用在了章节标题……
可能需要梯子下载快一些
好棒的教程，虽然看不懂但是大佬码子和分享经验辛苦啦~~ 恩...不是碼農看不懂 本帖最后由 taroxd 于 2019-6-22 07:38 编辑
既然都硬编码位置了，调一下破折号字距吧？破折号中间不应断开
所以为什么不直接修在图里面，一定要 svg
taroxd 发表于 2019-6-22 07:35
既然都硬编码位置了，调一下破折号字距吧？破折号中间不应断开
所以为什么不直接修在图里面，一定要 sv ...
设想是改起来方便…因为有一页几乎全是字…而事实上必要性不大只要一次翻对就行了
如果章节标题的样式相同，定位准省空间是真的然而这本不同
瞎折腾✅
另外测试的时候明确了果机一个症状，反复导入同一本书（先删除原书），新加的xhtml不会显示，而原有xhtml的更改会正常反映…不知道你有没有遇到过，上次遇到重下了app才解决 本帖最后由 taroxd 于 2019-6-22 08:29 编辑
Aeroblast 发表于 2019-6-22 08:10
设想是改起来方便…因为有一页几乎全是字…而事实上必要性不大只要一次翻对就行了
如果章节标题的 ...
1. PS 修改也不麻烦，只要留好 psd。另外如果只是加字的话，可以使用 imagemagick 加脚本，同样修改很方便。
2. 遇见过不同的 bug，如图。不知道和你说的是不是一回事情。（epub 文件没有问题，一定是 App 的原因）
图中的 bug 我在不同的 epub 文件都遇到过，包括我自己做的天使。通常删了文件之后睡一觉就能解决。
https://i.loli.net/2019/06/22/5d0d749f6b98e88792.png
taroxd 发表于 2019-6-22 08:22
1. PS 修改也不麻烦，只要留好 psd。另外如果只是加字的话，可以使用 imagemagick 加脚本，同样修改很方便 ...
1.维护额外的资源和再导入就是麻烦的点……如果可以我希望最终只留一个文件存档。
甚至可以不用别的，用SVG to 位图就行，可是这样把源文件放在外面还是没什么意义……
2.这个我倒没见过，一直都是一声不响……系统一直是正式版最新
还有一次遇到封面不显示的问题，随便改了点别的再导入就好了，后来没再遇到过……
隐藏bug可真多…… 虽然支持svg是epub3的标准之一，不过现在好多阅读器都不支持。如果要让更多阅读器支持楼主的设想结果，是不是可以考虑文本放前面，图片作为背景图片显示。 SuperParadox 发表于 2019-6-22 15:09
虽然支持svg是epub3的标准之一，不过现在好多阅读器都不支持。如果要让更多阅读器支持楼主的设想结果，是不 ...
为什么要兼容那些屑
换个思路，兼容全平台。测试平台有安卓有苹果有PC，连Kindle都带上了。
我没Kobo，但是Kobo APP可以显示，不过里面带链接的链接没法生效
还有啥缺的没？ Aeroblast 发表于 2019-6-22 15:18
为什么要兼容那些屑
换个思路，兼容全平台。测试平台有安卓有苹果有PC，连Kindle都带上了。
我没K ...
没有没有。我一看帖子就带入自己的想法，还以为楼主是要兼容更多的阅读器。看了楼主做出的书就明白不是我想的那样。 跪拜AEdalao
找人嵌字更快 感觉可以用在目录上（如果可以加超链接的话），其他没有交互性的图嵌字就是了，一本轻小说也没几张图。。。 本帖最后由 鸡蛋灌饼 于 2019-6-23 16:10 编辑
讲真，用SVG搞这个接近脱裤子放屁。epub本身就是html堆出来的，直接上HTML不就完事了…… @forever1346 超链接是可以的，至少上面三个阅读器可以，xlink:href
@鸡蛋灌饼 HTML的定位和字号感觉坑更多，如果你有闲心可以试试，我就不搞了 本帖最后由 鸡蛋灌饼 于 2019-6-23 17:34 编辑
Aeroblast 发表于 2019-6-23 16:29
@forever1346 超链接是可以的，至少上面三个阅读器可以，xlink:href
@鸡蛋灌饼 HTML的定位和字号感觉坑更 ...
我比你懒多了，直接txt一丢就完事。
反正绝大多数我都不会去读第二遍。
至于能不能做那是肯定可以做的，不行的话直接从danbooru的标注功能那里扒拉代码就是。
鸡蛋灌饼 发表于 2019-6-23 17:33
我比你懒多了，直接txt一丢就完事。
反正绝大多数我都不会去读第二遍。
没做过可不能乱说……
虽然不知道那个什么dan是啥，但是谁能保证在不同屏幕大小、不同渲染环境下能显示效果一样呢……
页:
[1]