Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: limiting image height or width in css?


This question is not answered. Helpful answers available: 1. Correct answers available: 1.

Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 12 - Pages: 1 - Last Post: Oct 19, 2010 2:17 PM Last Post By: notjohn
hapax_bookguy

Posts: 21
Registered: 11/25/07
limiting image height or width in css?
Posted: Oct 17, 2010 12:59 PM
 
Click to report abuse...   Click to reply to this thread Reply
Hi, there, I am converting from epub to kindlegen.

I am getting frustrated

Ok, I understand that floating doesn't work.

I can't figure out how to make my images be small enough to fit inside the Kindle 3 viewer. Instead, what I am getting is:
1. paragraphs
2. Image on new page.
3.paragraphs on separate page

My code looks like this:

<!-- <div class="tallfigure"> <img src ="myimage.jpg" /> </div> -->
myimage.jpg is 300x408 pixels.

I would assume that I can set css classes as such and get an image to appear on part of the page, with the text before or after it. Instead, Kindlegen is separating the image altogether. Does anyone have an idea what is going on or how to solve this?

<!-- div.tall-figure{
/* float: right; */
display: inline-block;
height: 50% !important;
/*width: 50% !important;*/
padding: 0em;
margin: 0 0 0 .5em !important;
max-height: 50% !important;
}-->

img{
max-width: 100%;
max-height: 50%;
vertical-align: text-top;
margin: 0 0 0 .5em !important;
}
notjohn

Posts: 15,241
Registered: 01/06/10
Re: limiting image height or width in css?
Posted: Oct 17, 2010 1:03 PM   in response to: hapax_bookguy in response to: hapax_bookguy
 
Click to report abuse...   Click to reply to this thread Reply
What's a Kindle 3 viewer?

Having an image fill the screen is pretty standard with the Kindle. I follow a policy of putting the images between chapters, and of not using a caption on vertical images.

  • Lefty
hapax_bookguy

Posts: 21
Registered: 11/25/07
Re: limiting image height or width in css?
Posted: Oct 17, 2010 1:37 PM   in response to: notjohn in response to: notjohn
 
Click to report abuse...   Click to reply to this thread Reply
I just mean the Kindle Previewer.

Are you saying that the only way for your image to be half the screen is by reducing the image dimensions (and not through css)?
petemars8

Posts: 378
Registered: 08/30/10
Re: limiting image height or width in css?
Posted: Oct 17, 2010 1:51 PM   in response to: hapax_bookguy in response to: hapax_bookguy
 
Click to report abuse...   Click to reply to this thread Reply
Don’t you have to say img width=300 height=408 src... ?
dmsmillie

Posts: 725
Registered: 08/06/10
Re: limiting image height or width in css?
Posted: Oct 17, 2010 3:17 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Helpful
Click to report abuse...   Click to reply to this thread Reply
Hapax

I hate to be the bearer of bad news, but Kindle currently supports only a (very) limited subset of CSS properties. As you've discovered, it doesn't support floating. I don't believe it supports specifying the size of a DIV, though I haven't specifically tested that. It doesn't support padding. Same with border (except in tables). I rather suspect it doesn't recognise the max-height or max-width properties either. Background colour/shading is, again, only supported inside tables. However only very basic support is provided for tables, so I wouldn't recommend going back to the old web design notion of using tables to layout and format the content.

One thing I've found - if you don't specify the image height and width in the IMG attributes, and the image is smaller than the available display area on the screen, Kindle will expand the image to fill the available display area. If you specify the image height and width in the IMG attributes, and the image is smaller than the available display area, the image will be displayed using the height and width dimensions specified. You could try using percentage values, but don't hold your breath - again, it's not something I've tried, but I rather suspect it won't be recognised. So far, I've only specified image height and width in pixels. If the image is larger than the available display area, it will be adjusted to fit by the Kindle operating system.

Compared to what one can do with EPUB and a high quality EPUB reader, the Kindle is a lot simpler and more basic in what can be achieved with book interior design and layout. It's constantly developing, though, and I expect that what will be feasible 6 months from now will be substantially more than what is currently possible. For now, however, the available options are somewhat limited, and ingenuity is required when formatting anything more than straightforward narrative text.

  • Donna
dmsmillie

Posts: 725
Registered: 08/06/10
Re: limiting image height or width in css?
Posted: Oct 17, 2010 3:31 PM   in response to: dmsmillie in response to: dmsmillie
 
