Images in Sigil (ePub)

[bentleymaniac]

Thanks. I haven't yet worried about cleaning up and compressing the images, as that's an easy step that I can leave till last. Unfortunately, the images were originally in a colour PDF scan from archive.org (OpenLibrary section) so all I've done to them so far is run them through pixlr to get rid of the yellow background.

I'm not sure about the copyright on books from archive.org, but as it's only for personal use, I'm not too worried. There are a few public domain books I intend to work on, but I decided to learn on this book, as it has good examples of different layout problems I'll run into later on.

As for tables, sidebars, and boxes, doesn't epub3 have the ability to render them from a few lines of code, rather than adding them in as pictures?


and my main hate: Why does Calibre ALWAYS make the css so messy?

[bentleymaniac]

yeah, I know this post is but why does EVERY forum have to create their own different commands for markup/formatting (i.e. bold, italic, code, etc)?
They should just stick to html or inline css. It would make <i>so</i> (sorry, [ITALIC]so[/ITALIC] - whoops, still wrong so) much more sense.

[Tex2002ans]

Originally Posted by bentleymaniac

Thanks. I haven't yet worried about cleaning up and compressing the images, as that's an easy step that I can leave till last. Unfortunately, the images were originally in a colour PDF scan from archive.org (OpenLibrary section) so all I've done to them so far is run them through pixlr to get rid of the yellow background.

