Join Tony Harmer for an in-depth discussion in this video Using CSS to include images, part of EPUB: CSS.
- In this movie, we are going to be looking at CSS and images. I'm in the file CSS Graphics.epub which you'll have access to if you're a premium subscriber to Lynda.com, in the Exercise Files relating to this chapter. Although, of course, you could work along with any file of your own. This file does contain a recap of the basic file types inside of here so the three raster formats; GIF, PNG, and JPEG, and also a bit about SVG which we'll talk about in just a second in there.
And, of course, you're welcome to read those if you need to although I'm assuming that your EPUB probably already has images in it. So one of the things you're most likely going to want to do straight off is perhaps center an image in the flow of the text. Now there is a margin rule in CSS which is used on web sites which allows for that centering to happen. So what I'm going to do is I'm going to come along to the image here in the mockup and I'm going to apply an inline rule to this image.
So if I put a style attribute on just here and set that to margin, and I'm going to put zero for the top and bottom and then auto which should automatically set this for the left and right just there. But you'll see that while it's changed in the vertical flow, nothing is changed on the left and right and that's because this calculation isn't supported in EPUB so we need another way to do it, and this is one of the times where you'll actually need to get into the mockup and change that.
There you go. Since I've removed that, the spacing has gone back to normal there. So you'd need to go into the mockup and the best thing to do is to wrap it in a div so if I just put a div on here. I'll just put it over to the side just for the moment and then, of course, because there's going to be more than one image, it'd be best to use a class. So if I put a class attribute on here and set that to be equal to imageBox just there like so. And now that has a class, I'd write a rule for that and if I write that up in the top just here so, of course, it's a class.
It's starts with a period, .imageBox, like so. Open that up, then my braces and the line above, and then you use text -align, and what that does is it takes the block and pops it into the middle of the page like that. So that's how you'd need to center something. That is one of the cases where you'd need to get in and actually amend the mockup at the same time unless, of course, it was already contained in a div in which case your job done.
Now these image formats just down here, I sort of mentioned SVG, so SVG is a code-based format just here, great format for you to use, very, very, scalable, very, very, responsive. Do make sure you check for support on the platform or platforms you intend on publishing to although support for that is getting much, much better these days. SVG itself can ordinarily be addressed by CSS too, and I'm not talking about two as in the number.
I'm talking about in addition just to be clear. So you can do that, but support for that in EPUB is almost nonexistent at the current time. So do be very, very wary of that. And one final thing, when you're using images, never use them to convey information on their own. They should always support the text, make it easier to understand, or add some other form of embellishment to a text. Never use them to actually convey the information.
They shouldn't replace text in any way, and there's various visual concerns with that. So do bear that in mind. So there you are. That's how we can address images and center them, and so on with CSS. In the next movie, we'll be coming back to images where we'll be looking at the topic of backgrounds.
NOTE: The techniques shown are designed to help members create reflowable EPUBs with CSS 2.1. There is some CSS3 for creating fixed-layout EPUBs covered, but the majority of the tutorials concentrate on CSS 2.1.
- Working with CSS selectors
- Incorporating @ directives in CSS
- Understanding the CSS box model
- Writing more efficient code with shorthand notation
- Sizing and positioning text
- Including images with CSS
- Styling lists
- Assigning relative, absolute, and fixed positions
- Floating elements