|
|
Thread Tools | Search this Thread |
09-20-2012, 11:58 PM | #1 |
Junior Member
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"> </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 |
09-21-2012, 02:54 AM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
Advert | |
|
09-21-2012, 04:53 AM | #3 |
Junior Member
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 |
09-21-2012, 05:42 AM | #4 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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).
|
09-21-2012, 07:09 AM | #5 |
Color me gone
Posts: 2,089
Karma: 1445295
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. |
Advert | |
|
09-21-2012, 07:17 AM | #6 |
Junior Member
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 |
09-21-2012, 08:14 AM | #7 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
09-21-2012, 09:09 AM | #8 | |
Well trained by Cats
Posts: 29,869
Karma: 55267620
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
So there are probably a LOT of 4bit e-Ink out there |
|
09-21-2012, 06:12 PM | #9 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
|
Quote:
|
|
09-21-2012, 06:24 PM | #10 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
|
Quote:
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 |
|
09-22-2012, 03:10 AM | #11 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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. |
09-22-2012, 10:24 AM | #12 | |
Well trained by Cats
Posts: 29,869
Karma: 55267620
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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 ) |
|
09-22-2012, 05:25 PM | #13 |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, 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. |
09-22-2012, 06:14 PM | #14 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
|
Quote:
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 06:26 PM. |
|
09-22-2012, 06:21 PM | #15 | |
Junior Member
Posts: 7
Karma: 10
Join Date: Sep 2012
Device: All Ereader Formats
|
Quote:
Thanks Again! Turk |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Removing background images from pdf to epub | maurelioc | Conversion | 6 | 03-30-2021 04:40 AM |
dimensions and resolution of background images in epubs | Derek R | ePub | 2 | 02-16-2012 04:44 PM |
a:hover .child - does not work properly on ADE | dieda1821 | ePub | 7 | 01-20-2011 02:53 PM |
Table is not resizing properly in case of images | mangalv | ePub | 0 | 11-14-2009 04:57 AM |
title page & background images | Nate the great | ePub | 13 | 07-28-2009 04:38 PM |