Hmm ok, well then in the future perhaps you want to link to Archive.org instead of attaching. I know the MobileRead mods are always sticklers for copyrighted books (it is in the MobileRead Rules if you haven't read them yet):

https://www.mobileread.com/forums/faq...ing_guidelines

Then the Archive.org link might give more detailed info on that specific copy of the book.

Originally Posted by bentleymaniac

As for tables, sidebars, and boxes, doesn't epub3 have the ability to render them from a few lines of code, rather than adding them in as pictures?

Well, I am in the camp of always digitizing Tables to HTML instead of plopping them in books as Images (it can be read using Text-to-Speech, it is more accessible, can be resized according to user preferences, [...]). I have written extensively on the topic in multiple occasions.

Here was the latest topic I remember specifically on HTML Tables (also, I went into some JPG/PNG examples as well.... I absolutely hate JPG in all of my use-cases. ):

https://www.mobileread.com/forums/sho...d.php?t=223062

I also wrote extensively about digitizing books back here (Post #8 might be most relevant, although I think the entire thread is a good read):

https://www.mobileread.com/forums/sho...d.php?t=234146

and here (this discussed SVG Tables alongside all the other Table discussion):

https://www.mobileread.com/forums/sho...d.php?t=240980

Side Bars... I don't deal with those too often, although way back in 2013 I handled them along them with a "grey box" along these lines:

https://www.mobileread.com/forums/sho...25&postcount=9

Having little floating boxes might work ok on a larger device (tablet or a sheet of paper), but on a smaller device like a cellphone, there is just not enough room for floats.

Originally Posted by bentleymaniac

and my main hate: Why does Calibre ALWAYS make the css so messy?

It tries to do its best with what it gets. Garbage In, Garbage Out.

I typically strip everything down and use tools to start from the bare bones formatting (Text + Italics + Bold), and work my way up from there (adding in blockquotes, fixing footnote, [...]). Toxaris's "ePUB Tools" are a fantastic tool for doing that:

https://www.mobileread.com/forums/sho...d.php?t=213372

Originally Posted by bentleymaniac

yeah, I know this post is but why does EVERY forum have to create their own different commands for markup/formatting (i.e. bold, italic, code, etc)?
They should just stick to html or inline css. It would make <i>so</i> (sorry, [ITALIC]so[/ITALIC] - whoops, still wrong so) much more sense.

Seems like pretty standard BBCode to me. What forum software are you used to?

If you push the buttons a few times, I believe it is pretty easy to figure out different forum markup.

[bentleymaniac]

Seems like pretty standard BBCode to me. What forum software are you used to?

If you push the buttons a few times, I believe it is pretty easy to figure out different forum markup.

Sorry, I'm referring to the differences between the Steam forums, here, Quora, and Yahoo, mainly. There isn't a great deal of difference, but just enough to be annoying sometimes.

[bentleymaniac]

BTW, is there an easy way to convert to svg? I tried Inkscape, but the output files are actually bigger than the png's. AND look cheesy.
or do you recommend using pngs and adding inline svg?

[fbrzvnrnd]

SVG is XML. So it is hard "convert" a bitmap to a SVG.

[bentleymaniac]

It's just when I try to use inline svg, ADE displays the pictures in a peculiar, almost hatched/sketched, way.

But I might try that if I can't get the css to work.

Does inline svg allow you to "pinch and zoom" on the images? The css method seems to prevent it.

[Notjohn]

Originally Posted by Tex2002ans

Toxaris's "ePUB Tools" are a fantastic tool for doing that:

https://www.mobileread.com/forums/sho...d.php?t=213372

Indeed they are. I bought a cheap copy of Word 2007, to see if it was any better than Word 2000 in outputting html (it is). So the other day I downloaded the Epub Tools and managed to get them on the "ribbon" (as it seems to be called). They look very promising.

[Tex2002ans]

Originally Posted by bentleymaniac

BTW, is there an easy way to convert to svg?

GrannyGrump wrote a Text to SVG tutorial here:

https://www.mobileread.com/forums/sho...d.php?t=238029

Originally Posted by fbrzvnrnd

SVG is XML. So it is hard "convert" a bitmap to a SVG.

fbrzvnrnd is correct. It is very similar like going from lossy (JPG) -> lossless (PNG/GIF) images.

Once you have crossed that threshold to a bitmap image... it is really hard/impossible to go back to a vector.

Originally Posted by bentleymaniac

I tried Inkscape, but the output files are actually bigger than the png's. AND look cheesy.

Personally? I would only use SVGs if you have access to the original source files. Like if you had a computer-generated chart directly from the program that created it (or if you had access to the vector source... like an actual digital PDF (not a scan)).

On Looking Cheesy: Years ago I got sick of running across these tiny ant-sized horrible JPGs of formulas in the books. I wrote a "Formulas to PNG" Tutorial:

https://www.mobileread.com/forums/sho...d.php?t=223254

Here is the Before/After example posted:

Before: https://www.mobileread.com/forums/att...8&d=1380001474
After: https://www.mobileread.com/forums/att...7&d=1380001474

The Before was zoomed in on a PDF scan, and the After was me recreating the formulas digitally.

If you took Before image, and followed GrannyGrump's method (converting a bitmap to SVG paths)... the Before formula would still look like crap (and nowhere near as crisp as my After formula). Garbage In, Garbage Out...

Bitmaps to Paths: I was looking through the older topics (because this topic has definitely been brought up many times before), and I came across this one. Psymon was trying to generate sheet music:

https://www.mobileread.com/forums/sho...11#post2926711

You can see the difference between a "Traced" SVG created from a bitmap image:

https://www.mobileread.com/forums/att...1&d=1411067938

and a purely digital vector solution:

https://www.mobileread.com/forums/att...2&d=1411067938

On File Size: Depends on the image. SVGs are sometimes much larger than their equivalent (small resolution) bitmaps.

The advantage of a vector image though is that it stays the same exact file size and perfectly crisp no matter what the output size is.

For example, if you see this image:

https://commons.wikimedia.org/wiki/F...map_VS_SVG.svg

SVG: 3 KB
320x204 PNG: 22 KB
640x409 PNG: 49 KB
800x511 PNG: 59 KB
1024x654 PNG: 85 KB
1280x818 PNG: 100 KB

No matter which resolution you output the SVG, it will always be 3 KB. What if you wanted to generate that image for a 4K monitor?

4096x2567 PNG: 446 KB

while the SVG would always be 3 KB.

If you took the 650x409 PNG and resized it to 4K, it would look horribly fuzzy/pixelated.

Originally Posted by bentleymaniac

or do you recommend using pngs and adding inline svg?

In your case, just stick with the cleaned up PNG.

Originally Posted by bentleymaniac

It's just when I try to use inline svg, ADE displays the pictures in a peculiar, almost hatched/sketched, way.

Who knows what you are doing... you would have to give source files, show code examples, and explain how you created the SVGs.

ADE displays SVGs fine.

Originally Posted by bentleymaniac

Does inline svg allow you to "pinch and zoom" on the images? The css method seems to prevent it.

That is another reason why I don't typically do SVGs in EPUBs. If you read the SVG Table topic, you would have seen the discussion + problems we ran across.

A lot of the devices don't play nicely with SVGs (like changing font color, and to my knowledge none of them allow you to "pinch and zoom" the SVG). They do look nice and crisp at any size though.

[fbrzvnrnd]

I suggest to use SVG when you need it. SVG is XML: you can draw rect, circle, path... everything using tags, like <rect>, <circle>, <path>. You can also create hypertext inside SVG. As TEX202ans said, the support has problems, so you have to test your SVG to know if it works fine. Btw, SVG have got a lot of things in its chest, like animations, viewBox, viewport and more... but most of this things do not work in ebook or are "deprecated" by IDPF.

[RbnJrg]

Originally Posted by bentleymaniac

BTW, is there an easy way to convert to svg? I tried Inkscape, but the output files are actually bigger than the png's. AND look cheesy.
or do you recommend using pngs and adding inline svg?

Could you post here the image you want to convert?

Regarding the size of svg images, don't forget that svg images are "text" images, so when that images are compressed (when the epub is built, the svg will be compressed), generally are very tiny in size.

[Toxaris]

I use SVG as much as possible for equations/formulas. While exporting to ePUB from Word with my tools you can choose between PNG (default) or SVG (preferred) for equations. It is also possible to export equations as MathML from Word for if you want to use equations in ePUB3.