12-28-2010, 01:00 PM | #1 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Nov 2010
Device: ibooks
|
Images...etc. aren't centered on my eReader! Please Help!!!
I have an iPhone and I use iBooks. Here is my problem...I have converted with "Calibre" an epub and I'm trying to tweak it with "Sigil". Everything looks great in Sigil. But then when i convert over to iBooks all my Chapter headings,Chapter numbers and images are all offset to the left on my phone. And yes I have centered it up in Sigil.....It shows that is perfectly lined up. So I know that it must be in the code somewhere but I don't understand enough about code to figure it out on my own. What do I do to correct this? Thanks in advance!
|
12-29-2010, 02:39 AM | #2 |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Ephraim: iBooks has a notorious issue with ignoring centering, in that it does not recognize the "text-align" property. To make it work, you have to have a second element contained within the paragraph tags, for example a span. Then you assign the "text-align:center" to that particular paragraph element. IOW:
For centering to work in iBooks, you'd have to have something like: Code:
<p class="center"><span>This is the text</span></p> and in your css, you'd add "text-align:center;" to the css for p.center You might want to consider Liz Castro's very good book, EPUB Straight to the Point, which you can buy at her website in ePUB for, I think, less than $20.00. You would find it very helpful. Hitch Last edited by Hitch; 12-29-2010 at 02:40 AM. Reason: Added note about Castro's book. |
Advert | |
|
12-29-2010, 03:18 PM | #3 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Nov 2010
Device: ibooks
|
Thanks Hitch for you reply, I'm a little confused still. I'll post a little of my code and hopefully you can walk me through it.
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="http://calibre-ebook.com" name="generator" /> <title>unamed</title> <meta content="2008-6-23" name="creation-time" /> <meta content="2008-6-27" name="revision-time" /> <link href="../Styles/Style%20Sheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } span.sgc-1 {font-weight: bold} </style> </head> <body class="calibre"> <div class="s"> <p class="calibre2"></p> <h2 class="sigilNotInTOC" id="heading_id_2"><span class="none sgc-1">Chapter 1</span></h2> </div> <div class="s"> <p class="calibre2"></p> <h3 class="sigilNotInTOC" id="heading_id_3"><span class="none"><img alt="" src="../Images/SS-1.JPG" /></span></h3> <h3 id="heading_id_4"><span class="none sgc-1">The Boy Who Lived</span></h3> </div> <div class="s1"> |
12-29-2010, 03:20 PM | #4 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Nov 2010
Device: ibooks
|
Where I inserted "Chapter 1" and the "Image" and "The Boy Who Lived" is what always is offset to the left in my iPhone and iBooks. It is like this for each chapter. Everything else looks great. Text is perfect with indents...just the chapter number,image, and chapter title are wrong. Let me know if you need to see anything else.
|
12-29-2010, 04:28 PM | #5 | |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
|
|
Advert | |
|
12-29-2010, 06:22 PM | #6 |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
|
12-29-2010, 07:50 PM | #7 | |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
s may be centered or not. with or without margins none may be undoing things. Personally, I tend to do without DIV and a lot of the other cuft that makes it in. Set a body style set a (most used) Paragraph style Set P exceptions (first para...) Set a Heading style or a h.ch style set a few Span styles. Mostly done, except for images if used |
|
12-29-2010, 08:16 PM | #8 | |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
I left my crystal ball at home today, gang. Ephraim: we need to SEE the styling--the CSS--that is affecting the elements that are not centering, okay? Hitch |
|
12-29-2010, 11:58 PM | #9 | |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
|
|
12-30-2010, 02:25 AM | #10 |
Enquiring Mind
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
Ephraim - the formatting is all being handled through the use of CSS - in order to work out what is happening, we'd need to see the CSS style sheet referenced in this line:
Code:
<link href="../Styles/Style%20Sheet.css" rel="stylesheet" type="text/css" /> For example, the H2 heading "Chapter 1" has the styles "calibre", "s", "sigilNotInTOC", "none" and "sgc-1" all applied to it: Code:
<body class="calibre"> <div class="s"> <p class="calibre2"></p> <h2 class="sigilNotInTOC" id="heading_id_2"><span class="none sgc-1">Chapter 1</span></h2> </div> |
12-30-2010, 12:57 PM | #11 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Nov 2010
Device: ibooks
|
Thanks for all the replies! I'll attach style sheet now.
|
12-30-2010, 12:58 PM | #12 |
Enthusiast
Posts: 29
Karma: 10
Join Date: Nov 2010
Device: ibooks
|
@namespace h "http://www.w3.org/1999/xhtml";
.calibre { display: block; font-size: 1em; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; page-break-before: always } .calibre1 { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; text-indent: 1.5em } .calibre2 { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; text-indent: 1.5em } .calibre3 { display: block; page-break-after: always } .none { font-size: 1.41667em; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none } .none1 { font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none } .none2 { font-size: 0.75em; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none } .none3 { font-size: 0.75em; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none } .s { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; text-align: center; text-indent: 1.5em } .s1 { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; text-align: justify; text-indent: 1.5em } |
12-30-2010, 01:19 PM | #13 |
Well trained by Cats
Posts: 29,768
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Note that:
.s indents 1.5em and then centers .none makes text larger SGC-1 makes stuff inside the SPAN, bold The .calibre2 is used as a Vertical spacer paragraph style SGC styles (and the (TOC editor)flag-style sigilNotinTOC) Belong to Sigil SGC codes are PER file and are shown at the top. They may NOT be the same on every page. I suggest you validate the epub with flightcrew |
12-31-2010, 02:21 AM | #14 |
Zealot
Posts: 121
Karma: 5070
Join Date: Dec 2010
Device: none
|
Even with that we dont know how the transition epub->ibooks works, may be some of the css is taken out there. Or the browser does not understand some of the css rules. This problem might have nothing to do with sigil or with the epub format.
|
01-03-2011, 02:54 AM | #15 | |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
Hitch |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
"Chapter Titles & Images are not centered" | Ephraim | Sigil | 0 | 12-20-2010 05:08 PM |
.epub hyperlinks, centered and non indented text. | Xabache | ePub | 2 | 09-13-2010 01:11 PM |
Centered and right aligned text for Stanza on iPhone | Arjen | ePub | 6 | 06-17-2010 12:19 PM |
Paragraph indent-size should not applied to centered paragraphs? | ShellShock | Calibre | 3 | 01-16-2010 11:54 AM |
ereader PDB format and cover page images | Rootman | Calibre | 8 | 11-26-2009 12:21 PM |