View Full Version : Need text box to float left beside image


eggheadbooks1
06-04-2013, 02:38 AM
I need a block of text to display to the right of a picture and not disconnect as the user changes the font size. I have tried a floating borderless frame but the problem is that while it looks great half the time (see ADE1.jpg), if the font is not just the right size I get this (see ADE2.jpg).

I tried putting the text inside a larger borderless frame along with the image, but cannot seem to get the text to float to the left of the image.

Any help would be appreciated.

The current code is this:

CSS:

div.FrameSmall{
border:0px;
padding:5px 5px 5px 5px;
float:left;
width:25%;
margin: 10px 10px 10px 0px;
}

HTML:

<div class="FrameSmall"><img alt="15.1methane" width="100%" src="../Images/15.1methane.jpg" /></div>

<p class="First6" style="margin-right:2.5em">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>

Michelle

P.S Jellby: Hope you're around. You're good at this!

P.P.S. In my original post I accidentally wrote "left" instead of "right." My bad.

roger64
06-04-2013, 03:53 AM
Hi,

After float:left, I would add: clear:left.

Turtle91
06-04-2013, 04:56 AM
Hi,

After float:left, I would add: clear:left.

:2thumbsup

The smaller font allows the 2nd float to be beside the first, if you add clear:left it forces it to the next line.

eggheadbooks1
06-04-2013, 02:51 PM
Hi Turtle:

So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.


Michelle

Tex2002ans
06-04-2013, 04:57 PM
So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.

I believe Turtle91 was just specifying what "clear" does.

The current code is this:
CSS:

div.FrameSmall{
border:0px;
padding:5px 5px 5px 5px;
float:left;
width:25%;
margin: 10px 10px 10px 0px;
}
HTML:

<div class="FrameSmall"><img alt="15.1methane" width="100%" src="../Images/15.1methane.jpg" /></div>

<p class="First6" style="margin-right:2.5em">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>

I wanted to let you know that instead of using the "Quote" system for code, you should use the CODE tag. In the MobileRead editor, the button looks like a '#'.

Also, I just wanted to inquire about one thing.

Any specific reason you are using JPG for these chemistry diagrams instead of PNG? Artificial images with very few colors are RIPE for PNG Indexing (giving you MUCH smaller file sizes). :)

eggheadbooks1
06-04-2013, 09:55 PM
Any specific reason you are using JPG for these chemistry diagrams instead of PNG? Artificial images with very few colors are RIPE for PNG Indexing (giving you MUCH smaller file sizes). :)

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

Turtle91
06-04-2013, 10:30 PM
Hi Turtle:

So, are you saying Roger64's solution will not work? In which case, do you have any suggestions of what might work? I'm at a loss.
Michelle


It WILL work...I was just clarifying why you were having the problem and what the clear would do.

Tex2002ans
06-04-2013, 10:50 PM
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?

To my knowledge KindleGen only generates black backgrounds when the PNGs use transparency. As long as you stay away from transparency in your PNGs you should be A-ok.

Bloated JPGs are just one of my little pet peeves. I just hate EPUBs that are overly large! :D

Especially when you have many diagrams, all those KBs really begin to add up!

After float:left, I would add: clear:left.

The smaller font allows the 2nd float to be beside the first, if you add clear:left it forces it to the next line.

I will definitely have to keep this in mind in the future. This would be very helpful in a few books I have worked on with lots of floats.

eggheadbooks1
06-04-2013, 11:35 PM
Clear:left doesn't work.

If I place the text within the frame to keep it connected to the image, the text still falls below the image. If I place the text outside the image, "clear:left" keeps the two images from overlapping (see OP second jpeg) BUT I still cannot get the text to stay connected to the image. I need the second image always to sit beside "Carbon can also share..." even if it means a large white space between it and the preceding paragraph/image combo (I can always make the image smaller, in an average-text-size sort of guess).

Any ideas anyone?

Michelle

eggheadbooks1
06-04-2013, 11:36 PM
Sorry, here is screen shot from "clear:left". You can see that the text is not in alignment with the images as I need it to be.

Michelle

eggheadbooks1
06-04-2013, 11:38 PM
Sorry, forgot to hit the upload button. It's been that kind of day...

eggheadbooks1
06-04-2013, 11:55 PM
This is as far I seem to be able to get (see jpeg). The CSS is:

