Images...etc. aren't centered on my eReader! Please Help!!!

Ephraim · 12-28-2010, 01:00 PM

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!

Hitch · 12-29-2010, 02:39 AM

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

Okay?

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

Ephraim · 12-29-2010, 03:18 PM

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">

Ephraim · 12-29-2010, 03:20 PM

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.

theducks · 12-29-2010, 04:28 PM

Quote:

Originally Posted by Ephraim

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.

Look at 's' (class) in the style sheet. that is wrapped around all your heading stuff. Margins r + l should be 0

Hitch · 12-29-2010, 06:22 PM

Quote:

Originally Posted by theducks

Look at 's' (class) in the style sheet. that is wrapped around all your heading stuff. Margins r + l should be 0

Actually--and maybe this is a Calibre thing--I don't see where those items are set to center in any event? Ducky?

Hitch

theducks · 12-29-2010, 07:50 PM

Quote:

Originally Posted by Hitch

Actually--and maybe this is a Calibre thing--I don't see where those items are set to center in any event? Ducky?

Hitch

Without the style sheet ???
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

Hitch · 12-29-2010, 08:16 PM

Quote:

Originally Posted by theducks

Without the style sheet ???
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

I think I'm going to stick to my Theraflu the next day or two and stay off the forums, because this thread and the other one are making me

, because I have no idea what's going on. I don't see bupkus for centering in Ephraim's code, so who the hell knows WHY it isn't working, as we don't have the ss....and who knows what "s" is? Or "none SGC-1?"

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

theducks · 12-29-2010, 11:58 PM

Quote:

Originally Posted by Hitch

I think I'm going to stick to my Theraflu the next day or two and stay off the forums, because this thread and the other one are making me

, because I have no idea what's going on. I don't see bupkus for centering in Ephraim's code, so who the hell knows WHY it isn't working, as we don't have the ss....and who knows what "s" is? Or "none SGC-1?"

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

s (s1,s2,s3) is a class used in a (monstrously long) stylesheet generated by some HTML 'prettier' that uses lots of divs and Spans

DMSmillie · 12-30-2010, 02:25 AM

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" />

There are multiple "layers" of formatting for each of the headings, etc, which are not aligning correctly, and you need to look at each of the styles that are being applied to see if there's a conflict.

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>

Without knowing what formatting these styles define, it's not possible to say what's causing the problem, Ephraim. You need to either attach the CSS style sheet or copy and paste the relevant styles if you need help in tracking down the problem with centering these elements.

Ephraim · 12-30-2010, 12:57 PM

Thanks for all the replies! I'll attach style sheet now.

Ephraim · 12-30-2010, 12:58 PM

@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
}

theducks · 12-30-2010, 01:19 PM

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

huebi · 12-31-2010, 02:21 AM

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.

Hitch · 01-03-2011, 02:54 AM

Quote:

Originally Posted by huebi

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.

No, we actually have a pretty good idea of what CSS iBooks ignores and what it doesn't; I think I recommended Liz Castro's excellent book on ePUBs, "Straight to the Point," in this or another thread, and her blog, Pigs, Gourds and Wikis, discusses epubs vis-a-vis iBooks at great length.

Hitch

12-28-2010, 01:00 PM	#1
Ephraim 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
Hitch 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 Okay? 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.

12-30-2010, 02:25 AM	#10
DMSmillie 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" /> There are multiple "layers" of formatting for each of the headings, etc, which are not aligning correctly, and you need to look at each of the styles that are being applied to see if there's a conflict. 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> Without knowing what formatting these styles define, it's not possible to say what's causing the problem, Ephraim. You need to either attach the CSS style sheet or copy and paste the relevant styles if you need help in tracking down the problem with centering these elements.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

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

12-29-2010, 03:18 PM	#3
Ephraim 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
Ephraim 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-30-2010, 12:57 PM	#11
Ephraim 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
Ephraim 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
theducks 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
huebi 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.

Advert

Advert