Sigil Centre Image confusion

[Perkin]

Originally Posted by JonDeus

where would i add it to .css?

Yes, add it in the img{} definition.


The big problem is the reader/viewer.

On the reader, if you have a huge image, can it be displayed full size, and can you scroll around it to view different parts? (zoom?)

Don't give the <img> tag any height/width assignments and it should be shown fullsize.

[JonDeus]

Hi Perkin,
I have been crash coursing in coding, so i finally realize where to add and why and been playing with experimenting a couple of things as far as device goes.

What I have gathered.
The Nook Color OS is based off of Adobe Digital Editions. and ADE doesn't have ability to zoom in or around and image. The Nook displays the image at default size, but then will align it according to your code and if you are centered, and your image exceeds the Nook Color screen size( W=600, H=800 169ppi) then whatever part of your image outside of screen size is off screen and there is currently no way i have found or read to scroll or zoom to see it. Luckily i have about 28px or both left and right that are border trim for panels, and on a full page spread, losing 8px on both sides isn't an issue.

I tried the " max-width: 100%; " which worked for the Nook on Android to fit image to width, but doesn't work good on actual Nook Color device.

I tried a " width: 618px; " and that seem to work.
But question i have is that if someone on another reader( i.e. ipad) has ability to zoom and scroll due to OS, will i be limiting them to NOT being able to enlarge image beyond 618px ?

One other thing is that i actually tested to see if i nook could read the epub if it didn't contain an ".xpgt "( ADE info, column info, etc.) file and it did open it.
I read somewhere not to remove it so if an reader worked off of ADE structure or something like that the epub would work better. But i wanted to test, and it does work w/o it.
Is this a good thing or bad to take it out?
Would you like to take a look at code i have now? I will post if you do.

still trying to finalize something that is acceptable to me, and so far i have a version that works for Nook color, so kinda happy.

thanks,

jg

[Perkin]

Originally Posted by JonDeus

I have been crash coursing in coding, so i finally realize where to add and why and been playing with experimenting a couple of things as far as device goes.

Good for you, more knowledge (usually) helps.

I tried the " max-width: 100%; " which worked for the Nook on Android to fit image to width, but doesn't work good on actual Nook Color device.

I tried a " width: 618px; " and that seem to work.
But question i have is that if someone on another reader( i.e. ipad) has ability to zoom and scroll due to OS, will i be limiting them to NOT being able to enlarge image beyond 618px ?

I think if you specify an exact size (px), then the image will always stay at that size regardless of view/zoom settings. Whereas if you use relative sizes(%) then it will change with view settings.

One other thing is that i actually tested to see if i nook could read the epub if it didn't contain an ".xpgt "( ADE info, column info, etc.) file and it did open it.
I read somewhere not to remove it so if an reader worked off of ADE structure or something like that the epub would work better. But i wanted to test, and it does work w/o it.
Is this a good thing or bad to take it out?

I've no idea, but I daresay most handmade epubs rarely contain the xpgt file.
Until more readers use the information in the file I don't think it will matter if it's missing.

Would you like to take a look at code i have now? I will post if you do.

still trying to finalize something that is acceptable to me, and so far i have a version that works for Nook color, so kinda happy.

As long as your happy with your results.

As you've discovered cross reader epub coding can be troublesome.
Especially if the ereaders from different generations, the amount of features can be considerable.

Does Nook show large images with zoom (actual file, not embedded in epub)?

[JonDeus]

Yes, Nook Color does support pinch zoom for single images loaded unto it. Which is weird
to me that it doesn't do it with an .epub file. I tested jpgs before even starting the epubs.

I think as Nook color OS evolves it will support what others do. I have submitted to Barnes and Noble features that other readers have that they should at least add to Nook OS as to stay up with competition. they said they were thankful for feedback....
whether or not it is added we'll have to see.

I have to try a few more things before I will be satisfied with the final epub.

[kawayama]

i didn't see anybody answering the original question (missed it?), but the reason Stanza won't center your images (or any text other that headlines) is that stanza own css supercedes the css in your epub.

you have to add the !important tag to your css to get stanza to pay attention:

div {text-align: center !important;}

otherwise stanza will just ignore most of your css.

[Jellby]

Originally Posted by kawayama

you have to add the !important tag to your css to get stanza to pay attention:

div {text-align: center !important;}

otherwise stanza will just ignore most of your css.

And that might "break" other readers that behave properly and let the user have custom CSS to override the book style...

[kawayama]

Originally Posted by Jellby

And that might "break" other readers

examples?

[Jellby]

I mean that a reader might allow the user to specify some custom CSS, but if you add "!important" to the book's CSS, that will override the custom CSS, thus "breaking" the reader's feature.

I don't know if there are any dedicated reader that allows this (it's certainly something I'd wish), but I believe the Calibre viewer does. Say, for instance, that I like my books justified, so I put in my custom CSS:

p {text-align: justify;}

and all is fine. Then comes an author that thought that his book looks better left aligned and added this to his book:

p {text-align: left;}

No problem for me, my custom CSS has higher priority, and I see the text justified anyway. Then comes another author who only tested the book in Stanza, and added (assuming Stanza needs this, which I don't know):

p {text-align: left !important;}

which is not overridden by my custom CSS, because that's what "!important" means, and I'm forced to see the text left-aligned.

[kawayama]

well, yes. that was the point. we wanted to "break" the reader feature. to get the image to center (in stanza) you have to override the custom css.

(assuming Stanza needs this, which I don't know)

stanza doesn't need this code, but the book designer perhaps feels he does – i know i do.
say you have a qouted passage in your book, and you want to put the author name underneath, aligned right. so you style it that way:

p.attr {text-align: right;}

which stanza happily ignores, and puts the author name to the left. so you have to tell stanza your ideas are more important than it's settings:

p.attr {text-align: right !important;}

[mshellberg]

mhikl-

I've seen the very same issue with image centering. My theory is that Stanza doesn't fully comply with epub specifications; though the previously mentioned reader css/priority/!important explanation is probably more accurate.

At any rate, I found that enclosing your <img /> tag with <h1></h1> tags causes Stanza to center the image. So my image references typically look like this:
<h1 class="sigilNotInTOC"><img src="../Images/ImageName.jpg" /></h1>

The "sigilNotInTOC" term keeps the image from showing up as an item in the table of contents.

Hope this helps.

-Matt