Svg wrapper and image resizing

[Nabodita]

Thanks to all for the replies.

I've finally figured out that I can't take an image of a particular size and expect it to fill the screen both horizontally and vertically which is what I was trying to do. Failing that, I was trying to center the image on the screen.

Toxaris is right; the auto margins don't work.

Had taken a break from this section of my research. Will post updates as and when.

[odedta]

Great! thanks for the info!

[GrannyGrump]

@Nabodita -- something that sometimes helps to soften the shock of the white borders around a COVER image is to set a background color for THAT page that blends well with the main color of the image. For example, using your screenshot, you could use a shade of gold.

body {background-color: #FFD700}
or
body {background-color: gold} if you use one of the defined color names in the html color chart.

If your cover design looks well with a border, this background color trick works even better.

Of course, this would not work for images set inside text pages, unfortunately.

[Hitch]

Originally Posted by GrannyGrump

@Nabodita -- something that sometimes helps to soften the shock of the white borders around a COVER image is to set a background color for THAT page that blends well with the main color of the image. For example, using your screenshot, you could use a shade of gold.

<snip CSS examples>

...and, of course, what would REALLY soften the shock would be the realization that not 1 person out of 100 ever looks at the cover of an ebook after it's been purchased and downloaded from the e-store (proof positive: ask all the Dresden Files fans here on MR about how many Harries were shipped WITH a cover AT ALL for the ebooks, for ages...); what matters are the catalog covers (what's shown on Amazon, B&N, KoboBooks and iTunes), and to a lesser degree, how the cover image displays on the virtual bookshelves on the purchaser's device. 99% of all ebooks open to the Title page or the TOC, or the "text" set-location (as set in the Guide). I'd kill to have access to Amazon's usage data, but I'd bet a chunk of income that my numbers are right--that not 1 in 100 pages back to the cover.

I grossly underestimated the importance of covers, as sales inducements, before I got into the biz--but Creative grossly overestimates the importance of the covers once the sale is made.

The iBooks' glitch with centering has been known for a good 3 or 4 years now. For plain old alignment web CSS does not work. For it to work, as has been mentioned here (for everything: text, images, whatever), you have to wrap the element to be centered in an empty something, whether that's a span or a div. Auto-margins don't work on a massive number of devices. Rubén's solution of the incorrect table suggestion does, as he states, work on iBooks and the KF8 devices, but dies on KF7.

So, to date, the oldie-but-goodie is still the safest; wrap it, whatever "it" is, in an empty span (or div, or whatever is suitable) and then center that. You'll have to take it up with iBooks, followed by the IDPF, which is currently playing footsie with worrying about crap like ePUBDUB, or whatever it's called, instead of trying to get ANY type of standarized compliance, or, hell, even specs, for ePUB3.

I've noted, over the years, that "getting" aspect ratio, sizing, and device aspect ratios seems to be really hard for people...that there's no CSS for "Gumby." I think I should create a new media query, the "Gumby" query: automagically make this 3:4 image fit this 1:1.7 screen, or vice-versa, sans distortion. But for reasons that elude me, that never works. ;-) Seriously, I must explain this...hell, at least 3x a week, if not more.

That, and the "no, that ginormous, 3-column book you made at Blurb is NOT GOING TO LOOK EXACTLY THE SAME when it's made into a reflowable book," discussion. I wish I could come up with some simple, elegant demonstration that in a 15-second video could explain a) why a cover of a certain size won't magically fit ALL devices, and b) why that 10" x 15" book that has 3-columns and images floating next to text, etc, can't be CRAMMED into 17 square inches of space for a regular ebook screen and still be readable. I've tried to think of everything: 20lbs. of flour pouring into a 5lb. tin; water into a glass, etc., but...something about people and what's happened with webpage, with panning/zooming, javascript...man. They just CANNOT GET IT. It's my biggest frustration. (Okay, I'm a big liar. It's merely ONE of my biggest frustrations. I have a list, but it's getting so long that it's starting to look like Santa's list, stretching from my desk, over the device table, down to the floor, across the 10' to my office door, under the door...the Booknook cats are starting to think it's a python that they can play with. Yes, I'm keeping the list by hand. A list of WHO'S NAUGHTY AND WHO'S NICE, just so you've all been warned....)

ARRGGUGHGHGH. This work is making me .

Hitch

[Tex2002ans]

Originally Posted by Hitch

...and, of course, what would REALLY soften the shock would be the realization that not 1 person out of 100 ever looks at the cover of an ebook after it's been purchased and downloaded from the e-store [...]

I will say I am one who loves the covers every time you mention this (and that I despise when they are low resolution or generic crap)!

Originally Posted by Hitch

The iBooks' glitch with centering has been known for a good 3 or 4 years now. For plain old alignment web CSS does not work. For it to work, as has been mentioned here (for everything: text, images, whatever), you have to wrap the element to be centered in an empty something, whether that's a span or a div.

Eh? Wasn't that bug fixed a while back? I could have sworn I read on a bunch of comments that the empty <span> "workaround" was obsolete and not needed any more.

