Images: Advanced

##under construction##

Across platforms, images can present a huge challenge. Slight (or huge) differences in CSS interpretations can cause wild variances in how and where images are displayed.

iBooks images, especially, will drive some producers to drink. Nastrov, comrade.

Beware the person who says they understand everything about how images work on every platform. They are probably selling something, and I can think of maybe three people off the top of my head who actually DO (or seem to) understand how images work on every platform.

I myself do not understand everything about images. I've spent an embarrassing amount of hours with Google learning to troubleshoot issues, and I've picked up some tips that consistently yield good results.

Basic principle: images in ebooks DO NOT WORK THE SAME WAY AS WEBPAGE DESIGN. There. I've said it. Positioning is not a thing in ebooks. Well, okay, it sort of is, but mostly isn't. Float works. Display/block does not. Margin:auto does not. Position does not.

Another basic: images must always be inside a container.

In the HTMEMTDS tutorial, I've kept images inside a paragraph container. Yes, this is a slutty and coarse way to do things, but it works. Or at least it works well enough for small scene-divider graphics, which is all this tutorial is really geared to handle. For those instances, definitely keep the scene-divider images inside paragraph markers. Very little ever seems to go wrong when those images are handled in that way.

But there are a lot of other instances where a producer will need to use larger images. For almost every other instance, ideally, we'd place images inside a div container. In order to accommodate that potential change, I've added something to the CSS file.

In ebookstyle.css, I've added a class that does a couple things:

• 1. Asks the device/app to display the image to fill 100% of its container.

  2. Hard-wires the maximum width of the image to 1000px. This will probably make Kindle cry like the baby Jesus, but for EPUB, it seems to be a useful limit. (If you are only making an EPUB in order to create a solid MOBI, then it's fine to remove the "max-width" definition.)

The drawback I find in using div instead of a plain old paragraph container is that text-align:center does not affect the div's contents. Display/block, position and margin:auto are not supported in many viewers/apps. So. If you use div, make sure your image is at least 1000px and will fill the entire screen (at 100%), else the image will render align: right by default, with no known reliable remedy. (I chose 1000px because an iPad is probably the largest display screen out there, and that's 1024 at max. They can find me for their 24px.)

"img" class should be applied to:

• 1. the div

  2. the image itself

Example:

<div class="img"><img class="img" alt="Glorious, Beautiful Image" src="../images/img1.jpg" /></div>

Applying the class to both the image and the container tells the device/viewer/app that we want the image to fill 100% of its container, and the container to fill 100% of its available screen width.

Obviously, you can adjust those percentages, but bear in mind what you're actually changing. When applied to the image, that width-percentage dictates how much of the div container the image fills (which should always be 100%; I can't think of a single practical instance where anything other than 100% would be a good idea).

When the .img class is applied to the div container, the "width: 100%" rule determines how much of the available screen width the image fills. So if you want to set different percentages for the image and div, you will need to add a different class to cover the difference. You could, for instance, create .img50 for a div covering 50% of available screen width. This works well when you want to text-wrap and float.

Again, float does work, but that opens a whole other can of worms when it comes to how much distance we can create or reduce between image and text. Nook does some seriously strange shit to any type of margin rule (like ignoring it entirely). The CSS box model is a good place to start putting this task into perspective. Have fun tweaking the CSS to get the appearance the way you want it.

Before pulling all your hair out, please remember that Nook has issues with shorthand; if you set margins or padding, define each rule separately (margin-top, margin-right margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left) or the rules won't stick.

Also remember that end-users can change their font size and line height, and those changes will NOT apply to images or divs. So all your tweaking could be for naught.

When mucking around with such matters, always ALWAYS check results in ADE, Kindle, iBooks AND a Nook app of some sort. And know that I feel your pain. Sorry. Images are just... time-consuming and complicated. The best anyone can hope to achieve is a happy medium of some sort.