best format for complete photo book in given quality and feature list / KDP - Page 4

Turtle91 · 01-24-2021, 01:37 PM

edit: Dang it! Ninja'd again!!

Quote:

Originally Posted by Quoth

Portrait, set height as a percent and landscape set width.
Only set one or the other.

Not quite... That doesn't take into account if the user physically rotates their device to a different aspect, and you still have the problem of determining the correct height.

Quote:

To set a percentage height, its parent element must have an explicit height. [or be able to determine an explicit height]

As phillip mentioned... How do you determine the height of a parent element, or the containing object?? That is one of the 'bugs' in the ebook realm. If you set a specific height of a <div>, such as 15em, then put the <img> inside that div, you can specify the height of the image as 100% and it will completely fill the height of the <div>...15em. But that process only transfers the problem of determining the correct height for the image to determining the correct height for the div...

Width is a different animal...eBooks must be able to determine the width of the device so that they can reflow the text...so alot of thought has been given to that process and making sure ereaders do it properly. Screen height - not so much.

As just one example of why height isn't a reliable metric ask yourself this question: what is the height of a page/screen if the user is using scrolling instead of paging?? height=100% of a container that is 50 'pages' long could conceivably cover all 50 pages - the entire chapter...and that is only if you have set it as a background image so the text can flow over the top of the image. If you don't, then the image would be 100% long...but then you add the text which makes the chapter longer... but then the image must be bigger to fill the page...but then you have to add...does not compute....does not compute... illogical...illogical

Spoiler:

There are attempts to fix this by using vh and vw (viewport height/width)... but they are not consistently implemented across devices and have their own issues.

Jellby · 01-24-2021, 02:14 PM

To understand why width and height are different, think about web pages and broswers scrolling up and down. Typically the width is fixed (to your window width) and the height is whatever's needed for the document, but you only see part of it. An ebook is the same but without the scroll bar.

knightrider247 · 01-24-2021, 08:21 PM

I didnt mean to put height and width to 100 % of one picture but 100 % width of the landscape pic and 100 % height for the portrait pic. But it is dawning to me why the height on readers is a problem ..

Jellby · 01-25-2021, 03:03 AM

Quote:

Originally Posted by knightrider247

I didnt mean to put height and width to 100 % of one picture but 100 % width of the landscape pic and 100 % height for the portrait pic.

Even that wouldn't work. What if a portrait picture is wider than the screen is? What if a landscape picture is higher than the screen is?

What you want, conceptually at least, is "max-height: 100vh; max-width: 100vw", or in SVG terms: width="100%" height="100%" preserveAspectRatio="xMidYMid meet"

Turtle91 · 01-25-2021, 09:51 AM

Quote:

Originally Posted by Jellby

Even that wouldn't work. What if a portrait picture is wider than the screen is? What if a landscape picture is higher than the screen is?

What you want, conceptually at least, is "max-height: 100vh; max-width: 100vw", or in SVG terms: width="100%" height="100%" preserveAspectRatio="xMidYMid meet"

Exactly - an svg wrapper!

I use those exclusively for any full page images. But then, my ereader of choice supports svg wrappers. If you use them for other than the cover page, as Hitch noted, older kindles - or those using enhanced typesetting, aren't compatible. That takes a bit of a bite out of your potential customer base.

If you are OK with that, then you can try something like this:

Code:

<body style="margin:0; padding:0; text-align:center; background-color:black">

  <div style="margin:0; padding:0">
    <svg 
		xmlns="http://www.w3.org/2000/svg" 
		height="100vh" width="100vw" 
		preserveAspectRatio="xMidYMid meet" version="1.1" 
		viewBox="0 0 1000 1600" 
		xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="1000" height="1600" xlink:href="../Images/img_ChDv.png"/>
    </svg>
  </div>

</body>

You can set it as a clip if you use Sigil, then all you need to do is enter the images actual width, height, and the path to the file.

OBTW - I don't like using inline styles on principle...but they are included here because it is set as a template for my "Add Cover" function in Sigil. You can certainly swap those out for a specific class="" in your css file. Also, the background color defaults to black, but you can set it to any color that complements the image. I usually use the eyedropper function in Photoshop to tell me the RGB value of the color I want from the image, and then use "background-color:rgb(0, 0, 0)". I'm sure there are other, more affordable, software options that have an eyedropper function.

Cheers,

JSWolf · 01-25-2021, 10:54 AM

Quote:

