Centered picture on e-book viewer

senhal · 02-08-2016, 08:34 AM

Why the E-book Viewer doesn't centrally align a picture (280x1000 px) when using this code?

Code:

<div class="center"><img alt="Frontispiece" height="100%" src="../Images/frontispiece.jpg" /></div>

Code:

.center {
  text-align: center;
  text-indent: 0;
}

HarryT · 02-08-2016, 08:49 AM

Can you be more specific? Do you mean that it is not displayed centred on Calibre's ebook viewer, but it is on other devices?

senhal · 02-08-2016, 09:04 AM

Exactly.
On Calibre Editor, ADE, Kobo and Kindle the picture is centered.
On E-Book Viewer it is not.

kovidgoyal · 02-08-2016, 10:23 AM

You need to provide a complete example.

gbm · 02-08-2016, 11:07 AM

Quote:

Originally Posted by senhal

Why the E-book Viewer doesn't centrally align a picture (280x1000 px) when using this code?

Code:

<div class="center"><img alt="Frontispiece" height="100%" src="../Images/frontispiece.jpg" /></div>

Code:

.center {
  text-align: center;
  text-indent: 0;
}

Try this:

Code:

<div class="image block"><div class="center"><img alt="Frontispiece" height="100%" src="../Images/frontispiece.jpg" /></div></div>

Code:

.center {
  text-align: center;
  text-indent: 0;
    }
.image block {
    display: block
    }

bernie

senhal · 02-08-2016, 01:24 PM

Quote:

Originally Posted by kovidgoyal

You need to provide a complete example.

Maybe I get it... With this header the problem appears:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!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">

With this one, everything is ok:

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

kovidgoyal · 02-08-2016, 11:53 PM

Yes, declaring a doctype changes the html rendering algorithm (to an obsolete one), which causes the height='100%' to actually be rendered with a height greater than the page height, so the viewer compensates by forcing the image to be alone on a page, and setting its display to block. This prevents the image from being broken up onto two pages.

Either dont uses doctypes, they are pointless, legacy cruft or use margin-left:auto and margin-right:auto with display:block to center you image.

kovidgoyal · 02-08-2016, 11:58 PM

Even better, if you want a fullpage image, use the svg code for it, which is far more robust. The calibre editor insert image tools has an option to easily insert such full page images.

senhal · 02-09-2016, 02:31 AM

Quote:

Originally Posted by kovidgoyal

Even better, if you want a fullpage image, use the svg code for it, which is far more robust. The calibre editor insert image tools has an option to easily insert such full page images.

I'm still using it

Thanks for your suggestions!

02-08-2016, 08:34 AM	#1
senhal Connoisseur Posts: 82 Karma: 25684 Join Date: Sep 2014 Device: Kindle NT	Centered picture on e-book viewer Why the E-book Viewer doesn't centrally align a picture (280x1000 px) when using this code? Code: <div class="center"><img alt="Frontispiece" height="100%" src="../Images/frontispiece.jpg" /></div> Code: .center { text-align: center; text-indent: 0; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Kindle 3 Picture Viewer	Conner	Kindle Developer's Corner	3	03-26-2012 07:32 AM
360 PB 360 rotate in picture viewer?	franklekens	PocketBook	0	07-17-2011 04:49 AM
E-Book Viewer as standalone viewer	Peter Swallow	Library Management	3	05-15-2011 12:06 PM
Picture Viewer Justification	krunkster	Amazon Kindle	3	02-26-2009 06:30 PM
Picture Viewer experiment	skytalon	Amazon Kindle	11	04-04-2008 11:10 AM

02-08-2016, 08:49 AM	#2
HarryT eBook Enthusiast Posts: 85,544 Karma: 93383099 Join Date: Nov 2006 Location: UK Device: Kindle Oasis 2, iPad Pro 10.5", iPhone 6	Can you be more specific? Do you mean that it is not displayed centred on Calibre's ebook viewer, but it is on other devices?

02-08-2016, 09:04 AM	#3
senhal Connoisseur Posts: 82 Karma: 25684 Join Date: Sep 2014 Device: Kindle NT	Exactly. On Calibre Editor, ADE, Kobo and Kindle the picture is centered. On E-Book Viewer it is not.

02-08-2016, 10:23 AM	#4
kovidgoyal creator of calibre Posts: 45,355 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	You need to provide a complete example.

02-08-2016, 11:53 PM	#7
kovidgoyal creator of calibre Posts: 45,355 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Yes, declaring a doctype changes the html rendering algorithm (to an obsolete one), which causes the height='100%' to actually be rendered with a height greater than the page height, so the viewer compensates by forcing the image to be alone on a page, and setting its display to block. This prevents the image from being broken up onto two pages. Either dont uses doctypes, they are pointless, legacy cruft or use margin-left:auto and margin-right:auto with display:block to center you image.

02-08-2016, 11:58 PM	#8
kovidgoyal creator of calibre Posts: 45,355 Karma: 27182818 Join Date: Oct 2006 Location: Mumbai, India Device: Various	Even better, if you want a fullpage image, use the svg code for it, which is far more robust. The calibre editor insert image tools has an option to easily insert such full page images.