Different ePub displays in iReader/Sigil and Bluefire

[beastvold]

I'm working on a gamebook for an eReader, and am noticing significant differences between what I see in Sigil and what is displayed in my Bluefire Reader. iReader displays everything beautifully, but Bluefire displays all the text clumped together, unordered lists start with a solid bullet but continues with white bullets, and links within custom tables do not allow navigation. I'm guessing this is an issue with the CSS I created for the document?

My process: I wrote the text in Microsoft Word, converted it to clean HTML, cleaned it up further in Dreamweaver, and am now organizing it as best I can with Sigil. (This is my first time working extensively with XML and ePubs, so I'm sure I'm making mistakes somewhere...)

Here is some relevant code from my CSS file:

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
	margin:1;
	padding:0;
	border-width:thin;
}

table {
	border-collapse:collapse;
}

.Heading3 {
	font-style: italic;
	font-weight: bold;
	text-align: left;
	font-size: larger;
}

.TableSJ {
	margin-top: 4px;
	margin-bottom: -4px;
	border-width: thin;
	border-style: solid;
	border-top-color: #000;
}

.CenteredChoice {
	text-align: center;
}

Below is an example of basic text within paragraph tags, but Bluefire displays these without any spacing between <p> tags or headings, and all text is clumped together making the document rather difficult to read.

At the same time, Bluefire seems to pick and choose from the CSS. The Heading3 class I created displays correctly, while the <p> tag doesn't take on the required attributes.

  <p>When mining your claim, follow the instructions on the roll table as described in the eBook. The roll table goes up to 10+, so use your bonuses to maximize your gold; the higher you roll, the more gold you receive.</p>

  <p class="Heading3">Teamwork and Trading</p>

  <p>You will find that you may be able to progress further with the help of other players. All gold, destiny cards (except fate cards), and mining bonus cards are tradable. Agreements between players are not binding, so beware of the double-cross!</p>

One more example of a table in which I am embedding links to other parts of the document. I can't click within the table on Bluefire, but within Sigil and iReader it works perfectly.

  <p class="CenteredChoice">Enter the Chapter Marker number indicated on the Epic Track:</p>

  <table align="center" border="0" cellpadding="4" cellspacing="10" class="TableSJ" width="80%">
    <tr>
      <td>
        <p class="BodyLink"><a href="EpicStoryEvents.html#1x">1</a></p>
      </td>

      <td>
        <p class="BodyLink"><a href="EpicStoryEvents.html#2x">2</a></p>
      </td>

      <td>
        <p class="BodyLink"><a href="EpicStoryEvents.html#3x">3</a></p>
      </td>
    </tr>
</table>

Thank you for your help!

[JSWolf]

It would actually help to post a sample ePub that shows these issues.

[beastvold]

Here is my most recent version of the ePub document. It's not completely finished, so the "Epic Story Events" are missing links.

Thanks!

[Toxaris]

Originally Posted by beastvold

Below is an example of basic text within paragraph tags, but Bluefire displays these without any spacing between <p> tags or headings, and all text is clumped together making the document rather difficult to read.

At least that makes sense. If you make margins very small for both <p> tags and headers, why should there be spacing between them? Why not use real header tags?

Also, what is the effect that you want?

You can use the inspector in Sigil (as you indicate using that) to see how text is styles and what attributes are applied.

If you use Sigil, your links are not correct. The links should probably look like: "../Text/EpicStoryEvents.html#x1"

[beastvold]

In all honesty, I am copying the style of someone else's ebook (and maybe they don't know what they are doing either!). The author I'm mimicking used <p> tags combined with classes for almost all text in the ebook - even headings and special formatted text.

I'm unclear of how margins and padding affects <p> tags.

What I'm aiming for... All paragraphs and headings are self-contained (normal spacing between lines within the paragraph), but all individual paragraphs and headings have a double space between them. (Much like the way I'm writing this response.) Is that a margin/padding issue, or is there something else I'm missing?

And could that be why my links within tables aren't working? The margins or padding is too small?

Finally, what are normal margin and padding values for the format I suggested above? Should I use literal number values in pixels, or should I use percentage values to accommodate various different ebook readers?

Thank you for your help!

[DomesticExtremis]

Originally Posted by beastvold

I'm unclear of how margins and padding affects <p> tags.

Read this.

[theducks]

Originally Posted by DomesticExtremis

Read this.

Exactly

Wrapping your head around the box model allows all sorts of fun things (if you device does not override 'Publishers styles' )

Remember ( ) you can work with each (margin,border,padding) individually (top, right, bottom, left) for some fun effects

Margin: the distance to the Border

Border: may be invisible or have thickness (style and color)

Padding: space from the border to the text or image and can be background colored


