Join Kevin Callahan for an in-depth discussion in this video Magnification amount and pop-up location, part of Creating Fixed-Layout eBooks for the Kindle.
- With the text in the boxes designed, the last step is to position the region magnification popups. You usually want them to appear close to the origin or source text, and as with all the other attributes of popup boxes, these specs are found in the CSS. So let's look at where we left off once we designed the boxes and designed the text inside of them. And, "She dearly loved fat, delicious worms" is way over too far to the right. "When they were gathered about her" is way over too far to the left. So how do we get those onto their proper pages and closer to their source text? Well, we go to the CSS.
So let's open our CSS and see what's what. So, here's the target-mags in which we designed everything. Now we have to scroll down in the CSS until we come to "Text Block Positioning Using Percentages." And we scroll down until we come to page 4 and page 5. Now, notice here that we have the flat text view, and then the magTarget view. The flat text view and the magTarget view. If you want to avoid confusion, you could have all the flat text views together, and then a whole other list with just the magTarget views.
That might prevent some kind of mistake where sometimes I've done it, you enter a value up here when you mean to enter it down there, and then you can't figure out why suddenly the flat view text is out of place. But in this case, we're going to just work here as we find it. So, that left-hand popup was way over to the left, and I think it was too low on the page. So you know how I like to do things by big increments when I first adjust. So let's make that a 1%, and let's move that over to the left. Let's say, make it 1% as well, just to see what happens.
Because a lot of times, I'll put large popup boxes, and that one's going to be large because there's a lot of text in it. I'll nestle in the top corner. Now, as far as the first one on the right-hand page, on the yellow page, I'm going to make it at the same position, 1% from the top, because I think that the text on the flat view aligns across the top, so I want the popup boxes to align, as well. Now, you can see the left position of that top popup box on the right side is 39%, and automatically you should know that that's wrong because this page is divided in two, and the yellow section of the spread doesn't begin until 50% over.
So, 39% automatically tells me that this is intruding on the left-hand side of the spread, which in fact is what we saw it doing. So let's move it way over. Let's move it over to 70%, just to see what happens. Alright, so we can save that. Now we'll have to go back into the Kindle Previewer, drag our content.opf on top... and here's our page. Let's see how the specs changed things. Double-click on there. "She dearly loved fat, delicious worms." That looks a lot better.
I think there's too much space here, so we're going to have to shift it over to the left. And how about that? No, that's way too far over to the right. There's way too much space here. We're blocking out too much of that chicken there. So, we're going to have to move number two a little bit to the left, and we're going to have to move number one a little bit to the right. And also, look at this big gap here. So maybe if we make the box a little bit wider, we can get a different rag and see how that works. So let's go back into the CSS and see what we can do here.
For number one, let's move it left. Let's put it at 3%. And let's change the width just a tiny bit, 44%. And then, on the number two magTarget, let's shift it over to, let's say 68%. I think the top positions of both was good. Top 1%; the top is at 1%. I think that worked well for both of them. So let's bring Kindle Previewer back. Drag the content.opf. And we'll see how we do and double-tap on that.
I think that looks pretty nice. We did lose a line by making the box a little bit wider. We only have five lines now instead of six, which enabled more of this chicken underneath to be visible, and this gap in here is okay. I like that. So let's hit the right arrow to go to the next popup box. And that one is still a little bit too far to the right. There's this big gap in here. But you know what? I can just leave that for the next go around when I start working on these other two popups. I can just adjust this by a little increment, and then address these other two popups and the rest of the popups in the book.
So, it's really obvious that as you're doing this, you're going to be going back and forth quite a bit. It can be a challenge. It can also be sort of enjoyable, because you get to display things differently than you usually do. Certainly as a print designer, I enjoy doing this because it's a whole other level of design. It's a whole other level of making things that didn't exist before. And just the idea of positioning things like this, you do get used to it. You develop a knack, like you understand that this is the middle point, that anything on that side has to be 50% plus. 50% plus 10%.
50% plus 40%, or 60%. And you can start getting a knack for how these things work. So once you work through your entire book, you'll have to keep testing it on Kindle Previewer, and then you'll have to sideload it onto actual devices. Onto Kindle Fire, onto E Ink devices, and onto your iOS devices, onto your iPad and iPhone, just to see how those display there. And that's incredibly important. It's much more important than seeing it on Kindle Previewer, actually. And we address all of those things in later movies.
- What is a fixed-layout ebook?
- Good candidates for fixed layout
- Comparing the Kindle format to EPUB3
- Managing fonts
- Inserting images
- Using the Kindle Previewer
- Exporting InDesign documents for Kindle formatting
- Working with the Kindle fixed-layout template
- Using media queries