View Full Version : Want to Center Irregular Images with text wrap


GrannyGrump
03-25-2013, 06:24 AM
I don't know if this can be done in a way that works on most screen widths.

My image is an inverted L-shape, and text wraps inside the L beside the narrow leg, but no text-flow allowed next to the horizontal wide leg.

I want to center the image on the screen, and it works well for a narrow screen. But in a very wide window, such as a full-screen browsing window, the text overflows the image. So to keep the text from overflowing the upscaled image, I have to let the image sit left- or right-aligned.

Screenshots are from Sigil. I couldn't check with ADE, when I widen the screen I get two columns, or the image fills the screen and the text falls off onto the next page.

So, is there any answer to this quandry, or should I just let the images sit where they are comfortable?

Here is the CSS I'm using

/*IRREGULAR IMAGES
thanks to Jellby and Zelda Pinwheel on MobileRead forums*/

div.ellshapeLeft,
div.ellshapeRight {
border: 0; padding: 0;
margin: 0 0 .75em 0;
text-indent: 0;
}
div.ellshapeRight {
text-align: right; /*THIS IS WHERE I WANT TO SET IMAGE TO ALIGN CENTER*/
}
div.ellshapeRight img,
div.ellshapeLeft img {
text-indent: 0;
width: 100%;
max-width: 750px;
}
div.ellshapeRight div,
div.ellshapeLeft div {
text-indent: 0;
margin: 0;
}
div.ellshapeRight div.picture,
div.ellshapeLeft div.picture {
width: 100%;
height: 1em;
margin: 0 0 0 0;
overflow: visible;
text-indent: 0;
}
div.ellshapeRight div.top,
div.ellshapeLeft div.top,
div.ellshapeRight div.bottomRight,
div.ellshapeLeft div.bottomLeft {
/* hide as much as possible */
position: relative;
z-index: -1;
visibility: hidden;
opacity: 0;
}
div.ellshapeRight div.top,
div.ellshapeLeft div.top {
float: none;
width: 100%;
margin-bottom: -1em;
}
div.ellshapeLeft div.bottomLeft {
float: left;
clear: both;
margin-right: .5em;
}
div.ellshapeRight div.bottomRight {
float: right;
clear: both;
margin-left: .5em;
}

div.ellshapeLeft p,
div.ellshapeRight p {
text-indent: 0;
font-size: smaller;
font-style: italic;
}
div.ellshapeRight p {
text-align: right;
}

div#chair div.bottomRight {
width: 42%; /*260px*/
max-width: 325px; /*constrains text-wrap margin when img upscales*/
}
div#garrison div.bottomRight {
width: 38%; /*230px*/
max-width: 300px;
}

and here is the HTML
<div class="ellshapeRight" id="chair">
<div class="picture"><img alt="The Queen’s Chair" src="../Images/p067.jpg" /></div>

<div class="top"><img alt="" src="../Images/p067auxTop.png" /></div>

<div class="bottomRight"><img alt="" src="../Images/p067auxBotm.png" /></div>

<p>“Queen’s Chair”</p>
</div>

Jellby
03-25-2013, 12:38 PM
Well, all I can say is you cannot really trust Sigil to represent what a real ebook reader will do... and you cannot trust an ebook reader to do what a well-behaved HTML renderer should do.

To debug your problem, you could try un-hiding the different parts and adding borders, to see where everything is placed, but I'd say the issue is that the invisible "bottom right" part is scaled relative to the page width, and if the image width is different from that... well, then it doesn't match.

GrannyGrump
03-27-2013, 12:12 AM
Jellby, thanks for responding and sorry for the late reply.

I tested using borders as you suggested, and the problem is that the bottom "invisible" image does not stay inside the confines of the main div. It slides over to the far right margin, and I haven't been able to figure out how to fix.

Does anyone have a suggestion?

Jellby
03-27-2013, 05:25 PM
So bottomRight moves out of ellshapeRight? Maybe the float or the position:relative is causing the problem.

mrmikel
03-27-2013, 08:09 PM
Why do I get the feeling that if it is this finicky it is bound to fail on some e-reader.

GrannyGrump
03-28-2013, 06:34 AM
@Jellby, thanks for speculations. I am downloading some tutorials on positioning.

But,
@mrmikel, I suspect you may be correct. These images may have to forgo text-wrap, and stand on their own on the page.

Ripplinger
03-28-2013, 07:46 AM
If I were doing it, I'd simply cut off the bottom right side of the image to avoid the problem entirely. You'll only be cutting off part of the cannon, which isn't important to the image or the text and anyone will still tell it's a cannon.

If you do get it look correct on some readers, I think mrmikel is right in that it probably will not show correctly on other devices. So I'd go for avoiding the problem entirely with cropping the image.

mrmikel
03-28-2013, 08:18 AM
If you could arrange it so it was a pull quote or box, you could make an image of the whole thing, images and text laid out just so. But I don't know if that makes sense in the context of what you are doing.

Ripplinger
03-28-2013, 05:58 PM
Besides avoiding the problem like I said by cropping the image, I think it just looks 100x better without the odd image shape and trying to fit text around that.

Jellby
03-29-2013, 05:06 AM
On second thought, I doubt it can be done. In order to get text flowing around images, I think the only option is using "float". But a floating element moves all the way to the right (or left) of the block containing the text. You want it to move only partially to the right (to the position where the centered image above is located), and yet have the text wrap only it left side.

If we could use scripting, we could query the main image for its exact position or size, same with the text block, and calculate how much right margin we should add to the floating image to make it look right. But with the available tools I don't think we can do that. (With scripting we could also get rid of the dummy images for the different pieces.)

So, Ripplinger's suggestion is one solution, but if you want something that works for other images, or if you don't want to alter the original image, then I think you have to either (a) force the image to 100% width; or (b) forget about text wrapping.

GrannyGrump
03-29-2013, 07:43 AM
Thank you all for responding.

@mrmikel, no, I don't think an image of the text would be right for this project. But it is something that might work for other books.

@Ripplinger, that looks mighty sharp. I had only considered cropping, but the framing is very nice.

@Jellby, yup, I have been making myself crazy fiddling with Positioning and Floating and Aligning. I know the text-wrap works if the image is right- or left-aligned, I just had a wish I could center it. But if nobody has a solution to get text-wrapped irregular images to appear correctly in iBooks (see http://www.mobileread.com/forums/showthread.php?t=209230), we will have to give up text-wrap anyway.

Thank you all for your time and input!

GMcG
03-30-2013, 05:19 AM
I have copied your picture, resized it and placed it centered on another plain white picture with width=800.
Then I have cut it into pieces (top and bottom) and saved them as transparent gif.
The epub was made with Calibre. With Sigil I got a white space between top and bottom part and I didn't know how to get rid of it. With Calibre as well as with Sigil your picture is always centered with the text floating along. But when opening the Calibre.epub in Sigil you will get the white space again. I would recommend to download Calibre to get the epub-viewer. It can be used as stand-alone viewer.

George

Jellby
03-30-2013, 08:17 AM
I have copied your picture, resized it and placed it centered on another plain white picture with width=800.

And then you will have wasted white space and a scaled down picture if the screen width is less than 800.

Then I have cut it into pieces (top and bottom) and saved them as transparent gif.

Part of the interest in the code grannyGrumpy is trying to use lies in the fact that you don't have to cut the image into pieces (although you have to measure it) or convert it to another format (illustrations are often more efficient to store in JPG format).

dgatwood
04-01-2013, 03:23 AM
The max-width: 100% CSS property is probably what you want, causing the image to scale to the entire width of the image. The problem is that this will require completely redoing the way you are creating the inset for the text so that it will scale equally.

If you use a negative bottom margin, it will raise all the text up. If you then create a transparent spacer image that is the same width as the part that sticks down, float it right, and set its max-width (in percent) to the width of the part that sticks down times 100 divided by the total, you should then be able to block out that second region.

Then, between the actual image and the spacer, add a single-pixel-high spacer with max-width: 100% to ensure that none of the text ends up being beside the image even if the screen height would cause the image to not expand to full width. However, there's still the problem of the reader potentially adding a page break that could cause the bottom part of the image to go away entirely.

---

Maybe the idea of breaking it up into two pieces is a better idea. Float the bottom tail to the right. Set all the left and right margins to zero. Set the max-width to 100% for the big part, and the appropriate percentage for the small part. Note that you may need to pad the image to ensure that the percentage can be precisely expressed. :)

Then, the worst-case scenario is that the reader wraps the tail to the next page.

Thoughts?

GrannyGrump
04-02-2013, 12:30 AM
@ GMcG, many thanks for the feedback. I remember trying something similar a long time ago when I first started, and had the same white-space problem between the two pieces. Now, on your example, I tried putting a negative bottom margin on the "top" class, and got rid of the whitespace. Yay! (I don't know if it would give similar results across a range of readers, but this is an alternative if I can't use png with alpha transparency to force the float/text-wrap.)
.top {
height: auto;
margin-bottom:-5px;
width: 100%
}


@ dgatwood -- The max-width: 100% CSS property is probably what you want, causing the image to scale to the entire width of the image.
Do you mean scale the image to the entire width of the DIV? If so, THANK YOU, I think this might work. :thanks:

Anyway, it works in the Sigil preview and in ADE, with this change to the primary DIV class, and to the IMG. (I made the DIV narrower this time so I could see results on ADE on a standard monitor, and so that the image wouldn't blow up so huge.)

div.ellshapeLeft,
div.ellshapeRight {
border: 0; padding: 0;
margin: 0 0 .75em 20%;
width: 60%;
text-indent: 0;
text-align: center;
}
div.ellshapeRight img,
div.ellshapeLeft img {
text-indent: 0;
width: 100%;
/* max-width: 750px;*/
max-width: 100%;
}

I didn't have to mess around with negative bottom margin at all for this one (I tried that once, and had a heckuva time -- pixels weren't right when the image was scaled very much at all, ems weren't right if the font-size got too wacky, then I gave up.) But of course, I haven't tested on my Sony yet, and don't know what other readers would do.

JSWolf
04-02-2013, 11:24 PM
Take a look at Zelda's version of Three Men in a Boat. It does have text wrapping around irregular images. It looks very nice on a 6" screen. You could see how the code is done and also see if it works with iBooks.

GrannyGrump
04-02-2013, 11:53 PM
Thanks, JSWolf. I've used Zelda's code from Three Men a number of times before. Three Men actually does not have any images like the ones I'm working with, where text needs to be blocked from flowing beside the upper portion of the image.

The code I'm using now is based on code by Jellby (Tom Sawyer epub (http://www.mobileread.com/forums/showthread.php?t=135679)) and Zelda.


AlexBell reports that the irregular images I've coded display as thumbnails using iBooks on iPad.
http://www.mobileread.com/forums/showthread.php?t=209230

I don't own an iPad, so I must wait patiently for someone with an iPad to report if the changes I made (post #15) work for them. (hint, hint)

Turtle91
04-03-2013, 01:08 AM
iBooks still shows it as a thumbnail.
Marvin shows at about 50% of screen width and the text appears to wrap appropriately. However only the first line of text "overlays" the image while the next two lines just have a large right margin. (I will try and post the image if I can figure out how to do that from an iPad)

One thing I first noticed... The image with text overlay looks good in the normal viewing mode (black letters on white background) but starts to look really funky if you go to night mode or any other background color. Did you use a png/gif with transparent background?? I haven't played with that enough to know if transparency is even supported.

Cheers!

https://dl.dropbox.com/u/135370804/IMG_0009.PNG

Turtle91
04-03-2013, 01:19 AM
Here's the image from ibooks. Sorry about the HUGE picture...haven't figured out how to reduce with ipad yet...lol

https://dl.dropbox.com/u/135370804/IMG_0010.PNG

AlexBell
04-03-2013, 02:58 AM
Could you tell me please how you got that image from iBooks? I'm probably going to feel stupid for not being able work out how to do it, but I'll survive.

GrannyGrump
04-03-2013, 03:12 AM
Hey Turtle, thank you for the screenshots.

Ewwwwww! Crummy buttons! this is worse than I expected.

Yes, I'm using transparent pngs with alpha-channel transparency to underlay the actual image and force the text-wrap. The containing div is set at 60% width of screen, so Marvin seems to be showing that almost correctly anyway.

These work well in my Sony TS-1, and ADE on the pc. But I don't have a clue why iBooks shows the image as a thumbnail.

I had not thought about what happens for Night Mode. Brrrr. That is pretty awful, and the only thing I can think of is to use either a transparent gif or transparent png for the actual image (not the underlay), so that the "cutout" would be transparent. But then file size gets much bigger.

There are getting to be too many problems, even if some of them have hacks/workarounds to get them halfway working. I'm thinking it's probably best to simply crop and center these irregulars.

Thanks again for feedback.

Jellby
04-03-2013, 04:21 AM
I'd just forget about wrapping and consider all pictures as plain rectangular ones (without cropping). It's less "pretty", but more robust.

GrannyGrump
04-03-2013, 05:07 AM
Jellby, I think you're right. It was fun to meet the challenge of doing these, as long as I had a shot at making them look good the majority of the time, but it seems there are too many variables, and far too many ways to fail!

Simple floats, sometimes, maybe; but the irregulars have worn out their welcome in my code bucket for now.

Turtle91
04-03-2013, 02:30 PM
Could you tell me please how you got that image from iBooks? I'm probably going to feel stupid for not being able work out how to do it, but I'll survive.

I just learned this myself...hit the power button and the "home" button at the same time...it takes a screenshot and saves in your pictures.

Turtle91
04-03-2013, 02:36 PM
If epub supports transparencies, then this should be doable....hmmmm something else for me to play around with.....AFTER I get may taxes done :(

JSWolf
04-03-2013, 09:57 PM
Does this have to work in iBooks? iBooks is a bit non-standard and doesn't always work as expected. You could make it a normal rectangle for iBooks and the way you want for others.

AlexBell
04-04-2013, 03:22 AM
I just learned this myself...hit the power button and the "home" button at the same time...it takes a screenshot and saves in your pictures.

Thanks, Dion