Click to report abuse...   Click to reply to this thread Reply
Apart from the information available in these forums, an excellent resource is Joshua Tallent's e-book : [i]Kindle Formatting: The Complete Guide to Formatting Books for the Amazon Kindle[/i].

http://www.amazon.com/gp/product/B0024FAPF4

  • Donna
notjohn

Posts: 15,241
Registered: 01/06/10
Re: limiting image height or width in css?
Posted: Oct 17, 2010 5:48 PM   in response to: hapax_bookguy in response to: hapax_bookguy
 
Click to report abuse...   Click to reply to this thread Reply
[i]Are you saying that the only way for your image to be half the screen is by reducing the image dimensions (and not through css)?[/i]

Well, I meant that a horizontal image (in fact, most images are horizontal) will fill the Kindle screen in width but not in height, so there is space beneath it for a caption.

Where possible (that is, unless the picture was so small that it gets pixilated when I enlarge it), I size my images to be 600 pixels wide by whatever height, typically something like 400 pixels.

If it's a strong vertical, then I size it to be 800 pixels tall by whatever width, centered on the page, and I don't caption it.

Of course, this all falls apart if the viewer is using a smartphone held horizontally! Then the horizontal image fills the screen, and the vertical one gets shrunk down and centered with lots of white space on either side.

I really don't think you can dictate image size and location, given the limitations of the Kindle software and the variety of devices people use to read Kindle editions on. The best you can do is design so that it works all right in the majority of cases.

Even if you decide to design just for the Kindle, you can't know that your reader hasn't set his device so that it is read horizontally.

  • Lefty
hapax_bookguy

Posts: 21
Registered: 11/25/07
Re: limiting image height or width in css?
Posted: Oct 17, 2010 7:14 PM   in response to: notjohn in response to: notjohn
 
Click to report abuse...   Click to reply to this thread Reply
Allow me to vent for a moment.

E-ink can do images perfectly well; these are just software issues (and frankly, when I was investigating Mobipocket 2 years ago, I found the same basic problems). It's a shame that mobipocket has such modest support for it.

A quibble. Tall images are a natural fit for the Kindle screen (especially if floating were possible).

I'm designing for epub eink, epub ipad, kindle eink, kindle ipad (not to mention a web-based version).

Now it looks like I'm going to have to re-scale all my images manually for kindle e-ink. I have to wonder whether it's too much trouble to put images in a kindle format..
petemars8

Posts: 378
Registered: 08/30/10
Re: limiting image height or width in css?
Posted: Oct 18, 2010 9:25 AM   in response to: hapax_bookguy in response to: hapax_bookguy
 
Click to report abuse...   Click to reply to this thread Reply
Interesting discussion, but surely the zoom function on the Kindle takes care of some of these issues?
notjohn

Posts: 15,241
Registered: 01/06/10
Re: limiting image height or width in css?
Posted: Oct 18, 2010 1:41 PM   in response to: petemars8 in response to: petemars8
 
Click to report abuse...   Click to reply to this thread Reply
Interesting discussion, but surely the zoom function
on the Kindle takes care of some of these issues?

I mentioned above that in one case I posted a small image because it looked pixilated when enlarged to 600 pixels wide. On Kindle for PC it showed small. But this morning when I downloaded it to the Kindle reader, behold! It was indeed zoomed to full page. So I took the caption away.

(It looked fine--not pixilated--BTW.)
petemars8

Posts: 378
Registered: 08/30/10
Re: limiting image height or width in css?
Posted: Oct 18, 2010 1:53 PM   in response to: notjohn in response to: notjohn
 
Click to report abuse...   Click to reply to this thread Reply
I mean, when the user presses the zoom button on the Kindle / KforPC to enlarge the illustration.
pennyshaynes

Posts: 1
Registered: 10/19/10
Re: limiting image height or width in css?
Posted: Oct 19, 2010 2:15 PM   in response to: hapax_bookguy in response to: hapax_bookguy
 
Click to report abuse...   Click to reply to this thread Reply
I am really frustrated. No matter what I do, how I format the text, doc, html filtered unfiltered, the text goes beyond the right margin of the page in Preview. What am I doing wrong????
notjohn

Posts: 15,241
Registered: 01/06/10
Re: limiting image height or width in css?
Posted: Oct 19, 2010 2:17 PM   in response to: pennyshaynes in response to: pennyshaynes
 
Click to report abuse...   Click to reply to this thread Reply
You are looking at the DTP Preview online? And text gets chopped off at the right margin?

Weird. Never heard of that!
Legend
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums