I have never found a solution to this in adobe. indesign does a great job creating CSS but for whatever reason will never generate margin-top.
I use sigil to examine the html and css made by indesign.
Here is a title page in html. I want to do the same thing, I want a top margin above the title text:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>012_epub_sonata_front_69_copy</title>
<link href="css/idGeneratedStyles_0.css" rel="stylesheet" type="text/css" />
<link href="css/idGeneratedStyles_2.css" rel="stylesheet" type="text/css" />
</head>
<body id="x012_epub_sonata_front_69_copy">
<div id="_idContainer002" class="_idGenObjectStyleOverride-1">
<p class="half-title ParaOverride-1">Sonata in Wax</p>
<p class="section-sub-head">a novel by </p>
<p class="section-sub-head"><span class="CharOverride-1">Edward Hamlin</span></p>
</div>
</body>
</html>
the page uses two style sheets generated by indesign. idGeneratedStyles_0.css and idGeneratedStyles_2.css
you can see the link href in the third and fourth lines for these style sheets.
style sheet 0 is global, fonts etc for the entire book.
style sheet 2 is specific to that page
this is the title of the book and the text I want to drop by 200 px:
<p class="half-title ParaOverride-1">Sonata in Wax</p>
there are two classes called here, p class and ParaOverride-1. in design classes don't use spaces so the space between means that the p or paragraph is multi-classed.
I ignore style sheet 0 since it is for the whole book and I know that overrides and specific things are in the second style sheet. In style sheet 2, I find this code:
p.ParaOverride-1 {
margin-bottom:59px;
}
which controls the text I want to change. a quick look at the whole sheet shows me that there is no margin-top commands, except to sometimes set the margin-top to zero. this is just peculiar to indesign, none of the settings will translate into margin top when rendering the epub, even if it is present in your paragraph styles. It would be nice if they just added a check box or something (use margin-top?) but they don't. so the fix is just to write your own in the css that applies to your page openers
p.ParaOverride-1 {
margin-bottom:59px;
margin-top:200px;
}
here I just added a margin-top line that looks good.
make sure to review everything. if you make a book you should have CSS 0 and an additional style sheet for each file that makes up the book.
https://sigil-ebook.com/
sigil is here. hey you might be mad and say I'm a print designer not a web designer, but everyone in pub design should open their epubs and take a look at the code. Sigil is super logical and a great platform for learning. You get a preview window that shows exactly what you are doing at every step. CSS is the preschool of coding and everything says what it does, like margin-top. best practice, supposedly is to have only one sheet of css which you can do by pasting them all together and rewriting the links but I never bother with this. the 4 or 5 sheets indesign uses don't increase the size very much. the other critical thing is the TOC which indesign is pretty good at generating. make sure to google it because the TOC.NCX file is important for epub.
in my work I am not really any good at CSS but it is clear enough to do little things like add margin
27
Replies
AdChoices
