Need text box to float left beside image - Page 2

Turtle91 · 06-05-2013, 08:50 AM

I put the code I gave you...with minor modification (below)... into sigil and came up with the following for Sigil and ADE...seemed to work fine. I've also attached the actual test epub if that helps.

CSS:

Code:

div.FrameSmall {clear:left; width:100%}
div.Float-L {float:left; margin:0 15px}
p {text-align:justify; margin:0 0 .5em; text-indent:0}

HTML:

Code:

<body>
  <p>...and is represented chemically as CH4. It is often shown pictorially as:</p>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="" src="../Images/Methane15-1.png" /></div>

    <p class="First6">Methane where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="" src="../Images/Ethane15-2.png" /></div>

    <p class="First6">Carbon can also share a single electron pair with another carbon atom, with hydrogen providing the remaining three available bonds. In such a case, the resulting compound is ethane (C2H6), which is depicted on the left.</p>
  </div>

    <p>Methane and ethane are but simple compounds ...</p>
</body>

edit: oops...I added an extra "Methane" to the paragraph next to the methane pic.

DaleDe · 06-05-2013, 11:08 AM

Quote:

Originally Posted by eggheadbooks1

Because jpegs were sent to me by the client, and because the ePub will be converted to Kindle as well and in the past they handled PNGs badly (sometimes converting backgrounds to black). Perhaps that has changed?

Michelle

there is nothing wrong with using jpg and png won't give much smaller files. jpg has an option for gray scale support and it does fine. You are correct that Kindle converter will convert png files anyway.

Dale

Jellby · 06-05-2013, 11:14 AM

The problem with JPG is not black/white or grayscale, it's line art. Whenever the original image is a clear line drawing with sharp borders and plain colours, JPG will only ruin it, at the expense of creating an even larger file, while PNG is the perfect solution there. If Kindle is a problem you can always convert them to GIF for them.

eggheadbooks1 · 06-05-2013, 12:01 PM

Hi Turtle:

You're right, I had a margin left over from the code's previous iteration.

Getting closer (see jpeg). But the margin is still large. Maybe that's as good as it will get?

Michelle

Code:

<div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.jpg" width="40%" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

div.FrameSmall{
	width:100%;
	clear:left;
}
div.Float-L{
	float:left;
	margin:0px;
}
 p.First6, li.First6, div.First6
        {mso-style-name:First6;
        margin-top:0em;
        margin-right:0em;
        margin-bottom:.6em;
        margin-left:0em;
        text-align:justify;
        text-indent:0em;
        font-size:1.2em;
        font-family:"serif";}

Turtle91 · 06-05-2013, 01:16 PM

Ahhh...you've left width="40%" in your <img> tag...that is taking up 40% of your div container even though the picture is much smaller.

Take it out completely like I did - or - set a max-width:Xpx (where X is the largest number of pixels you want it to take up)...I think those images were about 80px wide IIRC.

Cheers,

eggheadbooks1 · 06-05-2013, 01:18 PM

Hi Turtle:

I think I see the problem. In your successful case, you made the image smaller and set it to a fixed size; I'm trying to set it to a percentage so it will enlarge with the user's screen. Perhaps, then, what I have is the closest I'll get if I want to keep the percentage option?

Thanks for all your help. You've been wonderful.

Michelle

Turtle91 · 06-05-2013, 01:30 PM

As for image size...how large (kb) are the jpg files for methane and ethane?

I took a screen shot of the image you had before, cropped it, and saved as an indexed png to get these (1.4kb and 1.3kb respectively). Even if you only save 2-3kb per image, I would imagine you will have a lot of images in that kind of book and that equates to a significant savings in file size. You would also probably get much better quality than I did because you are working with the originals.

Name: Methane15-1.png
Views: 217
Size: 1.4 KB

Name: Methane15-1.png
Views: 217
Size: 1.4 KB

Name: Ethane15-2.png
Views: 210
Size: 1.3 KB

eggheadbooks1 · 06-05-2013, 02:00 PM

