Sigil Centre Image confusion - Page 2

mhikl · 12-16-2010, 06:08 PM

Thanks for the great info, Hitch. I only like to read in Stanza. The iBook iStinks. I have been reading ebooks since the late 90’s using my Dad’s old Palms. I loved the m500 and then I bought the Palm TX which was my nirvana ereader until the touch came along.

If BV means Book View, that is where I live on Sigil. I can’t get my head round the cody stuff. And I tried the left of image to centre things (images and text) til my fingers bleed and still, on my touch gen 2, not one picture has ever come centred, no text centres, either – other than Headings, which seem only to centre. (At one time I thought one image did centre, but it turned out the picture was large and only looked centred.)
And about learning CSS, I think different (not necessarily in the Mac way). I have a very fuzzy logic mind that refuses to understand this stuff. I’ve cried rivers over this handicap, believe me. I get answers I can’t explain which drives my sig other crazy.

In Sigil, I’ve tried copying things and pasting things that centred other things and Sigil, like a patient nanny, puts everything back in perfect disorder. Gotta lover ‘er.

I sort of understand (my brain tries hard) that Sigil is not perfect WYSISYG, but, darn it all, visually it looks to be so and I am truly a visual artist (artist in my dreams at least).

I will look for Jutoh at some point but at the moment I am not at the point yet, to give up. Feisty is my birth rite, I’m afraid. Ain’t a thing I can do about it. It’s like trying to make a woman think like a man or a man think like a woman. Can’t change the genes. – Not everyone agrees in my house, but, no, I’m always in big trouble due to this disorder. Philistine (my better half) has told me so herself and “there’s to be no more quarrelling in this house I tell you”. (Not my words but I know them by heart.)

But I have a plan, Hitch. I have devised a dusty ebook Template, simple as can be. I am going to start a New Thread and begin posting there. I hope you will take a look and see if it is viable. Professor Sigil suggested I do so when I asked if there were templates to use to get the perfect book off.

Really appreciate your help.

And Toxaris and theducks, ye are flying way beyond my vision. I feel like Sebastion Dinwiddle in “Who’s on First?”

Namaste,
mhikl

I'll post the Template thread when I get back from walking Sadie.

Toxaris · 12-17-2010, 05:14 PM

Please post the xhtml-code for the image you try to center and the css code for the styles you mention in the code.

JonDeus · 02-14-2011, 03:01 AM

Can anyone tell me if this is a good page template?
Is there anything missing i would need for doing a graphics only book?

<?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>
<link href="../Styles/style001.xpgt" rel="stylesheet" type="text/css" />
<link href="../Styles/style002.css" rel="stylesheet" type="text/css" />

<title></title>
</head>

<body>
<div><img alt="cover" src="../Images/img0001.jpg" /></div>
</body>
</html>

Here is .css:

