Want to get consistent position of graphic "frames" with text in ePub reflowable output from InDesig

[David Borrink]

My client asked me to create an ePub output of an existing printed book from an InDesign layout they shared. There are three types of callout boxes with "frames" made up of a category name in a box with an angled edge plus a line above, and a line below the information. See the InDesign layout image where I point out one of these.

The layout had the line/title graphics grouped as one object and placed over the text, and anchored to it. That wasn't working for ePub. I figured out that I had to ungroup these "frames" and place the upper title/box/line above its content and anchor it above, then anchor the lower line below the content. When you look at the ePub output in the Apple Books image attached, it looks fine. Some of these callouts have three or four lines of text, so by having the title line and the lower line anchored above and below, the text can be the space it needs to be and the lines don't interfere.

But... the output in Calibre is no good. The content is behind the title items and the lines are almost on top of each other. I'm learning a lot about ePub this year and I'm doing well, but this one has me stumped. I'm do add custom css files to output so I know what I'm doing there.

 

Is there a better practice for converting the look of these features in a reflow able ePub so that I know they'll be consistently displayed? I thought I had this set when viewing in Apple Books, but Calibre is saying I don't. This "trick" is the final big hurdle to solving their need to have an ePub version of their materials.

[James Gifford—NitroPress]

Okay, first a meta-answer that your client may not want to hear but you should absorb as a working principle — it's a mistake to try too hard to make an e-book exactly resemble a print book. Different media, different strengths and limitations, and even for details as small as text accent graphics the design should accommodate processes that are... easy and graceful in that medium. Some things are trivial to do in print, others trivial to do in e-text, and often it's those simple things that are disproportionately hard to do in the other medium. A simple, visually or functionally equivalent variation should be used to make that detail of the layout easy to manage in each medium.

But that's not what they want, and it can be more difficult to explain why, for example, text can't have an angled box around it in an EPUB than it is to just find some way to get it to work. 🙂 "Their way, not the right way." — nothing new here except the precise situation. 🙂

That said, and since you're comfortable with CSS, I don't see why stripping down the export for that style (you don't say if you're using a dedicated EPUB export file or working from the print one...) and then using the border statement to add just a top border to one style and a bottom border to the second would be most of the solution here. That and defining those paragraphs with spacing etc. that keep them separated from adjacent text.

That said,. I can't quite figure out how you are doing the angled edge on that background, and that may be interfering somehow with orderly stacking of the lines. But you're on the right track, I think, with two styles that run together to create the effect. I just think it's going to take an almost wholly defined CSS style for each to achieve it. (That is, not just a few adjustments from the ID export.)

[David Borrink]

James, hey thank you for a quick response to my situation. I do agree with what you're saying. Since I'm somewhat new to doing ePub outputs for books, I didn't want to assume it wasn't possible with my X number of attempts to make this work because more experienced minds have probably either pulled off stuff like this and I didn't know it yet, or I'm just trying too hard to do something that isn't possible without a lot of convoluted CSS tricks. I just needed to know from those who know better. Like yourself.

So yeah, that tells me that I will need to go to the client and say, "your design is not possible to pull off without complications". Fortunately, she told me that some changes might be warranted that would lead toward the future editions and obviously this will have to be one of them. I definitely think your suggestion of one line above and below would be better and a lot more simple to pull off—a simple pair of divs each with their own border. I'm more of a "keep it clean" designer so since I'm becoming their new go-to person, I can push that idea. 

[James Gifford—NitroPress]

Well, don't give up yet. It's always instructive to solve a specific problem, too.

I also prefer to solve problems like this from within ID plus a CSS file, rather than anything that requires post-export surgery. It makes the workflow more streamlined and repeatable.

Without knowing anything of your existing styles, I'd use:

• One style to give the shaded background plus the top rule;
• One style to give the 'content' text plus the bottom rule.

That may not even need any CSS adjustment, but such would probably allow some fine-tuning the export alone won't. (For one thing, ID doesn't export padding at all, which is often needed to get things like the background color properly arranged.) The only thing I can't quite figure out is how to do the angled edge, but if you get this approach to work, convincing the client that it's not worth a more complex setup just to get that detail might... cost fewer brownie points.

[James Gifford—NitroPress]

I set this up in ID:

...using two paragraph styles and a character style over the heading (only way to get the effect to stay text-width). Most of it is just visual placeholder and you could get it to look better if you like.

The green background is actually a big, fat, misplaced underline in the character style.

I got this in Calibre, with a little CSS tinkering:

p.Anglehead {
	border-top: green 2px solid;
	padding-top: 4px;
	margin: 30px 0 10px 0;
}

p.Angletext {
	border-bottom: green 2px solid;
	padding: 0 0 4px 30px;
	margin: 0 0 20px 0;
}

span.Angleheaded {
	background-color: green;
	padding: 6px 60px 4px 8px;
	text-decoration: none;
	border-radius: 0 0 30px 0;	
}

Let me know if you can't make sense of that. Dinner and a beer are calling. 🙂

[David Borrink]

I'm following up a bit later on this. The client agreed to rework those into a more ePub-friendly format. We now have a format for the these that get translated into a simple "border on top" for the name of the feature, and a "border on the bottom" for the text of the feature. There are four different kinds of features with color codings. They like the simpler look that I came up and now want me to redo all their books to have this new look. So I got much more work out of it. Their previous designer didn't design with ePub in mind so I've been going through and converting all the "won't work in ePub" setups to ones that do. It's an involved textbook situation and I'm learning a ton. The first book successfully went to ePub to their satisfaction, and now I have four or five more books to do with a redo. 

The key is to come up with a look that translates to ePub or can be simplified a little more for ePub. Some things you just can't do in ePub, but you can at least be complementary or "close enough" to ensure good output.

Thanks James for your suggestions. It didn't work for my situation, but maybe someone else will see it and help them. I can't tell you how many times a part of an answer has solved other situations for me. But that's the beauty of how we all help each other in these forums. 🙂

[James Gifford—NitroPress]

Happy to help. Nothing really new here, except another iteration of how something done in one medium either can't be replicated in another, or is best given the flexibility to take advantage of the strengths of the new medium. You can do amazing things in EPUB/Kindle that can't be done in print or rigid-page e-docs... and, IMVHO, should.

As for the process and just how much can be done with CSS processing of an InDesign layout, I've just completed two introductory essay/tutorials you might find interesting:

• CSS Magic for EPUB Export — an introductory tutorial
• Perfect Front Matter (for Print and EPUB Export) — a comprehensive tutorial

The first is a magic trick, turning a stupidly garish ID layout into six professional book pages (using only the CSS export step); the second is a much expanded version showing how to lay out pro book pages (front matter through first chapter), then export that to equally polished EPUB/Kindle. Emphasis from the first is just how much power CSS holds; from the second, how easy and efficient it can be to do dual-format layouts and reduce things like managing multiple source files.

Let me know if you hit any other hurdles. With the projects, that is... your clients are your problem. 🙂