Issue formatting page with only an image. - Page 2

Jellby · 12-23-2014, 09:00 AM

Quote:

Originally Posted by RbnJrg

ePub2? No, since background-size is not a property supported by css2.

It depends on what is meant by "following the specs". Using non-supported CSS properties in an ePub does not make it invalid. It may not display as intended, but it does not break the spec. (And, unlike the case when only "supported" properties are used, the renderer is not to blame.)

blutuu · 12-23-2014, 10:37 PM

I did some tinkering and found a way to get what I want.

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">
<head xmlns="http://www.w3.org/1999/xhtml">
  <meta content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" name="generator" />
  <meta content="width=737, height=575" name="viewport" />

  <title>Audacious Little Princesses</title>
  
<style type="text/css">
body {width: 737px; height: 575px; margin: 0; }
  img {max-width: 100%; max-height: 100%; }
</style>
</head>

<body>
  <div><img alt="" src="../Images/page1.jpg" width="737px" /></div>
</body>
</html>

I just used a fixed height and width (one's that worked for me) for each page. It works like a charm for each platform I tested.

Quick question. What would be the best image format to use in terms of quality? I have high quality png files, but they're really big. I reduced them to jpg files, but I feel that the quality has dipped a little bit. Basically, I want something that isn't too big and retains most of its quality.

GrannyGrump · 12-24-2014, 12:59 AM

Quote:

Originally Posted by blutuu

Quick question. What would be the best image format to use in terms of quality? I have high quality png files, but they're really big. I reduced them to jpg files, but I feel that the quality has dipped a little bit. Basically, I want something that isn't too big and retains most of its quality.

I have found that using more than 10% -15% compression on jpegs will usually lead to artifacts and bleeding and "pixel-spitting". Of course, that means a larger file-size.

Often a 256-color png can look better than a heavily-compressed 16million color jpeg.
You would have to test and see. But 256-color pngs don't support gradients very well, so you might see banding.

If your graphics editor supports choosing the color-count reduction method, I would recommend testing 256 colors (do NOT use "web-safe" pallet, it is UGLY, even if it is smaller.). You might find a happy solution.

Good luck!

blutuu · 12-24-2014, 02:11 AM

Thanks for the reply. I actually found this site here and it works perfectly. https://tinypng.com/

GrannyGrump · 12-24-2014, 02:17 AM

yep, that's what TinyPng does --- it reduces the color-count. Glad that works for you!

But do make sure you examine each image when it is finished to make sure the color-reduction didn't turn out "posterized".

blutuu · 12-24-2014, 02:20 AM

Will do!

RbnJrg · 12-24-2014, 06:21 AM

Quote:

Originally Posted by blutuu

I just used a fixed height and width (one's that worked for me) for each page. It works like a charm for each platform I tested.

Yes, that solution is similar to what I posted here:

https://www.mobileread.com/forums/sho...9&postcount=14

As I said in that post, that solution would work for any plataform if your images are all of the same size. However, take care if there is an image of -let's say- 737 x 300px. In that case image won't be centered on your screen (and that was your first goal

) And also take in count that several eraders (Kindle among them) don't support "max-width" and "max-height" properties; another question is that maybe in ereaders of 5" things could not work by setting a body of 737 x 537px. And also I suppose -for the size you give to your <body> tags- that you are expecting your ebook will be read in landscape mode; what about if a lector want to read the ebook in portrait mode (in a tablet of 10" for example)? How does your epub look in portrait mode? Are images centered on the screen?

Regards

dgatwood · 12-24-2014, 11:14 AM

Quote:

Originally Posted by RbnJrg

Yes, but the problem is that the OP wants images to be centered on ereaders screen. You are using an image of 2040 x 2640 (practically a perfect 4/3 image); but when you are using a lower image then that one are not going to be centered on the screen.

Hmm. I could have sworn I had code in there to vertically center the result. Well, that's easy to fix either way. Just add text-align: center on the enclosing div.

RbnJrg · 12-24-2014, 02:21 PM

Quote:

Originally Posted by dgatwood

Hmm. I could have sworn I had code in there to vertically center the result. Well, that's easy to fix either way. Just add text-align: center on the enclosing div.

No, I'm afraid not

By adding "text-align: center" won't center the image vertically and to center it horizontally by using that property, the image would have to be showed as "inline" element; otherwise "text-align: center" won't work. To center block elements you need "margin-left: auto" and "margin-right: auto".

dgatwood · 12-26-2014, 11:00 AM

Quote:

Originally Posted by RbnJrg

No, I'm afraid not

By adding "text-align: center" won't center the image vertically and to center it horizontally by using that property, the image would have to be showed as "inline" element; otherwise "text-align: center" won't work. To center block elements you need "margin-left: auto" and "margin-right: auto".

Ugh. My brain wasn't turned on when I wrote that.

The SVG code I posted does, in fact, center the image, both vertically and horizontally. That's handled by the "mid" in preserveAspectRatio="xMidYMid". The containers are all styled to fill the body size, which in the absence of content that would overflow the bounds, fills the viewport. So by adding the image and telling it to scale to fit, centered, within that container, you're effectively centering within the viewport.

Try it in a browser, and you'll see that it remains centered, regardless of which dimension is larger than the content.

And because it is SVG, if you want to include captions, you can readily do so using SVG text elements, giving you complete control over the page layout, and the resulting text should still be searchable as text in most readers.

RbnJrg · 12-26-2014, 02:57 PM

Quote:

Originally Posted by dgatwood

Ugh. My brain wasn't turned on when I wrote that.

Quote:

The SVG code I posted does, in fact, center the image, both vertically and horizontally. That's handled by the "mid" in preserveAspectRatio="xMidYMid". The containers are all styled to fill the body size, which in the absence of content that would overflow the bounds, fills the viewport. So by adding the image and telling it to scale to fit, centered, within that container, you're effectively centering within the viewport.

I agree with that. And you could use a code a bit simpler; try this:

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">
<head>
  <title>Cover</title>
</head>
<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      height="100%"
      width="100%"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 2040 2640">
      <image width="2040" height="2640" xlink:href="../Images/frontcover.jpg" />
    </svg>
  </div>
</body>
</html>

I added the parameter "meet" under "preserveAspectRatio" to ensure the image is centered both, vertical and horizontally. Read this post (also the thread is very interesting):

https://www.mobileread.com/forums/sho...4&postcount=20

Regards

Hitch · 12-26-2014, 03:49 PM

n.b.:

If the OP is trying to make what is essentially a fixed-format ePUB for iBooks--that is, for intake into iBooks, to be sold as a children's book or other FF-platform book (like a coffee-table book), then he may not be very happy with the results, as iBooks has pretty clearly-laid-out specifications for making FF books. Your solution, Ruben, despite being lovely, probably won't pass intake at iBooks, IF that is what he is doing.

Just a note of caution.

Hitch

dgatwood · 12-26-2014, 10:18 PM

Quote:

Originally Posted by RbnJrg

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">
<head>
  <title>Cover</title>
</head>
<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      height="100%"
      width="100%"
      preserveAspectRatio="xMidYMid meet"
      viewBox="0 0 2040 2640">
      <image width="2040" height="2640" xlink:href="../Images/frontcover.jpg" />
    </svg>
  </div>
</body>
</html>

I'm pretty sure that additional CSS was to work around a bug in some reader—I forget which one—where the body tag did not fill the viewport vertically otherwise. Unfortunately, I failed to add an appropriate snarky comment in my git log to indicate which reader's bug I was working around, so I can't be certain.

Quote:

Originally Posted by RbnJrg

I added the parameter "meet" under "preserveAspectRatio" to ensure the image is centered both, vertical and horizontally. Read this post (also the thread is very interesting):

That shouldn't be needed; the default is meet.

RbnJrg · 12-27-2014, 06:53 AM

Quote:

Originally Posted by dgatwood

That shouldn't be needed; the default is meet.

It's included because of a bug in some readers; if you don't include "meet" or "slice", then they doesn't take in count "preserveAspectRatio" (why do you thing that Sigil uses that parameter when you add a svg cover?

If it were redundant, Sigil wouldn't include it)

RbnJrg · 12-27-2014, 07:16 AM

Quote:

Originally Posted by Hitch

n.b.:

If the OP is trying to make what is essentially a fixed-format ePUB for iBooks--that is, for intake into iBooks, to be sold as a children's book or other FF-platform book (like a coffee-table book), then he may not be very happy with the results, as iBooks has pretty clearly-laid-out specifications for making FF books. Your solution, Ruben, despite being lovely, probably won't pass intake at iBooks, IF that is what he is doing.

Just a note of caution.

Hitch

Yes, you're right but sincerely, I don't know if the OP wants a FF epub for iBooks because in his posts, the OP has said that is testing the ebook in several ereaders. But you say well, if he wants a FF ebook, then the approximations expressed here are not for him

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Smashwords formatting issue	Flumplepuss	Writers' Corner	2	11-04-2014 11:36 AM
PB360+ Formatting issue	Japes	PocketBook	1	07-15-2014 06:06 AM
Formatting issue	jhempel24	Sigil	4	03-08-2012 01:40 PM
Image formatting without stretching	Vanguard3000	Sigil	2	03-04-2011 01:15 AM
image on separate page without half-page text next	Toxaris	ePub	2	01-26-2011 03:32 AM

12-24-2014, 02:11 AM	#19
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Thanks for the reply. I actually found this site here and it works perfectly. https://tinypng.com/

12-24-2014, 02:17 AM	#20
GrannyGrump Obsessively Dedicated... Posts: 3,221 Karma: 35037583 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	yep, that's what TinyPng does --- it reduces the color-count. Glad that works for you! But do make sure you examine each image when it is finished to make sure the color-reduction didn't turn out "posterized".

12-24-2014, 02:20 AM	#21
blutuu Junior Member Posts: 8 Karma: 10 Join Date: Dec 2014 Device: iPad, Nexus 7, iPhone 6	Will do!

12-26-2014, 03:49 PM	#27
Hitch Bookmaker & Cat Slave Posts: 11,503 Karma: 158448243 Join Date: Apr 2010 Location: Phoenix, AZ Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2	n.b.: If the OP is trying to make what is essentially a fixed-format ePUB for iBooks--that is, for intake into iBooks, to be sold as a children's book or other FF-platform book (like a coffee-table book), then he may not be very happy with the results, as iBooks has pretty clearly-laid-out specifications for making FF books. Your solution, Ruben, despite being lovely, probably won't pass intake at iBooks, IF that is what he is doing. Just a note of caution. Hitch

Advert

Advert