本帖最后由 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吧……而且应用了背景的调整（去掉页面主题倒是没问题，是透明的）。点开以后字扁了一点，不过基本没问题…… 锂：乱七八糟的……这玩意本身就不支持竖排，看起来更像是触发了换行…… 果机：竖排是竖排，但是标点符号还是横着的。 这个方案还是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的果机一个效果 果机：变得十分完美。 追加测试Kindle for Android & Kindle paperwhite：和方案2锂/方案1果机一个样。 呃……看看还有没有别的方法？
方案3：
<text y="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实际的尝试。最后主要用在了章节标题……
可能需要梯子下载快一些
| 
发表于 2019-6-21 22:11
发表于 2019-6-22 07:35
楼主