div.FrameSmall{
border:0px;
padding:5px 5px 5px 5px;
float:left;
width:100%;
margin: 10px 10px 10px 0px;

And the HTML:

<div class="FrameSmall">
<img alt="15.1methane" src="../Images/15.1methane.jpg" width="20%" />

<p class="First6" style="margin-right:2.5em">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>

Or this (it makes no difference to the results):

<div class="FrameSmall">
<img alt="15.2ethane" src="../Images/15.2ethane.jpg" width="20%" />
<div>

<p class="First6" style="margin-right:2.5em">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>

Any ideas? Anyone?

Michelle

Turtle91
06-05-2013, 12:40 AM
I don't see where you added the clear:left??

This should work:

div.FrameSmall {clear:left; width:100%}
div.Float-L {float:left; margin:5px}

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

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

A couple things:
Wrap the image in its own div.
You don't need the file name in the alt tag. It is supposed to be descriptive text that shows up if the image is missing, or is read aloud by Text-to-Speach software. If you don't have descriptive text, then leave it blank.
Change the file names of your images so they don't start with a number; and I would use a dash or underscore instead of a period between the numbers.
Put the style for your text in the "First6" definition in the CSS...that's what it's for.

And IMO, I would shrink the size of the images for methane and ethane a bit...they overpower the text a tad...as well as make them a .png like was mentioned before. It will save a ton of space if you have a lot of them.

Cheers!

eggheadbooks1
06-05-2013, 01:26 AM
Hi Turtle:

I had taken out the clear:left because it wasn't working.

I tried the code you sent on the first image -- and thank you much for your help so far -- and I can now get the text to sit to the right of the image, but the space between the image and text is so large that when viewed in a typical ereader the effect is the same as no code: the text goes to the next line.

I have attached a screen shot of the effect of your code when viewed in Sigil (which I am using) and the effect when viewed in ADE.

Michelle

Turtle91
06-05-2013, 07:53 AM
It looks like you have a huge margin somewhere...either to the right on the <div class="Float-L"> or to the left on the <p class="First6">. Can you post the current CSS and HTML that gave you the result in your image - including the CSS for "First6"?

Turtle91
06-05-2013, 09: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:

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:

<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, 12:08 PM
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, 12:14 PM
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, 01: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

<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, 02: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, 02: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, 02: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.

106660

106661

eggheadbooks1
06-05-2013, 03: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, 03: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, 04: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, 08:06 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.

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, 08: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:

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

And the HTML:

<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, 08: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, 08: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, 08: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:

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

<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>

Turtle91
06-06-2013, 12:06 AM
Try setting the width:6em (instead of height) and leave height:auto (or remove it as auto is default).

I know it is a little backwards to set width with a "height value" (em), but it works.

eggheadbooks1
06-06-2013, 03:05 AM
You're right. Completely counterintuitive but it works. Changed the em value from height to width. The images don't skew anymore when up- or down-sized, though 6em does not actually translate into 6 lines of text; more like five. Will tweak.

Well done.

Thanks,
Michelle

Turtle91
06-06-2013, 03:54 AM
Yay!! Have fun! :D

Jellby
06-06-2013, 04:49 AM
though 6em does not actually translate into 6 lines of text; more like five. Will tweak.

That's because the line height is probably something like 1.2, and 6/1.2=5

Tex2002ans
06-06-2013, 07:51 AM
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.

TI did a quick text of two images; the quality was nearly identical but the file size was about -30%.

I showed off some work I did with compression of charts here (Example chart goes from JPG ~130 KBs to Indexed/Compressed PNG at 44.5 KBs (and looks WAY cleaner)):

http://www.mobileread.com/forums/showpost.php?p=2499645&postcount=26

With black and white diagrams, the savings are even more pronounced than just these few color images (B&W/Grayscale/few colors compresses VERY well in PNG).

In this large project I am in the process of working on, I generated 175 very high quality (almost all were ~1200 px wide) PNGs of Tables/Charts/Diagrams. These compressed down to 9.10 MBs.

The equivalent 175 JPGs would be ~18 MBs (I just did a rough generation of JPGs from the original source). I could probably squeeze a few MBs out by optimizing the JPGs a little, but they will reach nowhere near 9.10 MBs.

JPG is a format built for "natural/photographic" images, and the algorithm is not the greatest when dealing with "artificial" type images.

When dealing with delivery fees and/or bandwidth costs for overly large book files, cutting needless MBs off of the book is very important!

mrmikel
06-06-2013, 08:18 AM
It would seem the most efficient would be some vector graphic format for such items, but I don't know how well they are supported.