Top-margin (bottom-margin?) for Kobo?

[Notjohn]

I see that my CSS styles don't seem to work on Kobo books. For example:

p.first {
margin-top:0.5em;
margin-bottom: 0.0em;
text-indent:0.0em;
text-align:justify;
}

creates a line that immediately follows the line above, without the 0.5 em space.

Is there another way to gain some breathing space, or should I just live with it?

[DiapDealer]

The only time I've ever really seen margin-top be outright ignored is when it's applied to the first element immediately following a soft (css) page-break. Are you sure there's not an error somewhere else in your css that's causing the entire thing to be ignored? Use the W3C CSS validation feature of Sigil to be sure there's no syntax errors anywhere.

[BobC]

Is it just the top margin that isn't working - what about the indentation and justification ?

If none of the css is working double check you have linked in to the correct css stylesheet. I spent an age trying to work out why some styles didn't work only to realise my text file wasn't correctly linked to the relevant stylesheet.

Also worth using the "inspector" to see the order in which css rules are being applied to your text, something may be overriding the p.first declaration.

BobC

[AlanHK]

Originally Posted by Notjohn

I see that my CSS styles don't seem to work on Kobo books.
creates a line that immediately follows the line above, without the 0.5 em space.

Is there another way to gain some breathing space, or should I just live with it?

Works ok in Sigil and Calibre's viewers, as you probably already know.

What is your "p" definition?

Any effect if you bump up the margin to 5 em?

Sigil's preview window includes a code view that shows you the final calculated CSS for each paragraph.
Calibre's reader also has an "Inspector" that does the same.
Can be helpful to find a missing quote mark or bracket in your code.


But if it's a "feature" of Kobo then you just have to work around it.
eg S&R all
<p class="first">
to
<p class="first"><br/>

or insert a whole para.
<p class="spacer">&nbsp;</p><p class="first">

define "spacer" line-height or font-size and see if that gives you any control over the spacing.

The nbsp is because some readers completely ignore empty paras.

[davidfor]

My Kobo's have no issue with code like that with either the epub or kepub reader. And, except for the justify, I have something like that in most books I fiddle with. It's probably an error. The Kobo firmware can be unforgiving for errors, especially the epub reader.

Any chance of a sample epub to look at? I think we need to see the rest of the code to see what is happening.

[Notjohn]

The first-paragraph style:

p.first {
margin-top:0.5em;
margin-bottom: 0.0em;
text-indent:0.0em;
text-align:justify;
}

The chapter-heading style:

h2 {
margin-top:1em;
font-size: 150%;
text-indent: 0em;
font-style: italic;
text-align:center;
}


I've been told elsewhere that stripping out margin-top is standard for Kobo. (Perhaps significant: I uploaded this e-book through Draft2Digital.)

I'll look at some other Kobo samples to see if they exhibit the same behavior. Note that I'm doing this on my Windows 7 desktop, not on a Kobo reader.

Later: okay, I previewed The Girl on the Train, and it exhibits identical behavior: no margin-top, though the Look Inside sample on Amazon does show it.

Thanks!

[DiapDealer]

Originally Posted by Notjohn

I've been told elsewhere that stripping out margin-top is standard for Kobo. (Perhaps significant: I uploaded this e-book through Draft2Digital.)

You've been informed in the preceding post (by someone with actual Kobo devices) that this is NOT "standard" Kobo behavior. I suppose you're under no obligation to believe them, though.

[davidfor]

Originally Posted by Notjohn

The first-paragraph style:

p.first {
margin-top:0.5em;
margin-bottom: 0.0em;
text-indent:0.0em;
text-align:justify;
}

The chapter-heading style:

h2 {
margin-top:1em;
font-size: 150%;
text-indent: 0em;
font-style: italic;
text-align:center;
}

As stated above, I put styles very similar to this in books that I fiddle with. And I've seen similar in many books purchased from Kobo.

I've been told elsewhere that stripping out margin-top is standard for Kobo. (Perhaps significant: I uploaded this e-book through Draft2Digital.)

When do they claim the margin-top is being stripped? I assumed you meant that it was being ignored by the Kobo readers, but this makes me think you mean something else. Are they claiming that Kobo is stripping them when converting to kepub?

I'll look at some other Kobo samples to see if they exhibit the same behavior. Note that I'm doing this on my Windows 7 desktop, not on a Kobo reader.

Edit: I noticed the above after I posted.

What are you using to view the books? The Kobo desktop application?

Later: okay, I previewed The Girl on the Train, and it exhibits identical behavior: no margin-top, though the Look Inside sample on Amazon does show it.

I'm hoping you mean "The Girl on the Train" by Paula Hawkins. That was the first result from a search on the Kobo site and my Aura H2O. There were at least four other books with the same title. I grabbed the preview and took the attached screenshots. Comparing them to the Amazon versions shows they are different. But, they are different editions, so they can't really be compared. And, I can see two versions on Amazon with different formatting.

The code for the start of the chapter is:

   <div xmlns="http://www.w3.org/1999/xhtml" id="book-columns">
      <div xmlns="http://www.w3.org/1999/xhtml" id="book-inner">
        <h2 class="chapter_head">
          <span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.1.1">RACHEL</span>
        </h2>
        <h3 class="a_head_left">
          <em>
            <span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.2.1">Friday, 5 July 2013</span>
          </em>
        </h3>
        <h4 class="b_head_center">
          <em>
            <span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.3.1">Morning</span>
          </em>
        </h4>
        <p class="flush_left">
          <span class="small">
            <span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.4.1">THERE IS A</span>
          </span>
          <span xmlns="http://www.w3.org/1999/xhtml" class="koboSpan" id="kobo.5.1">pile of clothing on the side of the train tracks.</span>

The styles are:

h2.chapter_head
{
	text-indent: 0;
	text-align: center;
	page-break-after: avoid;
	margin-top: 10%;
	margin-bottom: 2em;
}
h3.a_head_left
{
	text-indent: 0;	
	text-align: left;	
	page-break-after: avoid;
	margin-top: 1.5em;
	margin-bottom: 1em;
}
h4.b_head_center
{
	font-size:1.1em;
	text-indent: 0;	
	text-align: left;	
	page-break-after: avoid;
	margin-bottom: .5em;
}
p.flush_left
{
	text-indent: 0;
	margin-top: 0;
	margin-bottom: 0;
}
p.indented
{
	text-indent: 1em;
	margin-top: 0;
	margin-bottom: 0;
}

I can see "margin-top"s in there and they seem to be doing what they are supposed to do.

[Notjohn]

Thank you. Perhaps it was all a false alarm: I didn't "grab a sample" but clicked on the Preview on the Kobo store. I will look at The Girl on the Train (yes, Hawkins's best-seller) on the Kobo PC viewer.

[davidfor]

Just looked at the preview on the Kobo store and desktop app. The store seems to be setting the top and bottom margins to zero. The desktop app looks pretty much the same as the above screen shots.

[BobC]

I have taken the css from the posts above and used them to construct a simple book. The EPUB is attached.

I run this through Calibre to produce a kepub and transferred it to my Glo.

The top-margin works exactly as expected.

What results do you get ?

This proves conclusively that Kobo hardware does not ignore valid top-margin declarations. If this is happening with your book there must be something overriding it or some other error in the book's construction.

BobC

[exaltedwombat]

If you're trying to set up the common style of indenting all paragraphs but the first, is there any reason not to simply use:

p { text-indent: 0; margin: 0.5 em 0 0 0; }

p + p { text-indent: 1.7em; margin: 0; }

Though the margin-bottom setting of your h1 etc. style should take care of spacing above the first lines of a chapter or titled section.

[Notjohn]

Originally Posted by davidfor

Just looked at the preview on the Kobo store and desktop app. The store seems to be setting the top and bottom margins to zero. The desktop app looks pretty much the same as the above screen shots.

Thanks. That's certainly what I've been seeing, on all books, not just on my own.

I was somewhat surprised to find that Kobo doesn't seem to have a downloadable sample--not that it would do me a whole lot of good, since neither does it seem to have a desktop app for anything other than Windows 8!

[davidfor]

Originally Posted by Notjohn

I was somewhat surprised to find that Kobo doesn't seem to have a downloadable sample--not that it would do me a whole lot of good, since neither does it seem to have a desktop app for anything other than Windows 8!

Kobo do have preview samples. They are downloadable to their ereaders, iOS, Android and Win8 apps and their desktop applications. The desktop applications are available for Windows and Mac. For some reason there isn't a link to the desktop application on their apps page. It is at https://www.kobo.com/desktop.

[Notjohn]

Thank you! (Kobo certainly makes it difficult to get on board....) I have downloaded the desktop app an d several samples and find that, yes, unlike the online previews, they do obey margin-top. In fact, the books look very good indeed.