epub generation: fail for CSS image path mis-detecting?

Summary

Create PDF & EPUB, EPUB is success but PDF is failed. PDF include CSS background image for ./images/*.png contain fail. (Web Hosted also success see source’s GitHub Pages)

• HonKit version: 3.6.6 at 2020/09/23

Step to reproduce

1. checkout source
2. build to PDF

Link to code example:

• source : https://github.com/tsuyoshicho/WhenScarletIceMelted
• result : https://github.com/tsuyoshicho/WhenScarletIceMelted/runs/1152526006?check_suite_focus=true#step:7:43

Expected results

Create PDF with image success.

Actual results

see result link

log attaching

• stdout log : pdf.log
• stderr log : pdf_stderr.log
• Generate CSS: pdf-1600823806151.css.txt

$ tree /f C:\Users\<userid>\AppData\Local\Temp\tmp-1952MQvyf79s5qc7
Folder PATH listing for volume Windows
Volume serial number is 000001DA 0882:F2A0
C:\USERS\<userid>\APPDATA\LOCAL\TEMP\TMP-1952MQVYF79S5QC7
│   .editorconfig
│   .gitattributes
│   .gitignore
│   .textlintrc
│   6c50c8.png
│   ebook-1600823806054.css
│   GLOSSARY.html
│   index.html
│   LICENSE.html
│   oldplugin.txt
│   package-lock.json
│   package.json
│   pdf-1600823806151.css
│   SUMMARY.html
│   website-1600823805986.css
│
├───.github
│   │   renovate.json
│   │
│   └───workflows
│           deploy.yml
│           release.yml
│           reviewdog.yml
│
├───assets
│   └───images
│       └───uml
│               .gitkeep
│
├───doc
│       .textlintrc
│       chapter1-1.adoc
│       chapter1-1.html
│
├───gitbook
│   │   ebook.css
│   │   epub.css
│   │   mobi.css
│   │   pdf.css
│   │
│   └───gitbook-plugin-highlight
│           ebook.css
│           website.css
│
├───images
│       gm.png
│       oreshalarry2.png
│       reaper.png
│       reapermini.png
│       tako.png
│       takomini.png
│
└───styles
        ebook.scss
        pdf.scss
        website.scss
        _common.scss
        _commonh.scss
        _commonv.scss
        _replay.scss
        _replayh.scss
        _replayv.scss
        _speechballoonsh.scss
        _speechballoonsv.scss

[tsuyoshicho]

research ebook-convert and epub rule

version

in Windows 10 Pro 20H1

$ ebook-convert --version
ebook-convert.exe (calibre 5.1.0)
Created by: Kovid Goyal <[e-mail]>

epub

Open Publication Structure (OPS) 2.0.1 v1.0

ebook-convert

E-book conversion — calibre 5.1.0 documentation

table

Stages of the conversion pipeline

row structure

Post structure detection, but before CSS flattening and font size conversion. Use to debug font size conversion and CSS transforms.

rel info ebook-convert(1) — calibre — Debian unstable — Debian Manpages

trial convert

1. generate epub in https://github.com/tsuyoshicho/WhenScarletIceMelted
2. epub file extract and apply patch below
3. move file (gm.png, oreshalarry2.png, reaper.png, reapermini.png, tako.png, takomini.png) from root to ./images/
4. re generate epub command above azn suggest in https://github.com/honkit/honkit/issues/130#issuecomment-702784473

This process success image and result epub contain flat html/css and move image to root.

patch in book/book_mod

diff -u book_mod\chapter1-1.html book\chapter1-1.html
--- book_mod\chapter1-1.html	Sat Oct 03 12:28:10 2020
+++ book\chapter1-1.html	Sat Oct 03 11:35:26 2020
@@ -37,7 +37,7 @@
 </div>
 <div class="sect">
 <div class="sect">
-<img src="images/tako.png" alt="知性化タコ 「メルクリウスの盗掘屋」" class="calibre14"/>
+<img src="tako.png" alt="知性化タコ 「メルクリウスの盗掘屋」" class="calibre14"/>
 </div>
 </div>
 <div class="sect">
@@ -57,7 +57,7 @@
 </div>
 <div class="sect">
 <div class="sect">
-<img src="images/reaper.png" alt="サプリメント「サンワード」のサンプルＰＣ 戦闘円盤" class="calibre14"/>
+<img src="reaper.png" alt="サプリメント「サンワード」のサンプルＰＣ 戦闘円盤" class="calibre14"/>
 </div>
 </div>
 <div class="sect">
@@ -701,7 +701,7 @@
 </div>
 <div class="sect">
 <div class="sect">
-<img src="images/oreshalarry2.png" alt="Larry氏画、加工清水三毛、2013年" class="calibre14"/>
+<img src="oreshalarry2.png" alt="Larry氏画、加工清水三毛、2013年" class="calibre14"/>
 </div>
 </div>
 <div class="sect">
diff -u book_mod\GLOSSARY.html book\GLOSSARY.html
--- book_mod\GLOSSARY.html	Sat Oct 03 12:28:29 2020
+++ book\GLOSSARY.html	Sat Oct 03 11:35:26 2020
@@ -20,11 +20,11 @@
 <hr class="pcalibre6 calibre22 pcalibre5"/>
 <p class="calibre8">CSSのcontent対策</p>
 <h1 id="gm" class="pcalibre1 calibre6 pcalibre">GM</h1>
-<p class="calibre8"><img src="images/gm.png" alt="GMアイコン" class="calibre14"/></p>
+<p class="calibre8"><img src="gm.png" alt="GMアイコン" class="calibre14"/></p>
 <h1 id="pc1-ハルノブ" class="pcalibre1 calibre6 pcalibre">PC1 ハルノブ</h1>
-<p class="calibre8"><img src="images/takomini.png" alt="ハルノブアイコン" class="calibre14"/></p>
+<p class="calibre8"><img src="takomini.png" alt="ハルノブアイコン" class="calibre14"/></p>
 <h1 id="pc2-オレーシャ" class="pcalibre1 calibre6 pcalibre">PC2 オレーシャ</h1>
-<p class="calibre8"><img src="images/reapermini.png" alt="オレーシャアイコン" class="calibre14"/></p>
+<p class="calibre8"><img src="reapermini.png" alt="オレーシャアイコン" class="calibre14"/></p>
 
         </div>
     
Only in book: gm.png
Only in book_mod: images
Common subdirectories: book_mod\META-INF and book\META-INF
Only in book: oreshalarry2.png
Only in book: reaper.png
Only in book: reapermini.png
diff -u book_mod\stylesheet.css book\stylesheet.css
--- book_mod\stylesheet.css	Sat Oct 03 12:20:54 2020
+++ book\stylesheet.css	Sat Oct 03 11:35:26 2020
@@ -400,7 +400,7 @@
     display: table
     }
 .pcalibre7:before {
-    background-image: url(./images/gm.png);
+    background-image: url(./gm.png);
     background-size: 60px 60px;
     content: "";
     display: inline-block;
@@ -408,7 +408,7 @@
     width: 60px
     }
 .pcalibre8:before {
-    background-image: url(./images/takomini.png);
+    background-image: url(./takomini.png);
     background-size: 60px 60px;
     content: "";
     display: inline-block;
@@ -416,7 +416,7 @@
     width: 60px
     }
 .pcalibre9:before {
-    background-image: url(./images/reapermini.png);
+    background-image: url(./reapermini.png);
     background-size: 60px 60px;
     content: "";
     display: inline-block;
Only in book: tako.png
Only in book: takomini.png

result

• epub do not flat rule.(but FBReaderJ need it)
• ebook-convert handle subdirectory.
• ebook-convert use flatten ablility, currently default enable?.

css background-image: url(gm.png);

html <img src="tako.png" alt="知性化タコ 「メルクリウスの盗掘屋」" class="calibre8"/>

conclusion

Perhaps honkit (old gitbook) is overworking assets for epub

Constraint

• Current ebook-convert process

attach

• book.epub.zip generate epub
• book_mod.zip modify files
• book_mod.epub.zip re-generate epub from modify files

[azu]

I’ve tested your https://github.com/tsuyoshicho/WhenScarletIceMelted. epub is flat dir.

It is an issue or limitation of epub, it is not pdf issue. (I’m not faimilar with epub spec)

Maybe, we need to create another issue about epub’s image path.