Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 08-26-2014, 10:46 PM   #1
beastvold
Junior Member
beastvold began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Aug 2014
Location: Sacramento, CA
Device: iPhone
Different ePub displays in iReader/Sigil and Bluefire

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:

Code:
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.

Code:
  <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.

Code:
  <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!
beastvold is offline   Reply With Quote
Old 08-26-2014, 10:51 PM   #2
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,278
Karma: 18149666
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
It would actually help to post a sample ePub that shows these issues.
JSWolf is offline   Reply With Quote
Old 08-26-2014, 11:14 PM   #3
beastvold
Junior Member
beastvold began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Aug 2014
Location: Sacramento, CA
Device: iPhone
Here is my most recent version of the ePub document. It's not completely finished, so the "Epic Story Events" are missing links.

Thanks!
Attached Files
File Type: epub Gold Rush - 7 - Epub Final.epub (117.8 KB, 17 views)
beastvold is offline   Reply With Quote
Old 08-27-2014, 05:44 AM   #4
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,969
Karma: 3427611
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by beastvold View Post
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"
Toxaris is online now   Reply With Quote
Old 08-28-2014, 12:12 AM   #5
beastvold
Junior Member
beastvold began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Aug 2014
Location: Sacramento, CA
Device: iPhone
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!
beastvold is offline   Reply With Quote
Old 08-28-2014, 12:34 PM   #6
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 155
Karma: 319628
Join Date: Nov 2012
Device: default
Quote:
Originally Posted by beastvold View Post

I'm unclear of how margins and padding affects <p> tags.
Read this.
DomesticExtremis is online now   Reply With Quote
Old 08-28-2014, 12:50 PM   #7
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,699
Karma: 5643643
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by DomesticExtremis View Post
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)

Last edited by theducks; 08-28-2014 at 12:51 PM. Reason: fixed order
theducks is offline   Reply With Quote
Old 08-28-2014, 02:55 PM   #8
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,278
Karma: 18149666
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
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.
JSWolf is offline   Reply With Quote
Old 08-30-2014, 05:12 PM   #9
beastvold
Junior Member
beastvold began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Aug 2014
Location: Sacramento, CA
Device: iPhone
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 is offline   Reply With Quote
Old 08-30-2014, 07:25 PM   #10
beastvold
Junior Member
beastvold began at the beginning.
 
Posts: 5
Karma: 10
Join Date: Aug 2014
Location: Sacramento, CA
Device: iPhone
Update:

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

Code:
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.

Code:
.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!
Attached Files
File Type: epub Gold Rush - 8 - Epub Final.epub (89.7 KB, 12 views)
beastvold is offline   Reply With Quote
Old 08-30-2014, 07:50 PM   #11
DomesticExtremis
Groupie
DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.DomesticExtremis ought to be getting tired of karma fortunes by now.
 
DomesticExtremis's Avatar
 
Posts: 155
Karma: 319628
Join Date: Nov 2012
Device: default
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; ?
DomesticExtremis is online now   Reply With Quote
Old 09-04-2014, 03:21 AM   #12
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 289
Karma: 556004
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by DomesticExtremis View Post
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?
dgatwood is offline   Reply With Quote
Old 09-04-2014, 10:06 AM   #13
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 37,278
Karma: 18149666
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by dgatwood View Post
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.

Last edited by JSWolf; 09-09-2014 at 12:52 PM.
JSWolf is offline   Reply With Quote
Old 09-07-2014, 01:03 AM   #14
odedta
Addict
odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.odedta put the bomp in the bomp-a-bomp-a-bomp.
 
Posts: 232
Karma: 67890
Join Date: Dec 2013
Device: iPad
@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.

Last edited by odedta; 09-07-2014 at 01:05 AM.
odedta is offline   Reply With Quote
Old 09-07-2014, 02:37 AM   #15
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,969
Karma: 3427611
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
@font-face is fully supported in ePUB2. It is one of the exceptions that is supported.
Toxaris is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Epub crashes on Sigil for Mac, OK on Sigil for PC crystamichelle Sigil 6 08-14-2013 02:52 PM
PDF->EPUB only displays 'Front section' bsmart Conversion 2 05-14-2011 05:44 AM
epub to mobi - Displays Html tags stevec1409 Conversion 7 02-14-2011 03:41 PM
error message on ireader curlyhairgirl Introduce Yourself 5 01-09-2011 04:39 AM
Apple's iReader Launch thymaster General Discussions 14 09-07-2010 12:41 PM


All times are GMT -4. The time now is 08:47 AM.


MobileRead.com is a privately owned, operated and funded community.