The difference in size between the jpeg and png is about 30 - 40%. About half his images are line art or text only, the other half are continuous tone (where the jpeg is smaller and better than the png). Some are in-between, probably 256-color. The client sent me fairly large jpegs, most of which have had to be downsized for the ebooks, so I should be able to get a decent png. I did a quick text of two images; the quality was nearly identical but the file size was about -30%.

Thanks again,
Michelle

Turtle91 · 06-05-2013, 02:03 PM

Setting the width as a percentage is just telling it what percentage of the container to use. If you set it at 50% then it will take up half of the div...which itself is set to fill the screen with a width of 100%...so effectively you are saying take up half of the screen for this image. Scaling the image in this manner doesn't work for what you want to do.

With an ebook's reflowable nature, the words will automatically fill the extra landscape that a larger display provides...they do NOT automatically increase in font size.

What I think you want is to increase the image when the FONT size is increased to keep the same proportion between the image and font.

You can do that by assigning the width to an "em". If you want the image to be the same height as 3 letters/lines you could say "width:3em" in your CSS. With that method you run the risk that the image would just get distorted/blurry as it was stretched too far, so you can add a maximum pixel width to say "none shall pass" this size. Similarly, you might have an image that is way too small if they are using miniscule font size, so you can add a minimum-width. It's up to you to determine the maximum, minimum and normal size you are comfortable with.

CSS
.image {width:3em; max-width:200px; min-width:50px}

HTML
<div class="Float-L"><img alt="methane" src="../Images/methane.jpg" class="image" /></div>

eggheadbooks1 · 06-05-2013, 03:09 PM

Yes, I understand it is the width of the container, but the container also changes as the device width changes, so that works. And while the image remains static even as the font size changes, so far at least it is staying attached to the text.

I will try scaling using ems. I didn't realize I could do that with images.

Also, re: the maximum image size: last year I had a situation where I wanted the image to be 100% of the container, but not to exceed a maximum size (to prevent upsizing) and the solution then was an SVG container. I will try your method and see if that works for what I needed then, too. It's less complicated than the SVG container.

Michelle

Actually, I just noticed the .image in the CSS. To make that work for images of various sizes, I would have to make an .image for each different size. So maybe the SVG container is still best overall, and I will make a new image div class just for these two problem images.

DaleDe · 06-05-2013, 07:06 PM

Quote:

Originally Posted by eggheadbooks1

Yes, I understand it is the width of the container, but the container also changes as the device width changes, so that works. And while the image remains static even as the font size changes, so far at least it is staying attached to the text.

I will try scaling using ems. I didn't realize I could do that with images.

Also, re: the maximum image size: last year I had a situation where I wanted the image to be 100% of the container, but not to exceed a maximum size (to prevent upsizing) and the solution then was an SVG container. I will try your method and see if that works for what I needed then, too. It's less complicated than the SVG container.

Michelle

Actually, I just noticed the .image in the CSS. To make that work for images of various sizes, I would have to make an .image for each different size. So maybe the SVG container is still best overall, and I will make a new image div class just for these two problem images.

If you plan to make images different sizes you can give them id's and use the id's for CSS or you can use a CSS style inside the image statement itself.

Dale

eggheadbooks1 · 06-05-2013, 07:16 PM

Turtle:

Alas, not working. The image class that specifies an em value for the image isn't being recognized by ADE, so the full size of the image is being displayed. Is that HTML5? ADE doesn't read HTML5 even though some readers will.

And if I try to add the em value div along with the percentage value so the image will scale, the image class is ignored.

(BTW, the p class is important, otherwise the em value for the text is ignored and screwed up in relation to the rest of the book.)

Here's my tests:

CSS:

Code:

div.imageEM{
	height:5em;
	max-width:225px;
	min-width:110px;
}
div.Float-L{
	float:left;
}
div.FrameSmall{
	width:100%;
	clear:left;
}

And the HTML:

Code:

 <div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.png" width="40%" class="imageEM" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

  <div class="FrameSmall">
    <div class="Float-L"><img alt="ethane" src="../Images/ethane.png" class="imageEm" /></div>

    <p class="First6">Carbon can also share a single electron pair with another carbon atom, with hydrogen providing the remaining three available bonds. In such a case, the resulting compound is ethane (C<sub>2</sub>H<sub>6</sub>), which is depicted on the left.</p>
  </div>

  <p class="Main">Methane and ethane are but simple compounds commonly encountered in the discipline of which can be described as the study of chemical compounds of carbon other than a few very basic and simple compounds such as oxides, carbides and carbonates. Studies of the chemistry of life are an important part of organic chemistry, but do not comprise the whole field by any means, as there are many carbon compounds that are organic but play no role in the chemistry of life.</p>

And the results: see attached.

Michelle

P.S. The image alt= is just something that Sigil does automatically and it serves no harm so I leave it in.

eggheadbooks1 · 06-05-2013, 07:21 PM

Just saw my small "em" in my class in the second example. Oops. Let me try again...

Meh, no difference.

Michelle

eggheadbooks1 · 06-05-2013, 07:24 PM

Just realized one error: I made the image class a div class. Fixed that and getting closer but images are now skewed. Will work on it and report back.

Michelle

eggheadbooks1 · 06-05-2013, 07:37 PM

Okay. We're almost there. I have lowered the margin value of the Float-L division from 15px to 10px and that has gotten rid of the large gap between image and text. The em value is now recognized by ADE (and I also tested in Aldiko, which I have side-loaded on my Fire). Only one small obstacle remains: distortion of the image ratio. I added width=auto into the CSS, and while that works at most image sizes, there is some distortion remaining. Perhaps I suck that one up. But is there a better code than "width=auto".

So now it looks like this and it is working, save for the above notations:

Code:

div.FrameSmall{
	width:100%;
	clear:left;
}
div.Float-L{
	float:left;
	margin: 0 10px;
	}
.imageEM{
	height:6em;
	width:auto;
	max-width:225px;
	min-width:110px;
}

and

Code:

<div class="FrameSmall">
    <div class="Float-L"><img alt="methane" src="../Images/methane.png" class="imageEM" /></div>

    <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p>
  </div>

06-05-2013, 03:09 PM	#25
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	Yes, I understand it is the width of the container, but the container also changes as the device width changes, so that works. And while the image remains static even as the font size changes, so far at least it is staying attached to the text. I will try scaling using ems. I didn't realize I could do that with images. Also, re: the maximum image size: last year I had a situation where I wanted the image to be 100% of the container, but not to exceed a maximum size (to prevent upsizing) and the solution then was an SVG container. I will try your method and see if that works for what I needed then, too. It's less complicated than the SVG container. Michelle Actually, I just noticed the .image in the CSS. To make that work for images of various sizes, I would have to make an .image for each different size. So maybe the SVG container is still best overall, and I will make a new image div class just for these two problem images. Last edited by eggheadbooks1; 06-05-2013 at 03:12 PM. Reason: addendum

06-05-2013, 07:37 PM	#30
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	Okay. We're almost there. I have lowered the margin value of the Float-L division from 15px to 10px and that has gotten rid of the large gap between image and text. The em value is now recognized by ADE (and I also tested in Aldiko, which I have side-loaded on my Fire). Only one small obstacle remains: distortion of the image ratio. I added width=auto into the CSS, and while that works at most image sizes, there is some distortion remaining. Perhaps I suck that one up. But is there a better code than "width=auto". So now it looks like this and it is working, save for the above notations: Code: div.FrameSmall{ width:100%; clear:left; } div.Float-L{ float:left; margin: 0 10px; } .imageEM{ height:6em; width:auto; max-width:225px; min-width:110px; } and Code: <div class="FrameSmall"> <div class="Float-L"><img alt="methane" src="../Images/methane.png" class="imageEM" /></div> <p class="First6">where the single lines drawn between the hydrogen (H) and the carbon (C) atoms denote the sharing of a single electron pair. If two electron pairs are shared as often happens when atoms bond with oxygen for example, a double line is drawn, and so on.</p> </div>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
The operator >> is undefined for the argument type(s) float, float	twobob	Kindle Developer's Corner	10	09-05-2012 12:50 PM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
Why is image left justified when I link to it?	steve2112	Kindle Developer's Corner	4	03-23-2012 02:53 AM
Gold box sale on K3 (Keyboard) Covers (2h 20m left)	Wasp Woman	Amazon Kindle	0	12-01-2011 06:42 PM
Left-justified text in a right-justified box	Skeezix	Conversion	4	11-15-2011 08:44 PM

