Extracting text block positioning

Since InDesign CS 5.5 cannot export to fixed-layout EPUB, it does not pay any attention to the position of the text. It assumes it's going to be one long flowable EPUB. So we need to get the position of all of these text blocks, because that's how we are going to specify them in the CSS and in the HTML. So, for example, on the cover here we want to specify not only the text and the formatting of the text for the title, but we want to specify how far down from the top of the page it is, and how far to the right of the page it is, and sometimes we need to also specify what the width is.

If we have text that's, for example, in a text frame, we want to specify the width so that the text wraps correctly. Once we get these settings, we're going to be adding those two our styles.css document. And frequently for fixed- page layout CSS files, the designer has created a different class for every single text block in the entire document. So, for example, you might say, on page01 the ID title will be positioned at a certain distance from the top and from the left. And obviously these are incorrect, because it's 0 and 0, and it doesn't start at the upper left-hand corner. And then the width and the height. Or maybe you might set it up that on page02, if you have a class for page02, and inside of that class there is a paragraph of text, that text should start at this absolute position, and then you enter in your distance from the top and from the left in pixels, by the way.

That is a requirement for fixed-layout EPUBs to use pixels, not percentages or ems; you always use exact measurements. Even images will need to be positioned in the same way. We'll be talking about that a little bit more detail in the next chapter. But I want to talk about right now is, how do we get this information out of the InDesign file? When I talked about the PDF, I showed how you can use the rulers and sort of eyeball it, and then you'll have to test. But you would think that because all this information exists in the InDesign file, that there should be some way of getting it out quickly.

I can select this frame and if I look up here in the Control panel, I can see that it starts, well, it looks like it's set up for a spread dimension, so let me change it. Right now, it's saying 12 inches from the left, so I'm going to go to Preferences, come down here to Units & Increments, and while I'm here, I'll just change it to Pixels. And I want the origin to be Page not Spread. There we go. So now we have this text frame selected, and it's saying that the distance from the left edge of that page is 56.254 pixels. And you can't do fractions of a pixel on the web, so you're going to have to round all these yourself.

The distance from the top, the Y measure, is 220 pixels. The width is 221 pixels, and the height usually shouldn't make any difference, because we're going to use the same fonts, the same leading, the same type size, so it should hit where it is right now. You can say a height if you want, then you are going to tell it what to do if it exceeds that height. It's actually probably going to disappear. So the idea is you have to go through every single text frame and make a little cheat sheet for yourself or fill in a spreadsheet, and you want to say that for this text frame on page05, the margin-top is 220, the margin-left is 56.

So you could just say top: 220 pixels, left: 56 pixels, and then again width: 221 pixels. And you would take these measures and you'd copy and paste them into your CSS, and you'd fill this in. And you create a class for each one of these. And I talked with a friend of mine who owns a company called Rorohiko--his name is Chris--and I told him about this horrible manual amount of work that we need to do, even in InDesign, and isn't there a way to extract this information automatically? And he wrote us a script.

Wasn't that nice with him? The script is free, and you can download it from this URL. I've installed it already in my Scripts panel, and it's called CSSGeometry.jsx. And all it does is it finds every single instance of the text in your document and it creates a text frame in the pasteboard of the first page or spread. Double-click it. You see that? And I zoom in and it gives us all this information automatically.

So it's saying that for the ID, page-1 and I added hyphen -1, because there are more than one text frames on page 1. So the first one is labeled as -1 and the second one is -2, it gives us those measures, top, left, and width. Page 1, 2, so page 3 its top is 742 pixels. And it looks like it's measuring this element down here.

And for page 7, top 382 pixels. Let's look at page 7, right here. A one little thing is that you see that the top of this frame is 382 pixels, but that's not where the text starts. The text starts a little bit below that. Even Chris's script does not take into consideration any kind of insets that the designer may have made. And in fact, in an effect like this where we want this shaded background behind the text, I would probably split this up first and put the text by itself.

Let me just do this by Option+Clicking or Alt+Clicking to the right. I discussed how we do this in the chapter on maintaining special effects. And here I would select all the text and change that to a graphic or unassigned frame, so that's not counted as a text frame, so Chris's script won't even flag that. And then for this, I'm going to change the Fill to none, and change the Inset from Text Frame Options to 0, so that we can get an exact measure.

And I'll drag that back here. And I'll position it 6 pixels and in 6 pixels to the right. I'm just doing it by eye right now. Like that. And now we'll run Chris's script again. And this should be 388 from the top, for page 7, 388 from the top.

So you might have to go through the document and make sure that the text really starts where it should start in the actual document, taking into account any insets or margins that people may have done. So though it may take a little bit of work in prepping the document to make sure that the text starts were it should start and not be affected by insets, being able to take advantage of the CSS Geometry script to get all of these numbers that you would had to do manually will save you a lot of time.