The example (chapter number) on Sigils page https://code.google.com/p/sigil/ makes fairly simple use of the Box model (book from feedbooks.com)

[JSWolf]

To be honest, just get your ePub displaying how you want in ADE and you'll be fine for most Readers out there that display ePub. The others if they don't work right are an issue with the software.

[beastvold]

Thanks everyone for your help. I think I figured out the margins issue. In my CSS, I set the margins to 15 for all <p> tags. That set some space between each new paragraph, making it easier to read. I hope that is OK to do, to set a literal number (instead of a relative variable - like "thin" or "thick") as the margin.

However, I'm still having a couple other problems:

1) My unordered lists are still formatted strangely. The first element in the bulleted list starts with a solid black bullet point, but all the rest of the listed items begin with an open (white) bullet point. (Yet all items are on the same level, no indentation.) The bulleted list looks find in Sigil and iReader, but it displays strangely in Bluefire Reader and ADE. You can see an example of this in my "Instructions" section of the epub file I uploaded above.

2) I have tables that contain linked numbers, allowing the reader to make a selection that leads them to another part of the story/game. My table is a standard <table>/<tr>/<td> format, with 4 rows of 3, and hyperlinked numbers (0-9) within the cells. Again, in Sigil and iReader, this works as expected, but in Bluefire and ADE, the table displays left-justified (instead of centered), and the linked numbers are unclickable. You can see an example of this in my "Twisted Tales" section of the epub file.

Thank you for your help!

Ben

[beastvold]

Update:

1. After working for a few hours, I solved my first question. I had to put the following in my CSS sheet:

ul {
	list-item-type:circle;
}

The default list-item-type is "disc," and I still don't know why it was changing the bullet point graphic after the first item. So, I just changed the type to "circle" and everything works great.

2. I'm still trying to figure out my tables issue. I did discover that I was using deprecated code, assigning "align," "cellpadding," and "cellspacing" attributes in my <table> tag. I took these out and updated my CSS to the following, but I'm still running into the exact same problem.

.TableSJ {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
   margin-top: 5px;
   margin-bottom: 5px;
   border-width: thin;
   border-style: solid;
   border-top-color: #000;
}

td, th {
	border-style:solid;
	border-width:1px;
	border-collapse:collapse;
	padding:10px;
}

table {
	border-collapse:collapse;
}

Does this look right? I must still be missing something...

I've also attached the latest version of my epub. You can see the table with the problem in the "Twisted Tales" section of the epub.

Thanks!

[DomesticExtremis]

Couple of things:
i) at rules need to be at the top of the stylesheet, before any normal rules (IIRC)
ii) have you tried wrapping the whole table in a div with text-align: center; ?

[dgatwood]

Originally Posted by DomesticExtremis

Couple of things:
i) at rules need to be at the top of the stylesheet, before any normal rules (IIRC)
ii) have you tried wrapping the whole table in a div with text-align: center; ?

Any @import rules must be at the top, if you use them. But that's not true for any other at rules, and in fact, most folks put @font rules at the bottom of the stylesheet to keep them out of their way.

With that said, ADE sometimes barfs on certain @ rules. If you encounter that behavior, try moving them to a separate CSS file so that ADE's parsing failure won't cause the rest of your CSS to be ignored.

Also, in the copy of the EPUB book that I looked at, the jump links did nothing because the destination didn't exist (or at least not in the same file—remember that it's just like a website—a link without a URL part links elsewhere in the same HTML/XHTML file, not to arbitrary parts of the book as a whole). I'm assuming you've fixed that?

[JSWolf]

Originally Posted by dgatwood

Any @import rules must be at the top, if you use them. But that's not true for any other at rules, and in fact, most folks put @font rules at the bottom of the stylesheet to keep them out of their way.

With that said, ADE sometimes barfs on certain @ rules. If you encounter that behavior, try moving them to a separate CSS file so that ADE's parsing failure won't cause the rest of your CSS to be ignored.

Also, in the copy of the EPUB book that I looked at, the jump links did nothing because the destination didn't exist (or at least not in the same file—remember that it's just like a website—a link without a URL part links elsewhere in the same HTML/XHTML file, not to arbitrary parts of the book as a whole). I'm assuming you've fixed that?

I've seen a lot of publishers put the @font in the middle of the CSS. I put the @font at the top as it's easy to just scroll past and ignore. After the @font section comes body and then p.

[odedta]

@JSWolf: That's a CSS3 rule isn't it?
Correct me if i'm wrong, devices that don't support CSS3 will ignore the entire file if it "has errors" such as font-face rules or media queries. So, it's best practice to put them in a separate stylesheet.

[Toxaris]

@font-face is fully supported in ePUB2. It is one of the exceptions that is supported.