Originally Posted by Turtle91

Exactly - an svg wrapper!

You can set it as a clip if you use Sigil, then all you need to do is enter the images actual width, height, and the path to the file.

The viewbox also needs the image resolution.

Turtle91 · 01-25-2021, 12:20 PM

Quote:

Originally Posted by JSWolf

The viewbox also needs the image resolution.

Take a look at the example...the colors denote what must be changed.

Hitch · 01-25-2021, 12:37 PM

Quote:

Originally Posted by Turtle91

Take a look at the example...the colors denote what must be changed.

We HAVE mentioned that KDP doesn't support SVG for all readers, RIGHT?

Hitch

knightrider247 · 01-25-2021, 01:21 PM

Hi,

yeah, I guess I am not going to go with svg.

Is there an advantage to place one image per html file or can I put them all in one html - divided by div-tags?

Thank you!
knightrider

Jellby · 01-25-2021, 01:33 PM

I know, I know... make a PDF

Most PDF readers should have a fit-page-to-screen mode, right?

JSWolf · 01-25-2021, 03:30 PM

Quote:

Originally Posted by Turtle91

Take a look at the example...the colors denote what must be changed.

Yes, you're right. My bad.

JSWolf · 01-25-2021, 03:32 PM

Quote:

Originally Posted by Jellby

I know, I know... make a PDF

Most PDF readers should have a fit-page-to-screen mode, right?

I know, I know... do not make a PDF

It's not going to work on most Readers. PDF made for a letter size page on a 6" screen is a disaster.

phillipgessert · 01-25-2021, 04:35 PM

Quote:

Originally Posted by knightrider247

Hi,

yeah, I guess I am not going to go with svg.

Is there an advantage to place one image per html file or can I put them all in one html - divided by div-tags?

Thank you!
knightrider

One per file sets a break before each one, which is probably pretty close to your original goal. I also personally do not enjoy working with very large HTML files (though nor would I necessarily enjoy working with hundreds of small ones). You could always start with a great big one and then split it apart at the end in Sigil. Not knowing too much about the book, apart from it containing many images, it’s tough to guess where a break makes sense. If it has any sort of “chapter” analog, the breaks should be there.

JSWolf · 01-25-2021, 04:51 PM

Too many images in one go can really slow down a Reader. So splitting them is a good idea.

Jellby · 01-26-2021, 06:10 AM

Quote:

Originally Posted by JSWolf

PDF made for a letter size page on a 6" screen is a disaster.

We're talking about full-screen/page images here, does it matter which is the original size of the PDF? And who said anything about "letter size"?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Feature Request:Add two different files with the same file format as one book	hola!claude	Library Management	4	11-16-2014 04:00 AM
Professional Quality Personal Documents: KDP and/or Calibre?	RMOP	Editor	7	04-01-2014 10:13 AM
Complete Noob Feature Question	JoeyS	ePub	2	02-20-2012 05:58 AM
Cool photo-mosaic feature at LibraryThing!	nekokami	Lounge	3	06-21-2009 10:26 AM
Drastic pdf drop in quality of scanned book after using acrobat optimize feature	harryE123	PDF	5	12-31-2008 10:40 PM

01-24-2021, 02:14 PM	#47
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	To understand why width and height are different, think about web pages and broswers scrolling up and down. Typically the width is fixed (to your window width) and the height is whatever's needed for the document, but you only see part of it. An ebook is the same but without the scroll bar.

01-24-2021, 08:21 PM	#48
knightrider247 Member Posts: 11 Karma: 10 Join Date: Jan 2021 Device: Paperwhite	I didnt mean to put height and width to 100 % of one picture but 100 % width of the landscape pic and 100 % height for the portrait pic. But it is dawning to me why the height on readers is a problem ..

01-25-2021, 01:21 PM	#54
knightrider247 Member Posts: 11 Karma: 10 Join Date: Jan 2021 Device: Paperwhite	Hi, yeah, I guess I am not going to go with svg. Is there an advantage to place one image per html file or can I put them all in one html - divided by div-tags? Thank you! knightrider

01-25-2021, 01:33 PM	#55
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I know, I know... make a PDF Most PDF readers should have a fit-page-to-screen mode, right?

01-25-2021, 04:51 PM	#59
JSWolf Resident Curmudgeon Posts: 74,015 Karma: 129333114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Too many images in one go can really slow down a Reader. So splitting them is a good idea.

Advert

Advert