Quote:
Originally Posted by Trane
I will be publishing to Amazon but also want an epub version. The "SVG" wrapper method sounded like the most touted, but then invariably someone came on and said, 'The Sony reader doesn't read SVG' or whatever. And frankly, SVG looked like a monster.
Is there no simple way to center text under an image that is universal???
|
The landscape has pretty much not changed since 2015:
https://www.mobileread.com/forums/sh...d.php?t=258722
RbnJrg came up with a few SVG solutions that would probably work well in ADE + KF8 + most EPUB readers (see Side Note below), but those do not work properly in the old MOBI format.
He did point me to a recent Sigil Plugin, "InsertImageSVG" that helps speed up shoving the images into an SVG wrapper:
https://www.mobileread.com/forums/sh...d.php?t=283333
but a lot of manual tweaking is still needed IF you wanted to include the captions themselves into the SVG.
The closest "universal way" is just using basic HTML/CSS + wrapping the thing in a div and telling it to "page-break-inside: avoid" and hope the devices support it (pretty much all of them don't):
This is the along these lines of what I use:
Code:
<div class="figure">
<div class="wholeimage"><img alt="Figure 1: Trees" src="../Images/Figure1.jpg"/></div>
<div class="wholecaption">
<p class="rightcaption">Courtesy of Example Museum</p>
<p class="caption">Figure 1: Trees</p>
<p class="caption">Painted by First Last</p>
</div>
</div>
CSS:
Side Note: The SVG-wrapped method does have its downsides too. If you are using readers such as Readium or AZARDI + certain combinations of multi-columns + window size, the SVG-wrapped images can go flying off the screen.
I recently had a PM discussion with RBNJrg a few months ago. I will quote my PM below:
- - - - - - - -
AZARDI with the SVG wrapper. Depending on the size of the window, the image/captions expands off the edges of the screen:
In Readium, the SVG also sometimes went insane:
(One of the other advantages with the normal HTML/CSS = automatic text wrapping.)
Another big problem is the caption text scales according to the entire SVG. So let us say you are reading on a tiny device, the caption text might shrink to become too small:
Readium:
I haven't tested on my phone yet, but I suspect the problem might be similarly bad.
Or you might get the opposite problem of the SVG Caption getting too HUGE (although that one doesn't seem to be as bad as too small... although who knows how bad the problem might get on a larger [4K] monitor).
Someone with horrible eyes might set their book to have ABSOLUTELY HUGE text, and then BAM, teeny tiny captions.
I personally weigh all the USABILITY over the mentality of, "This caption MUST be on the same exact page as the image".
- - - - - - - -
Quote:
Originally Posted by Trane
I know it isn't recommended but I am seriously leaning towards just putting the text in the graphic in Adobe Photoshop to make sure it will be correct in every reader. Even if that degrades the text quality.
|
The reasons why we recommend against it is for Usability + Accessibility reasons.
Usability because it does not allow Search/Copy/Paste + will not follow user's preferences (Color, Font, Font Size, background, etc.).
Accessibility because text inside of an image is not readable, for example, in Text-to-Speech.
The text in images (especially JPGs) also looks like complete crap, and you are going to cause yourself many headaches in the future when you need to substitute in a better picture or recreate higher resolution/DPI images or tweak any sorts of variables (ask me how I know!). Not to mention the JPG -> JPG+caption will downgrade the original image further.
In the future, if you want to recreate your captions from
.75em bold Times New Roman ->
1.2em italics Charis SIL. With HTML+CSS it takes seconds. With text in images you have to redo all the images in the entire book (potentially effecting width/height of images, and introduce a whole other host of problems).
Side Note: Another reason to avoid the SVG Wrapper is because many readers are bugged when dealing with SVG Text. For example, in Readium, the SVG font refused to change color with my settings (Black Background/White Text ["Arabian Nights" theme]):
Quote:
Originally Posted by Trane
It seems better than having it look totally unprofessional due to not aligning under the image.
|
I am going to pull a JSWolf: Everyone who commonly reads ebooks has zero problems with this. They are used to odd breaks and things potentially being split across pages.
In ebooks, what if the paragraph finished halfway down the page and a giant image is coming up next? The bottom half of the page would be a giant blank spot!!! There is nothing you can do about that.
In print, a typographer has access to top/bottom floats + would manually go through and tweak all the text itself to make sure that a giant gap doesn't occur... but in ebooks, there are too many other variables.
The worst and most unprofessional thing is when the text in the image is a complete mismatch between the main text and captions (see images above). Or when the text becomes unreadable or horrible quality (which WILL happen when they try to read crappy JPG text on a higher resolution/DPI screen).