Universal Solution for Centering Text Under Image

[Trane]

I spent two days reading various posts, blogs, suggestions, and methods for centering text under an image. I originally saw and used the figcaption method, which looks wonderful in Sigil, but did not translate when converted to mobi.

Since then I read that 'this reader likes it with this method' and 'that reader doesn't like that method' and what it sounded like there is no single solution that will look right in every e-reader.

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??? 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. It seems better than having it look totally unprofessional due to not aligning under the image.

Thanks for any guidance.

[JSWolf]

That's because there is no way to do what you want in Mobi.

[Trane]

Really? No way to center text under an image? Looking further just now, I found this... and this guy was wanting to do exactly what I want. This won't work either?

EDIT: Looks like Paul Salvette has found a solution, at least for the Kindle. I am really shocked that code for ebooks is not universal... though it would probably be (mostly) if not for Amazon choosing to have a proprietary format.

[KevinH]

Would a very simple table with two rows (one for the image and one for the caption) work with only one td per row, work in a .mobi. All of the approaches should work in a .azw3 (kf8) style kindle book.

[Trane]

Originally Posted by KevinH

Would a very simple table with two rows (one for the image and one for the caption) work with only one td per row, work in a .mobi. All of the approaches should work in a .azw3 (kf8) style kindle book.

Hey Kevin... I always thought tables were a no-no. ? Since I am no coder and need it spelled out for me, will probably go with Paul's solution (linked above) as he provides the code and an example.

On that note, I can see I will have to have one mobi file with 'Kindle-code' and one epub. Unless Paul's solution will also work in epub... If I need to keep them separate do I just make a copy and change the name for one of them, then allow Sigil to save as epub and just convert to mobi after? (I guess I need to make a small "tester" epub and answer my own questions... my book is way too long and has way too many images to use it to try stuff out. Would be simpler to just have a little tiny epub.)

EDIT: Well, neither of the methods above are working far as I can see. Paul's is aligning left, image and text, and the other method is making the image huge no matter how I tweak the CSS.

Looks like embedding text in the image might be what I am left with...

[KevinH]

FWIW, I think every Kindle after the Kindle 1, supports simple tables in mobi. The Kindle 1 may have added that ability via a firmware upgrade, but I am not 100% on that. Not sure if there are any Kindle 1's remaining in service.

[Turtle91]

try:

<div class="image"><img alt="" src="../Images/test.jpg" /><span>your caption</span></div>

CSS
div.image      {margin:2em auto; width:80%; text-align:center; page-break-inside:avoid}
div.image span {display:block; font-size:.6em; font-family:serif}
div.image img  {max-width:400px} //* the actual width of your image in pixels *//

See if that works.


edit: You can even try adding the "max-width" to the div.image and set it to the smallest display screen you find convenient (in portrait). Then the image "shouldn't" overflow to the next page.

[Trane]

@Kevin -- good to know, but I don't know how to do tables and have 100 images.

@Turtle, thanks. I tried it, but it is left-aligned, both image and text. (And I validated the CSS, and it was good without errors.) I'm sure it's user-error... I just don't know what I'm doing. Regardless of how I tried tweaking the CSS, I can't get it to center. But this happened with the code I linked to above too, so again, it has to be me.

What I do know how to use is Photoshop. And if I go that route I won't have to use separate code for mobi vs epub or worry in the future than some code I used becomes legacy, since I don't know enough about it to begin with and certainly do NOT want to revisit this book in the future and have to re-do 100 images. This has been a 4yr project I cannot wait to see in the rear-view.

It's a shame the figcaption method doesn't work in mobi as it looks beautiful in Sigil with nice crisp text. The Adobe method is not as crisp, but at least it will be in the right place regardless of device or passage of time.

[Turtle91]

Can you post the html of the image and your css file? And, just to make sure, confirm you have the css file properly linked and there are no styles defined in the header of the sheet or inline.

edit:
And can you show us the css/html AFTER it gets kindle-ized?

[Tex2002ans]

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:

<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:

Spoiler:

div.figure {
    margin-top: 1em;
    margin-bottom: 1em;
    page-break-inside: avoid;
}

