Image sizes and text alignment

[JSWolf]

You cannot assume webkit is available. It isn't available for ADE. So any webkit code has to go.

Is there a way ib ePub3 to make it so if an image with the caption has to be pushed to the next screen that the text can move to fill in the previous page?

[RbnJrg]

Originally Posted by JSWolf

Too many devices and/or programs do not support vw and vh. So it's best to use % which will work in many more cases. It's basically the same thing eccept one works more then the other.

Not exactly. When you use "vh" (or "vw") are you referring to the screen size, and with "%" you are referring to the container size. With "vh" you can do things impossible to get with "%". For example, how you could set the height of a <div> block at 40% of the screen? With "%", you couldn't. But, I must agree with you, that some EPUB2 ereaders, don't support the property. Under epub3, vw and vh work flawlessly.

[JSWolf]

Originally Posted by RbnJrg

Not exactly. When you use "vh" (or "vw") are you referring to the screen size, and with "%" you are referring to the container size. With "vh" you can do things impossible to get with "%". For example, how you could set the height of a <div> block at 40% of the screen? With "%", you couldn't. But, I must agree with you, that some EPUB2 ereaders, don't support the property. Under epub3, vw and vh work flawlessly.

The container is the size of the screen. So % works perfectly well.

[RbnJrg]

Originally Posted by JSWolf

You cannot assume webkit is available. It isn't available for ADE. So any webkit code has to go.

You didn't pay attention to what i wrote. Didn't you see that besides "-webkit-column-break-inside: avoid !important;" I also employed "break-inside: avoid !important;" and "display: inline-block !important".
Why I did that? Because I use "-webkit-column-break-inside: avoid !important;" for ereaders based on webkit, and I use "break-inside: avoid !important;" and "display: inline-block !important" for ereaders not based on webkit.

Is there a way in ePub3 to make it so if an image with the caption has to be pushed to the next screen that the text can move to fill in the previous page?

Yes, is what I said in my previous post. Watch the images I included there, and how the text moves when the font size is changed to avoid blank spaces. With epub3 the fragmentation is completely avoided. Use something like this:

  <figure>
    <img src="../Images/Your_image.jpg" alt="" style="width:100%"/>

    <figcaption>Fig.1 - Blah, blah, blah</figcaption>
  </figure>

and

figure {
  float: left;
  margin: 1em 0;
  padding: 4px;
  -webkit-column-break-inside: avoid !important; /* for webkit ereaders */
  break-inside: avoid !important;  /* for the rest of ereaders */
}

figcaption {
  font-style: italic; /* if you wish */
  padding: 2px; /* set here the measure you wish */
  text-align: center; 
}

[RbnJrg]

Originally Posted by JSWolf

The container is the size of the screen. So % works perfectly well.

Yes? I challenge you to post an epub with a div with a height of 40% of the screen size. I don't want your words, I want FACTS (I see that you never had the need to create a block with a certain height otherwise you wouldn't have answered as you answered, and so lightly).

Here you can watch an epub with a div (an empty div) with a HEIGHT of 40% of screen (no matter the screen size of the ereader) based on vh. Make the same, but with "%" and post the epub here. I'm looking forward to seeing the code you wrote; I want to learn how you can achieve the impossible.

EDIT: There is a hack that allows to use % but with that hack, many ereaders won't display correctly the epub. I want an epub that display a div with a height of 40% of the screen height and that can be displayed without issues by ereaders based on ADE.

[HeartWare]

Originally Posted by Turtle91

<div class="image"><img src="…" alt=""/></div>

.image {width=50%; float:left}
img {width:100%; max-width: 1000px *or whatever the width of your image*}

Unfortunately, that doesn't seem to work in either Sigil or Calibre. The image occupies the full width with the text below it.

The relevant code from the xhtml is:

<html>
<head>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div class="image50L"><img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum ... id est laborum.</div>
</body>
</hrml>

and the stylesheet:

.image50L {width=50%; float:left}
img {width:100%; max-width: 9000px}


I have enclosed my test ePub...

[RbnJrg]

Originally Posted by HeartWare

Unfortunately, that doesn't seem to work in either Sigil or Calibre. The image occupies the full width with the text below it.

The relevant code from the xhtml is:

<html>
<head>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div class="image50L"><img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum ... id est laborum.</div>
</body>
</hrml>

and the stylesheet:

.image50L {width=50%; float:left}
img {width:100%; max-width: 9000px}


I have enclosed my test ePub...

The property "float: left" must be for the selector img, not for the style img50L. Use something like this:

<div class="image50L">
     <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>
     <p>Lorem ipsum ... id est laborum....</p>
</div>

.............

.image50L {
    width=100%;
}

.image50L  img {
     float: left;
     width:50%; 
     max-width: 9000px
}

[Turtle91]

Originally Posted by RbnJrg

The property "float: left" must be for the selector img, not for the style img50L. Use something like this:

<div class="image50L">
     <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>
     <p>Lorem ipsum ... id est laborum....</p>
</div>

.............

.image50L {
    width=100%;
}

.image50L  img {
     float: left;
     width:50%; 
     max-width: 9000px
}