/* Style Sheet */
/* This defines styles and classes used in the book */
body { text-align: center; vertical-align: top; margin: 0 0 25px; padding: 0; border-style: none !important; border-width: 0; outline-style: none; outline-width: 0; white-space: nowrap; }
@page { margin: 0; padding: 0; border-width: 0; }
pre { font-size: x-small; }
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }
h4 { text-align: center; }
h5 { text-align: center; }
h6 { text-align: center; }
.CI {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.center {text-align: center;}
.smcap {font-variant: small-caps;}
.u {text-decoration: underline;}
.bold {font-weight: bold;}

I have an .xpgt file for styles also.

only issue i have, is that i am targeting Nook Color, and i noticed for android nook app the left and right side of image is getting cut off.
Also, Can someone tell me if what exactly does the 25px do in margin for .css file? i have palyed with taking it out to see difference, but nothing happened???

margin: 0 0 25px;

what are the 3 different 0 0 0px represent? and do i need 3 vs.: margin 0px; ?

thanks.

Perkin · 02-14-2011, 03:51 AM

From http://www.w3schools.com/css/css_margin.asp

Quote:

The margin property can have from one to four values.

* margin:25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

* margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

* margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px

* margin:25px;
o all four margins are 25px

Perkin · 02-14-2011, 03:56 AM

Quote:

Originally Posted by JonDeus

only issue i have, is that i am targeting Nook Color, and i noticed for android nook app the left and right side of image is getting cut off.

How is getting cut off, is it outside display area, or being clipped/cropped so not showing the full width of image, but there is blank area either side.
can you give an example, with dimensions of image included.

JonDeus · 02-14-2011, 04:48 AM

thanks for margin clarification.
The images are fitting vertical, but not horizontal. I think it has to do with the Nook app itself. I can't scale/pinch-zoom at all the image which is 800x618 169ppi.
I am working on a 1024x791 169 ppi.
The image/data is there, becasue i did a test of alignments, a test epub with 5 different alignments, 1 per page. and when it would shift the page to far right, you could see left side but then the right side pixel( about 1/8th the image was offscreen, but no way to slide/move page over to see, or enlarge.
This is way i believe it is the nook software.
Is there a way to code it to be able to zoom in even though software app might not be able to? I figured if Epic has the tough screen could it override Nook app for android???

does the coding look ok?
no extra stuff not needed? or missing?

thanks

Perkin · 02-14-2011, 05:15 AM

Coding seems allright, just depends on what else you want to do in file.

can you try
<div><img alt="cover" src="../Images/cover.jpeg" style="height: 100%" /></div>
or
<div><img alt="cover" src="../Images/cover.jpeg" style="width: 100%" /></div>

replacing your
<div><img alt="cover" src="../Images/cover.jpeg" /></div>

see if there's any difference in how the reader handles the images/zooming.

JonDeus · 02-14-2011, 05:47 AM

The width 100% works as in fits the image now to size of Android Epic screen.
I turned off animated page flip so to just slide pages form right to left, and can see that the actual page is being cropped by page break or something. so it is fitting it Vertically on other pages, but page one (that has width 1005 code added) is fitting horizontally and vertical is not taking up entire screen.
No zooming ability though. page appears to be locked down to auto fit and that's all.
Is there a way to say code an auto fit to a device screen( i.e. the width seems to work, and then a actual size not to exceed? because i tried it in nook for PC and when i went full screen it fit the width of course.
thanks.

Perkin · 02-14-2011, 07:52 AM

You might be able to do both width and height together.
remove style="...." from img tags, and in css add

img
{
height: 100%;
width: 100%;
}

Or you could do the css as
img
{
height: auto;
width: auto;
}

Jellby · 02-14-2011, 09:21 AM

Quote:

Originally Posted by Perkin

img
{
height: 100%;
width: 100%;
}

Be careful, that will not keep the aspect ratio of the image, but will stretch it to fill the whole area. You might try "max-width: 100%; max-height: 100%;" instead.

Perkin · 02-14-2011, 10:37 AM

I did mean to mention that about the ratio.
Thanks Jellby for pointing it out.

JonDeus · 02-14-2011, 10:19 PM

Quote:

Originally Posted by Jellby

Be careful, that will not keep the aspect ratio of the image, but will stretch it to fill the whole area. You might try "max-width: 100%; max-height: 100%;" instead.

Where would i add the:

"max-width: 100%; max-height: 100%;"

To the pages, or .css?

thanks.

JSWolf · 02-14-2011, 10:21 PM

Quote:

Originally Posted by JonDeus

Where would i add the:

"max-width: 100%; max-height: 100%;"

To the pages, or .css?

thanks.

That's wrong too. That will fill the screen. If the image when the maximum height is used is not too wide, then just use height="100%" Leave width out of this.

JonDeus · 02-14-2011, 10:33 PM

Quote:

Originally Posted by JSWolf

That's wrong too. That will fill the screen. If the image when the maximum height is used is not too wide, then just use height="100%" Leave width out of this.

I am using a 8.5x11 size that has been reduce to 800x618 at 169ppi.

So on the nook app for PC and Nook Color, if i target the Height, the left and right side are off screen. so that is why i was thinking about targeting the width.

Is there a way to fit the width to the window, and then make it so the image doesn't exceed the actual image size. so if someone makes app full screen, the image will center and stop width when it reaches max width?

where would i add it to .css?

JonDeus · 02-14-2011, 10:40 PM

Also,
Would anyone know if it is possible to add to code in .css or pages to give ability to show image a actual size. like a pinch-zoom/scaling?
This is what is happening:
On the Nook for Android, The image fits the width, but when i try to pinch zoom, nothing happens. even though Nook said it added this feature to the newest update.
So i am thinking is there a way to put the feature in the code so even if the App doesn't have it, the code will allow you to scale/pinch-zoom???

hope this makes since.

12-16-2010, 06:08 PM	#16
mhikl Enthusiast Posts: 29 Karma: 1764 Join Date: Nov 2010 Location: Canada Device: iPod touch	Thanks for the great info, Hitch. I only like to read in Stanza. The iBook iStinks. I have been reading ebooks since the late 90’s using my Dad’s old Palms. I loved the m500 and then I bought the Palm TX which was my nirvana ereader until the touch came along. If BV means Book View, that is where I live on Sigil. I can’t get my head round the cody stuff. And I tried the left of image to centre things (images and text) til my fingers bleed and still, on my touch gen 2, not one picture has ever come centred, no text centres, either – other than Headings, which seem only to centre. (At one time I thought one image did centre, but it turned out the picture was large and only looked centred.) And about learning CSS, I think different (not necessarily in the Mac way). I have a very fuzzy logic mind that refuses to understand this stuff. I’ve cried rivers over this handicap, believe me. I get answers I can’t explain which drives my sig other crazy. In Sigil, I’ve tried copying things and pasting things that centred other things and Sigil, like a patient nanny, puts everything back in perfect disorder. Gotta lover ‘er. I sort of understand (my brain tries hard) that Sigil is not perfect WYSISYG, but, darn it all, visually it looks to be so and I am truly a visual artist (artist in my dreams at least). I will look for Jutoh at some point but at the moment I am not at the point yet, to give up. Feisty is my birth rite, I’m afraid. Ain’t a thing I can do about it. It’s like trying to make a woman think like a man or a man think like a woman. Can’t change the genes. – Not everyone agrees in my house, but, no, I’m always in big trouble due to this disorder. Philistine (my better half) has told me so herself and “there’s to be no more quarrelling in this house I tell you”. (Not my words but I know them by heart.) But I have a plan, Hitch. I have devised a dusty ebook Template, simple as can be. I am going to start a New Thread and begin posting there. I hope you will take a look and see if it is viable. Professor Sigil suggested I do so when I asked if there were templates to use to get the perfect book off. Really appreciate your help. And Toxaris and theducks, ye are flying way beyond my vision. I feel like Sebastion Dinwiddle in “Who’s on First?” Namaste, mhikl I'll post the Template thread when I get back from walking Sadie. Last edited by mhikl; 12-16-2010 at 07:06 PM. Reason: typo

02-14-2011, 03:01 AM	#18
JonDeus HackJOB Posts: 17 Karma: 10 Join Date: Feb 2011 Device: Nook Color, iPad, Android(Epic), PC.	Can anyone tell me if this is a good page template? Is there anything missing i would need for doing a graphics only book? <?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> <link href="../Styles/style001.xpgt" rel="stylesheet" type="text/css" /> <link href="../Styles/style002.css" rel="stylesheet" type="text/css" /> <title></title> </head> <body> <div><img alt="cover" src="../Images/img0001.jpg" /></div> </body> </html> Here is .css: /* Style Sheet / / This defines styles and classes used in the book / body { text-align: center; vertical-align: top; margin: 0 0 25px; padding: 0; border-style: none !important; border-width: 0; outline-style: none; outline-width: 0; white-space: nowrap; } @page { margin: 0; padding: 0; border-width: 0; } pre { font-size: x-small; } h1 { text-align: center; } h2 { text-align: center; } h3 { text-align: center; } h4 { text-align: center; } h5 { text-align: center; } h6 { text-align: center; } .CI { text-align:center; margin-top:0px; margin-bottom:0px; padding:0px; } .center {text-align: center;} .smcap {font-variant: small-caps;} .u {text-decoration: underline;} .bold {font-weight: bold;} I have an .xpgt file for styles also. only issue i have, is that i am targeting Nook Color, and i noticed for android nook app the left and right side of image is getting cut off. Also, Can someone tell me if what exactly does the 25px do in margin for .css file? i have palyed with taking it out to see difference, but nothing happened??? margin: 0 0 25px; what are the 3 different 0 0 0px represent? and do i need 3 vs.: margin 0px; ? thanks. Last edited by JonDeus; 02-14-2011 at 03:18 AM.*

02-14-2011, 05:47 AM	#23
JonDeus HackJOB Posts: 17 Karma: 10 Join Date: Feb 2011 Device: Nook Color, iPad, Android(Epic), PC.	The width 100% works as in fits the image now to size of Android Epic screen. I turned off animated page flip so to just slide pages form right to left, and can see that the actual page is being cropped by page break or something. so it is fitting it Vertically on other pages, but page one (that has width 1005 code added) is fitting horizontally and vertical is not taking up entire screen. No zooming ability though. page appears to be locked down to auto fit and that's all. Is there a way to say code an auto fit to a device screen( i.e. the width seems to work, and then a actual size not to exceed? because i tried it in nook for PC and when i went full screen it fit the width of course. thanks. Last edited by JonDeus; 02-14-2011 at 05:47 AM. Reason: Added: Android Epic

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I centre a horizontal rule?	AlexBell	ePub	12	10-06-2010 03:09 AM
Where is the Canadian service centre for 302s?	guyanonymous	PocketBook	3	09-27-2010 03:37 PM
PRS-600 New Price, Sony Store Toronto Eaton Centre	edlauzon	Sony Reader	1	07-18-2010 10:22 AM
Comment créer un tableau centré dans un Ebook avec sigil ?	agronomia	Software	7	05-06-2010 06:26 AM
UK's Printed Electronics Technology Centre (PETEC) and the Flexible Display Centre (	Dulin's Books	News	0	02-18-2010 02:30 PM

12-17-2010, 05:14 PM	#17
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Please post the xhtml-code for the image you try to center and the css code for the styles you mention in the code.

02-14-2011, 04:48 AM	#21
JonDeus HackJOB Posts: 17 Karma: 10 Join Date: Feb 2011 Device: Nook Color, iPad, Android(Epic), PC.	thanks for margin clarification. The images are fitting vertical, but not horizontal. I think it has to do with the Nook app itself. I can't scale/pinch-zoom at all the image which is 800x618 169ppi. I am working on a 1024x791 169 ppi. The image/data is there, becasue i did a test of alignments, a test epub with 5 different alignments, 1 per page. and when it would shift the page to far right, you could see left side but then the right side pixel( about 1/8th the image was offscreen, but no way to slide/move page over to see, or enlarge. This is way i believe it is the nook software. Is there a way to code it to be able to zoom in even though software app might not be able to? I figured if Epic has the tough screen could it override Nook app for android??? does the coding look ok? no extra stuff not needed? or missing? thanks

02-14-2011, 05:15 AM	#22
Perkin Guru Posts: 655 Karma: 64171 Join Date: Sep 2010 Location: Kent, England, Sol 3, ZZ9 plural Z Alpha Device: Sony PRS-300, Kobo Aura HD, iPad (Marvin)	Coding seems allright, just depends on what else you want to do in file. can you try <div><img alt="cover" src="../Images/cover.jpeg" style="height: 100%" /></div> or <div><img alt="cover" src="../Images/cover.jpeg" style="width: 100%" /></div> replacing your <div><img alt="cover" src="../Images/cover.jpeg" /></div> see if there's any difference in how the reader handles the images/zooming.

02-14-2011, 07:52 AM	#24
Perkin Guru Posts: 655 Karma: 64171 Join Date: Sep 2010 Location: Kent, England, Sol 3, ZZ9 plural Z Alpha Device: Sony PRS-300, Kobo Aura HD, iPad (Marvin)	You might be able to do both width and height together. remove style="...." from img tags, and in css add img { height: 100%; width: 100%; } Or you could do the css as img { height: auto; width: auto; }

02-14-2011, 10:37 AM	#26
Perkin Guru Posts: 655 Karma: 64171 Join Date: Sep 2010 Location: Kent, England, Sol 3, ZZ9 plural Z Alpha Device: Sony PRS-300, Kobo Aura HD, iPad (Marvin)	I did mean to mention that about the ratio. Thanks Jellby for pointing it out.

02-14-2011, 10:40 PM	#30
JonDeus HackJOB Posts: 17 Karma: 10 Join Date: Feb 2011 Device: Nook Color, iPad, Android(Epic), PC.	Also, Would anyone know if it is possible to add to code in .css or pages to give ability to show image a actual size. like a pinch-zoom/scaling? This is what is happening: On the Nook for Android, The image fits the width, but when i try to pinch zoom, nothing happens. even though Nook said it added this feature to the newest update. So i am thinking is there a way to put the feature in the code so even if the App doesn't have it, the code will allow you to scale/pinch-zoom??? hope this makes since.

Advert

Advert