06-05-2013, 11:14 AM	#18
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	The problem with JPG is not black/white or grayscale, it's line art. Whenever the original image is a clear line drawing with sharp borders and plain colours, JPG will only ruin it, at the expense of creating an even larger file, while PNG is the perfect solution there. If Kindle is a problem you can always convert them to GIF for them.

06-05-2013, 01:16 PM	#20
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Ahhh...you've left width="40%" in your <img> tag...that is taking up 40% of your div container even though the picture is much smaller. Take it out completely like I did - or - set a max-width:Xpx (where X is the largest number of pixels you want it to take up)...I think those images were about 80px wide IIRC. Cheers,

06-05-2013, 01:18 PM	#21
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	Hi Turtle: I think I see the problem. In your successful case, you made the image smaller and set it to a fixed size; I'm trying to set it to a percentage so it will enlarge with the user's screen. Perhaps, then, what I have is the closest I'll get if I want to keep the percentage option? Thanks for all your help. You've been wonderful. Michelle

06-05-2013, 01:30 PM	#22
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	As for image size...how large (kb) are the jpg files for methane and ethane? I took a screen shot of the image you had before, cropped it, and saved as an indexed png to get these (1.4kb and 1.3kb respectively). Even if you only save 2-3kb per image, I would imagine you will have a lot of images in that kind of book and that equates to a significant savings in file size. You would also probably get much better quality than I did because you are working with the originals.

06-05-2013, 02:00 PM	#23
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	The difference in size between the jpeg and png is about 30 - 40%. About half his images are line art or text only, the other half are continuous tone (where the jpeg is smaller and better than the png). Some are in-between, probably 256-color. The client sent me fairly large jpegs, most of which have had to be downsized for the ebooks, so I should be able to get a decent png. I did a quick text of two images; the quality was nearly identical but the file size was about -30%. Thanks again, Michelle

06-05-2013, 02:03 PM	#24
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Setting the width as a percentage is just telling it what percentage of the container to use. If you set it at 50% then it will take up half of the div...which itself is set to fill the screen with a width of 100%...so effectively you are saying take up half of the screen for this image. Scaling the image in this manner doesn't work for what you want to do. With an ebook's reflowable nature, the words will automatically fill the extra landscape that a larger display provides...they do NOT automatically increase in font size. What I think you want is to increase the image when the FONT size is increased to keep the same proportion between the image and font. You can do that by assigning the width to an "em". If you want the image to be the same height as 3 letters/lines you could say "width:3em" in your CSS. With that method you run the risk that the image would just get distorted/blurry as it was stretched too far, so you can add a maximum pixel width to say "none shall pass" this size. Similarly, you might have an image that is way too small if they are using miniscule font size, so you can add a minimum-width. It's up to you to determine the maximum, minimum and normal size you are comfortable with. CSS .image {width:3em; max-width:200px; min-width:50px} HTML <div class="Float-L"><img alt="methane" src="../Images/methane.jpg" class="image" /></div>

06-05-2013, 07:21 PM	#28
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	Just saw my small "em" in my class in the second example. Oops. Let me try again... Meh, no difference. Michelle

06-05-2013, 07:24 PM	#29
eggheadbooks1 Read, don't parrot. Posts: 224 Karma: 110242 Join Date: Apr 2011 Device: Kindle Fire, Kobo Touch, Aldiko for Android	Just realized one error: I made the image class a div class. Fixed that and getting closer but images are now skewed. Will work on it and report back. Michelle