div.wholeimage {
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}

div.wholecaption {
    margin-top: 0;
    margin-bottom: 1em;
    page-break-inside: avoid;
}

p.caption {
    font-size: 0.75em;
    text-align: center;
	text-indent: 0;
    margin-top: 1em;
}

p.rightcaption {
    font-size: 0.75em;
	font-style: italic;
    text-align: right;
	text-indent: 0;
    margin-top: 0;
}

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".

- - - - - - - -

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]):

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).

[Trane]

@ Turtle -- already deleted the little epub I made to test, but will recreate in A.M. and do as requested, thank you!

@ Tex -- Well &*^%$ me!!! Very much appreciate that post (read it 3 times). I get your point... will revisit all in A.M.

One thing that mitigates all the points (AFAIC anyway) is that this is a how-to book, so if someone wants red or blue text and a different typeface, and the captions are in black arial, that's not a deal breaker to me, and I can't see it being one to the reader since this is a utility book. (And if people don't mind hanging captions that don't appear by the image and other flakey stuff... then... ) I also won't be updating any pics in the future. If years went by and something made that necessary, I'd probably just pull the book at that point. My main publishing focus will be fiction (with NO pictures!)... I just thought I'd throw out this how-to "quickly" and it turned into this huge project... the hardest book of all I could have chosen to do, esp as a first ebook.

But I hear what you're saying and it's always best to err on the side of caution, and I know enough to know I don't know anything, and you've been through this and are cautioning me, and I am listening. I will re-do Turtle's suggestion in A.M. and look more closely at your code too to see if my pea brain can manage to figure it out (looked like a lot of captions?) and see if I can get up on this horse.

I very much appreciate everyone's help.

[Trane]

@ Turtle ... I couldn't stand it and re-did a new epub for testing... and you were exactly right, I forgot to link the CSS. (That would explain why none of the methods in the links worked!)

Looked beautiful in Kindle Previewer for all Kindles they model. And in Sigil. (Am assuming this will work in epub too?)

... in your notes you said to set the CSS width to the actual pixel size of the pic. (Which I did for the test.) How does this spec work exactly? Like if that width in the CSS doesn't match the actual pixels of an image, what's the consequence?

[theducks]

@trane
You have a newer (>=3) Kindle: AZW3 is a better format (basically EPUB2 in a wrapper) .
That is what I use. I do Dropcaps, borders and some other fun stuff.
The only reason for Mobi is you want to send to your device via Amazon. Side loading allows AZW3

[Trane]

Originally Posted by theducks

@trane
You have a newer (>=3) Kindle: AZW3 is a better format (basically EPUB2 in a wrapper) .
That is what I use. I do Dropcaps, borders and some other fun stuff.

I also wanted to do dropcaps (was going to be the next hurdle to tackle after images), and knew AZW3 was a newer format, but was under the impression I have to upload my book to Amazon for publishing in mobi format? That Amazon requires it. ??

The only reason for Mobi is you want to send to your device via Amazon.

Isn't that how it works when someone buys an ebook from Amazon though?

Side loading allows AZW3

I guess I'm not understanding. Does Amazon upload to customers in mobi, but make AZW3 available for sideloading?

(As you can see I don't use Amazon for anything, don't own a Kindle and never will. Am not a fan of Amazon, due to their proprietary bent... same reason I don't own anything Apple!)

Thanks for your help, Ducks.

EDIT: Just read what file formats Amazon supports for uploading, and the reason mobi stuck in my head is I wanted to make sure it would look right (vs uploading an epub and having Amzn convert it... learning too late some code didn't translate well). So while they accept a lot of different formats (PDF, Word, etc) mobi seemed the only Amzn format? (Aside from KDP.)

[JSWolf]

Originally Posted by Trane

I guess I'm not understanding. Does Amazon upload to customers in mobi, but make AZW3 available for sideloading?

If the program/device handles KFX and there is a KFX version available, you'll get KFX. If the program/device handles KF8 and there is a KF8 version available, you'll get KF8. If the device doesn't handle KF8, you'll get Mobi. If you have a device registered to your account and you USB download the eBook, you get KF8 if there is such otherwise you get Mobi.