I don't have anything iBooks related, so I never tested it personally, but I believe I would have heard complaints by now. Ugh... iBooks makes me very angry.

Originally Posted by Hitch

I wish I could come up with some simple, elegant demonstration that in a 15-second video could explain a) why a cover of a certain size won't magically fit ALL devices, and b) why that 10" x 15" book that has 3-columns and images floating next to text, etc, can't be CRAMMED into 17 square inches of space for a regular ebook screen and still be readable.

Hmmmm... I always enjoyed the videos showing off the differences between Fullscreen/Widescreen shots, or explanations about the different definitions of TV/Movie/Video. Perhaps you might find a super short video/dumbed down explanation of those concepts?

Although they will probably turn right around and say "yeah, but that is TV/Movies/Videos... that isn't about BOOKS AND BOOK COVERS".

Reminds me a lot about people who use overscan on their TVs, because they "hate the bars and want the image to fill the screen". But they are degrading the picture by tossing out ~5% of the data, and who knows what the gods damn software is doing to all the pixels that it now has to "resize" to fit on the screen! Instead of being a 1:1 pixel ratio, now it is all skewed! Makes me want to pull my hair out!

[mrmikel]

On my tv there is a justify setting that makes it almost normal in the middle, and fiddles at the edges. But watching the Dallas Cowboys Cheerleaders in it makes you think you are watching an ad for a weight loss clinic because of the distortion!

A PDF of a book is a pretty good example, since it can be displayed on most readers. The person looking should see how things disappear into microscopic type and get the picture...I hope.

[theducks]

Don't (really) get me started on dust jackets and covers on paper books.
<rant>
Books you can't tell the difference between, because:

They all use the same color scheme and little else different besides the words in the title on the spine. Not all books are shelved FACE OUT
Note that ACE used the Yellow and Red/Black scheme BUT they frequently varied the FONT


The Author Name is most prominent on the spine. Gee, I am in the 'J' section, I think I can find the 'Jones' books


The top (1/3) portion taken up with only Logos/Author name/Series. Anything but the Title. This really works well when displaying books (face out) on a tiered (overlap) rack display

</rant>

Covers DO sell Books
Spines allow books to be selected from your shelves (Yea! IKEA Billy )
Cover images do allow for the same kind of E-book selection that is not just limited to the initial Sales event.

[eschwartz]

On behalf of the Dresden Files fans, I officially noticed this a lot.

Perhaps because it is a lot more noticable in calibre, which does not automagically know to use the Kindle's thumbnails data (or other vendor solution) but gets the cover -- gasp -- from the book file! So you have to download metadata and fix it yourself or the bookshelf display when you send to device will be horrible. Not the biggest deal to download and fix ( calibre) but that was the publishers' job dammit.

On the rare opportunities that I have touched ADE with my ten-foot-pole, books without covers alway display that stupid penguin/other publisher garbage on the bookshelf. How any people are not calibre initiates but use ADE, again? And the bother of doing this for a time-limited library book is indescribable... I hate ADE.

I guess since only 1 in 100 ebook readers do anything more complicated than click the buy button from within a reader app/device, you are right, hitch. But past there it breaks down. And apparently ADE desn't have any cover workaround, which should work marvelously when sideloading books the official way through ADE -- though I assume Kobo/B&N/Sony do and of course the Apple design team would have a heart attack if the look of a book was messed up.

[Hitch]

Originally Posted by theducks

</rant>

Covers DO sell Books
Spines allow books to be selected from your shelves (Yea! IKEA Billy )
Cover images do allow for the same kind of E-book selection that is not just limited to the initial Sales event.

I agree, 100%, that covers, ABSO-lutely, sell books. That's my entire point; they are akin to movie posters in this day and age. It's not like paper, where you would take a lovely hardcover down off the shelves, caress it, smell it, and all that, and of course, as My One Twoo Wuv Ducky says, the whole spine issue has gone awonk in the ebook day.

All I was saying on the other is, the "gotta get the cover exactly perfect" thing--and gods know, I see this more times per week than I want to discuss--is just...obsessing about something that should be done, done correctly, of course--but not obsessed over. Not with "filling the screen" perfectly and all that, particularly given that all the screens out there are ALL different aspect ratios. Given that it CANNOT be done, trying to do it is...what's that quote again about insanity? :-D

Hitch

[GrannyGrump]

I think a big part of the problem lies in unrealistic expectations, as a result of the way people post advice and solutions. Time after time, I've seen posts saying something on the order of: If you use SVG wrapper, the image will fill the screen.

I know they *mean* the longest dimension will fill the screen, and the shorter dimension will not (leaving a white border at its edges), if the aspect ratio of the image does not exactly match the device screen. But that little detail is seldom mentioned, so novice bookmakers are almost sure to be confused when their spanky new cover does not "fill the screen".

EDIT TO ADD:
PS: An interesting explanation of svg wrappers and aspect ratio was shown by RbnJrg on thread https://www.mobileread.com/forums/sho...=215088&page=2, by using the svg wrapper attribute "slice"; added to the wiki. It may be a solution *sometimes*.