No. That won’t achieve what he’s asking at all. He is trying to get the following paragraphs to flow around the image. Won’t be able to do that if the div is taking up 100% of the width.

Unfortunately I can’t open the ePub on my phone - but from your relevant text example it should work. There must be something else wrong. I will try and look at it when I get home Monday, unless someone else solves it first.

Edit:
On a completely different note: if you are using images that are 9000 pixels wide I would suggest that is WAY too large for an ePub. The file size alone would make the ePub unwieldy not to mention longer rendering times. The maximum dimension size I use is 2200px (height) for the cover image. Other images usually max out around 1000-1500 for detailed images, or 600-750 for little ones.

I don’t think this is the problem, just a typo when putting the example text. You have </hrml> at the end.

Also, check that the stylesheet is linked properly. I see the link info in the head (missing the required <title>) but it may not be the correct info. In Sigil right-click on your xhtml file in the book browser window on the left and select “link stylesheet” then check the box on the stylesheet. You can also try adding a colored border during troubleshooting to make sure it is actually applying the css.

div.image50l {width:50%; float:left; border: 1px solid red}

[HeartWare]

Originally Posted by Turtle91

On a completely different note: if you are using images that are 9000 pixels wide I would suggest that is WAY too large for an ePub.

I'm not - it's just that the one I'm using is wider than the 1000 you specified in your original sample, so I just set it to some high number that I knew I wouldn't reach.

Originally Posted by Turtle91

Also, check that the stylesheet is linked properly. I see the link info in the head (missing the required <title>) but it may not be the correct info. In Sigil right-click on your xhtml file in the book browser window on the left and select “link stylesheet” then check the box on the stylesheet.

That was the way I included it. I just omitted the <title> in my summary tag as it wasn't relevant for the information I wanted to show (since I included the compiled ePub file).

Originally Posted by Turtle91

You can also try adding a colored border during troubleshooting to make sure it is actually applying the css.

That's a splendid advice. I'll try that out.

[HeartWare]

Originally Posted by Turtle91

You can also try adding a colored border during troubleshooting to make sure it is actually applying the css.

div.image50l {width:50%; float:left; border: 1px solid red}

I did the above (without the "div." prefix) and it drew a red border around the area of both the image and the text.

[Turtle91]

RbnJrg’s post made me question whether I understood your question correctly. I’ve been thinking you want an image to take up half the screen with a caption at the bottom. The following paragraph text flows around the image/caption. If that is true, then what we’ve been talking about works:

div.image50L {width:50%; float:left}
div.image50L img {width:100%; max-width:1000px}
div.image50L span {display:block; font-size:.6em…. Etc. }

<p>Some paragraph before the image.</p>
<div class="image50L"><img alt="…" src="…"/><span>Some Caption</span></div>
<p>Some paragraph the will flow around and to the right of the image.</p>

If you want your caption to flow around the image then RbnJrg’s example works.

Please clarify your question.

[HeartWare]

Originally Posted by Turtle91

On a completely different note: if you are using images that are 9000 pixels wide I would suggest that is WAY too large for an ePub. The file size alone would make the ePub unwieldy not to mention longer rendering times. The maximum dimension size I use is 2200px (height) for the cover image. Other images usually max out around 1000-1500 for detailed images, or 600-750 for little ones.

The particular image here is 5824x3264 (i got lazy and just took the full resolution image I use on the web), but in the .ePub it'll be resized down to 1536x861 (I resize all images to a max resolution of 1536x1536 during my translation from my own markup to .ePub format, except the cover image).

Just to make sure that this wasn't an issue (I didn't expect it to be), I replaced the image with the .ePub version and the problem persists.

[HeartWare]

Originally Posted by Turtle91

RbnJrg’s post made me question whether I understood your question correctly. I’ve been thinking you want an image to take up half the screen with a caption at the bottom.

My apologies if I have been unclear. This is what I want to achieve:

In .html I have achieved this with:

<img src="Tropical Beach.PNG" style="text-align:LEFT;width:20vw;float:left;padding:0 8 0 0">Lorem ipsum dolor ... anim id est laborum.

Hope this clears it up...

[Turtle91]

If the Lorem ipsum text is just normal paragraph text then it should easily work with:

div.image50L {width:50%; float:left}
div.image50L img {width:100%; max-width:1000px}

<p>Some paragraph before the image.</p>
<div class="image50L"><img alt="…" src="…"/></div>
<p>Some paragraph the will flow around and to the right of the image.</p>

Try that with the colored border and the image should be the only thing with the red border.

[HeartWare]

Okay, with the combined help of all of you, I managed to get it to work:

.css file:

.image50L {width=100%}
.image50L img {width:50%; max-width: 9000px; text-align:left; float:left; padding: 0px 8px 0px 0px}

.xhtml file:

<div class="image50L"><img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</div>

I can certainly make a bunch of classes and other stuff in the .css file, but do I need to specify both lines for all combinations of alignment and percentage size? Ie. I need a several combinations of L and R alignment (not at the same time, obviously :-) ) and varying percentages.