Aura HD Epub pictures-how do they work?

[JSWolf]

I get why the different image sizes on screen based on the different screen resolutions. But what I don't get is why the images are not centered on the Aura when they are on the 650.

If this is a kepub vs ePub. Then get rid of kepup as it doesn't look as good.

[ShellShock]

Thanks. Yes that is much better. I think I understand: I need to use 100% for my svg width and height to get the viewBox to fill the screen rather than using an absolute size; the viewBox and image dimensions need to match the real image file in order to preserve its aspect ratio. The image dimensions need to match the viewBox dimensions to get the image to fill the viewBox, and hence fill the screen.

[ShellShock]

Originally Posted by paola

thank you guys: do you have any suggestions for the best measurements to put in the Mini?

As DNSB said, I think the principle is the same for all screen resolutions:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 660 880" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="880" width="660" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

Replace the two 660 with the real width of the image, and the two 880 with the real height of the image (Sigil displays the width and height if you open the image).

[paola]

Originally Posted by ShellShock

Thanks. Yes that is much better. I think I understand: I need to use 100% for my svg width and height to get the viewBox to fill the screen rather than using an absolute size; the viewBox and image dimensions need to match the real image file in order to preserve its aspect ratio. The image dimensions need to match the viewBox dimensions to get the image to fill the viewBox, and hence fill the screen.

Originally Posted by ShellShock

snip
Replace the two 660 with the real width of the image, and the two 880 with the real height of the image (Sigil displays the width and height if you open the image).

now I get it, thanks!

[DNSB]

Originally Posted by JSWolf

I get why the different image sizes on screen based on the different screen resolutions. But what I don't get is why the images are not centered on the Aura when they are on the 650.

If this is a kepub vs ePub. Then get rid of kepup as it doesn't look as good.

Not sure if that is a .kepub but on the Kobo using .epubs, the image centering runs into issue with the Adobe code since the common method for centerng images is to set auto margins. Unfortunately, the Adobe code disregards those auto margins. There are workarounds but they are a pain. The Pigs, Gourds and Wikis site had a nice discussion of this problem and some workarounds using the inline-block property.

Regards,
David

[DNSB]

Originally Posted by ShellShock

Thanks. Yes that is much better. I think I understand: I need to use 100% for my svg width and height to get the viewBox to fill the screen rather than using an absolute size; the viewBox and image dimensions need to match the real image file in order to preserve its aspect ratio. The image dimensions need to match the viewBox dimensions to get the image to fill the viewBox, and hence fill the screen.

By Jove, I think he's got it!

Sorry but I couldn't resist that slight misquote of Professor Higgins.

Regards,
David

[JSWolf]

Originally Posted by DNSB

Not sure if that is a .kepub but on the Kobo using .epubs, the image centering runs into issue with the Adobe code since the common method for centerng images is to set auto margins. Unfortunately, the Adobe code disregards those auto margins. There are workarounds but they are a pain. The Pigs, Gourds and Wikis site had a nice discussion of this problem and some workarounds using the inline-block property.

Regards,
David

Here is the code in the XML for displaying the image centered followed by the relevant CSS code...

<p class="image"><img alt="" src="2.jpg"/></p>

p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1.2em
}
.image {
    display: block;
    text-align: center;
    text-indent: 0
}

There nothing auto. There's no inline anything. There no workarounds. It just works.

[jackie_w]

Originally Posted by JSWolf

There nothing auto. There's no inline anything. There no workarounds. It just works.

There could be if it's a calibre conversion, as calibre seems to add a css class to everything. I've got the same standard epub loaded on a PRST1, KoboGlo and AuraHD. The chapter heading ornamental jpg is correctly centred on all 3 devices.

The html code looks like:

<p class="calibre5"><img alt="chap08" src="images/chapter08.jpg" class="calibre2"/></p>

and the relevant css:

.calibre2 {
    height: auto;
    width: auto
    }
.calibre5 {
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: center
    }

The only difference in the 3 displays is how big the image looks.
In addition, I removed the "calibre2" class and re-tested on the Aura -- still centered correctly.

[DNSB]

Originally Posted by JSWolf

Here is the code in the XML for displaying the image centered followed by the relevant CSS code...

<p class="image"><img alt="" src="2.jpg"/></p>

p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1.2em
}
.image {
    display: block;
    text-align: center;
    text-indent: 0
}

There nothing auto. There's no inline anything. There no workarounds. It just works.

Try using that to display a graphics drop cap or any other graphics inline with text, hence my preference for inline-block. I've seen a lot of epubs that try to display centered graphics by using code similar to the following:

.image  {
display: block;
margin-left: auto;
margin-right: auto;
}

This works until you meet a renderer that does not support the margin: auto directive. For whatever reason, Adobe is in that camp.

Also note the using text-align with graphics is not a recommended technique and should be avoided even though it works at least 95% of the time.

Regards,
David

[ShimSham]

Originally Posted by ShellShock

As DNSB said, I think the principle is the same for all screen resolutions:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 660 880" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="880" width="660" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>

Replace the two 660 with the real width of the image, and the two 880 with the real height of the image (Sigil displays the width and height if you open the image).

Thanks to the info in this thread I have been able to get the maps on my fantasy books to fill up the Aura's screen.

But the images have all been off-centre. How do I make images bigger and centred at the same time? I am a novice and have only just worked out how to use sigil, most of this thread is going over my head, so please be gentle.

[ShimSham]

Ahh!! I discovered I hadn't entered the correct values for height and width in all the places needed. My images/maps now fill the page nicely and are centred. Thanks to everyone for the helpful information in this thread.

[Arios]

Posted by JSWolf

Here is the code in the XML for displaying the image centered followed by the relevant CSS code...

Code:

<p class="image"><img alt="" src="2.jpg"/></p>

It's will work better if you put the path, like this: <img alt="" src="../Images/2.jpg"/></p>

[davidfor]

Originally Posted by Arios

It's will work better if you put the path, like this: <img alt="" src="../Images/2.jpg"/></p>

Only if the image is in that directory in the epub. It doesn't have to be, and it is common for no subdirectories to be used. And if I see an "Images" and a "Text" subdirectory, I assume someone has used Sigil to edit the epub.