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

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 09-21-2012, 12:58 AM   #1
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Altering HTML Script To Properly Display Background Images In ADE Ereaders.

I am in need of assistance in correcting some format errors. I'm new to this and have hit a bit of a wall on how to accomplish my goals. I'll try to include all relevant information without giving a bunch of trash to sort through. If you'll let me know what info I need to supply, I will try to provide it quickly.

I've created an Epub file in Sigil that contains background images with text on top of them. The images display properly in the Sigil viewer, Kindle Previewer, and Calibre Viewer. They do not display properly in the Nook Color or the Adobe Digital Edition Viewer. I know the Nook uses ADE and it displays the files differently for some reason, but I can't track down any information about how to account for the differences and correct them. Here's what they look like:

Sigil viewer showing text over image:
http://imgur.com/mnxZW
http://imgur.com/kZxTH

Nook for PC: image is not a background image:
http://imgur.com/SDV1g
http://imgur.com/Ud49I

1st pic:

span.sgc-3 {position:absolute;z-index:-2;margin-left:24px; margin-top:19px;width:664px;height:374px}

<p class="MsoNormal"><span class="sgc-3"><img alt="" height="374" src="../Images/image002.jpg" width="664" /></span></p>

2nd pic:

span.sgc-7 {position:absolute;z-index:-1;left:0px; margin-left:180px;margin-top:0px;width:307px;height:453px}

<p class="MsoNormal sgc-2">10.<span class="sgc-4">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="sgc-6">Run to the southwest of Polo to find the crafting area and complete 2 craft quests.</span><span class="sgc-7"><img alt="" height="453" src="../Images/image004.jpg" width="307" /></span></p>

The negative Z value in Sigil puts the image in the background for all ereaders that aren't ADE. I'm not sure how to fix this problem and 2 days of my poorly performed Google-Fu has not revealed any answers.

If someone could point me in the right direction, or has a epub file that shows how to put the background image in correctly, I would really appreciate it.

Thanks,

Turk
Turk.Turkleton is offline   Reply With Quote
Old 09-21-2012, 03:54 AM   #2
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: 3,097
Karma: 5658305
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
If I remember correctly, z-index is not supported in ePUB2. Therefore it should not work on all ePUB2 readers. You might try the CSS property background-image. I don't know if that will work (haven't used it myself), but I think it should.
Toxaris is offline   Reply With Quote
 
Advertisement
Old 09-21-2012, 05:53 AM   #3
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Thank you for replying. I'm just figuring these things out so any information is good information.

I'll look into the Epub2 idea. I didn't know there was a different Epub format so I'll probably have a thousand more questions.

Thanks,

Turk
Turk.Turkleton is offline   Reply With Quote
Old 09-21-2012, 06:42 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: 3,097
Karma: 5658305
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
The specifications for the ePUB format is created by the IDPF. At the moment there are two versions, 2 and 3. Version 2 is the most used version by far. Version 3 adds a lot of functionality, but is hardly used (outside iBooks).
Toxaris is offline   Reply With Quote
Old 09-21-2012, 08:09 AM   #5
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.
mrmikel is offline   Reply With Quote
Old 09-21-2012, 08:17 AM   #6
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
You definitely put on the right path, thank you for that.

I started altering the searches I was doing and was able to determine that this is much closer to the effect I was going for, and it looks the same in Nook for PC viewer as it does in the calibre viewer:

body
{
background-image:url('../Images/image002.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

The only problem with this is that it puts the image on every page of the ebook. My brain is fried at the moment, I'll have to begin anew later, but, I kinda/sorta know which direction to head now.

I'll look into the IDPF that you mentioned, but I'm wondering if I can just create some sort of command line that will let me drop the image anywhere in the epub one time and not have it repeat on every page, just the pages I wanted to put it into.

I have no idea if that would be faster or not, I have quite a few different images I would like to drop into the background.

I hope that makes sense, I'm too tired to think about at the moment.

Thanks Again!

Turk
Turk.Turkleton is offline   Reply With Quote
Old 09-21-2012, 09:14 AM   #7
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: 3,097
Karma: 5658305
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
That is possible. You define a new background image in each new HTML file. If you want the image to differ between pages, you need to limit the pages to a new HTML file.
Toxaris is offline   Reply With Quote
Old 09-21-2012, 10:09 AM   #8
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: 15,086
Karma: 5939999
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by mrmikel View Post
Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.
Hanlin V3's were 4 shades (still being made when I bought my V5), the V3+ caught up
So there are probably a LOT of 4bit e-Ink out there
theducks is offline   Reply With Quote
Old 09-21-2012, 07:12 PM   #9
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Quote:
Originally Posted by mrmikel View Post
Even if you succeed, what you are trying to accomplish will not be very useable on most e-ink readers. They can display, if memory serves, 16 shades of gray.

Computers can generally display 16.7 million colors. Apparently ipads are similar. So it will be much more useable on these devices.
Thanks for the tip, I'll look into which ones I can use with color and see if I can turn the rest into a more black and white friendly format.
Turk.Turkleton is offline   Reply With Quote
Old 09-21-2012, 07:24 PM   #10
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Quote:
Originally Posted by Toxaris View Post
That is possible. You define a new background image in each new HTML file. If you want the image to differ between pages, you need to limit the pages to a new HTML file.
I'm not sure what you mean when you say "new HTML file". Here is a tutorial I found and was reading last night after you told me what to look for:

Create Rich Layer Publicationshttp://www.ibm.com/developerworks/we...pub/index.html

This tutorial provides this script (is "script" the right term?):

div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;

When you say "New HTML" are you meaning a whole new epub file and then combining a bunch of epubs into one larger epub, or adding a 2nd pic similar to the way this tutorial does with the "url('childrens-book-flowers.jpg')" line?

Sorry for my ignorance,

Turk
Turk.Turkleton is offline   Reply With Quote
Old 09-22-2012, 04:10 AM   #11
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: 3,097
Karma: 5658305
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
No. An epub is a collection of one or more xhtml files and accompanied files. Each xhtml file will start on a new page. Usually a chapter is a xhtml file.

An epub is a zip file.
Toxaris is offline   Reply With Quote
Old 09-22-2012, 11:24 AM   #12
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: 15,086
Karma: 5939999
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by Turk.Turkleton View Post
I'm not sure what you mean when you say "new HTML file". Here is a tutorial I found and was reading last night after you told me what to look for:

Create Rich Layer Publicationshttp://www.ibm.com/developerworks/we...pub/index.html

This tutorial provides this script (is "script" the right term?):

div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;

When you say "New HTML" are you meaning a whole new epub file and then combining a bunch of epubs into one larger epub, or adding a 2nd pic similar to the way this tutorial does with the "url('childrens-book-flowers.jpg')" line?

Sorry for my ignorance,

Turk
Note: That document is discussing EPUB3
Most of our devices are still using (Stuck at forever) EPUB2. If you are making an EPUB3 (Sigil is currently creating EPUB2), you are going to be ignoring a lot of consumers )
theducks is offline   Reply With Quote
Old 09-22-2012, 06:25 PM   #13
Tex2002ans
Fanatic
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 530
Karma: 562971
Join Date: Jul 2012
Device: Nook
Do you have any previous knowledge of HTML/CSS?

Is there any specific reason you are choosing to use the EPUB format?

Is there any specific reason you are using Sigil to create this document?

What devices do you plan on having this document read on?

Perhaps you are using the wrong format and the wrong tools for the job.
Tex2002ans is offline   Reply With Quote
Old 09-22-2012, 07:14 PM   #14
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Quote:
Originally Posted by Tex2002ans View Post
Do you have any previous knowledge of HTML/CSS?

Is there any specific reason you are choosing to use the EPUB format?

Is there any specific reason you are using Sigil to create this document?

What devices do you plan on having this document read on?

Perhaps you are using the wrong format and the wrong tools for the job.
1. I've taken 1 class in college that covered the basics, but I've not had anything I would call "real" experience with HTML/CSS and I'm trying to learn as I go.

2. I'm using Epub because I thought it was one style all Ereaders could use. I've learned quite a bit over the past couple of days and I'll have to figure out where to go from here.

3. Sigil seemed like the best free resource to create Epub.

4. I would like to have it readable on any of the popular Ereaders. Nook, Nook Color, Kindle, Kindle Fire, and the Ipad. I would like to create professional looking ebooks for some Ideas I've had that are very heavy on images and not just text and format that normal ebook tutorials illustrate.

5. With these answers which tools would you suggest?

Thanks!

Turk

Last edited by Turk.Turkleton; 09-22-2012 at 07:26 PM.
Turk.Turkleton is offline   Reply With Quote
Old 09-22-2012, 07:21 PM   #15
Turk.Turkleton
Junior Member
Turk.Turkleton began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
Quote:
Originally Posted by Toxaris View Post
No. An epub is a collection of one or more xhtml files and accompanied files. Each xhtml file will start on a new page. Usually a chapter is a xhtml file.

An epub is a zip file.
Thanks for the clarification. I'll see if I can figure it out in Sigil, there have been a lot of websites that mention using chapters, I'll go back over everything I've found and see what I can create.

Thanks Again!

Turk
Turk.Turkleton is offline   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
dimensions and resolution of background images in epubs Derek R ePub 2 02-16-2012 05:44 PM
Removing background images from pdf to epub maurelioc Conversion 5 04-29-2011 12:32 PM
a:hover .child - does not work properly on ADE dieda1821 ePub 7 01-20-2011 03:53 PM
Table is not resizing properly in case of images mangalv ePub 0 11-14-2009 05:57 AM
title page & background images Nate the great ePub 13 07-28-2009 05:38 PM


All times are GMT -4. The time now is 02:54 AM.


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