Skip to main content
D
David Borrink
Inspiring
December 5, 2023
Question

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

  • December 5, 2023
  • 1 reply
  • 658 views

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.

 

    This topic has been closed for replies.

    1 reply

    James Gifford—NitroPress
    James Gifford—NitroPress
    Legend
    December 5, 2023

    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.)

    D
    David BorrinkAuthor
    Inspiring
    December 5, 2023

    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. 

    D
    David BorrinkAuthor
    Inspiring
    January 24, 2024

    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. 🙂


    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. 🙂

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices