03-25-2013, 05:24 AM | #1 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Want to Center Irregular Images with text wrap
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 Code:
/*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; } Code:
<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> Last edited by GrannyGrump; 03-25-2013 at 05:34 AM. Reason: add ADE info |
03-25-2013, 11:38 AM | #2 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
03-26-2013, 11:12 PM | #3 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
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? |
03-27-2013, 04:25 PM | #4 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
So bottomRight moves out of ellshapeRight? Maybe the float or the position:relative is causing the problem.
|
03-27-2013, 07:09 PM | #5 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
Why do I get the feeling that if it is this finicky it is bound to fail on some e-reader.
|
03-28-2013, 05:34 AM | #6 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@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. |
03-28-2013, 06:46 AM | #7 |
350 Hoarder
Posts: 3,574
Karma: 8281267
Join Date: Dec 2010
Location: Midwest USA
Device: Sony PRS-350, Kobo Glo & Glo HD, PW2
|
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. |
03-28-2013, 07:18 AM | #8 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
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.
|
03-28-2013, 04:58 PM | #9 |
350 Hoarder
Posts: 3,574
Karma: 8281267
Join Date: Dec 2010
Location: Midwest USA
Device: Sony PRS-350, Kobo Glo & Glo HD, PW2
|
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.
|
03-29-2013, 04:06 AM | #10 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
03-29-2013, 06:43 AM | #11 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
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 https://www.mobileread.com/forums/sho...d.php?t=209230), we will have to give up text-wrap anyway. Thank you all for your time and input! |
03-30-2013, 04:19 AM | #12 |
Writer
Posts: 101
Karma: 590630
Join Date: Mar 2011
Location: Munich, Germany
Device: none
|
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 |
03-30-2013, 07:17 AM | #13 | ||
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
|
||
04-01-2013, 02:23 AM | #14 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
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? |
04-01-2013, 11:30 PM | #15 | |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977556
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
@ 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.)
Code:
.top { height: auto; margin-bottom:-5px; width: 100% } @ dgatwood -- Quote:
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.) Code:
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%; } |
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Floats, images, text-wrap --- need advice | GrannyGrump | ePub | 11 | 09-06-2012 09:14 AM |
Irregular Images | RKEP71 | Sigil | 5 | 10-06-2011 01:25 PM |
TEXT WRAP AROUND IMAGES | RKEP71 | Sigil | 1 | 06-20-2011 08:26 PM |
Help - text won't wrap around Images | WRB | Sigil | 2 | 02-11-2011 01:46 AM |
Q: Tables, images, and word-wrap | AndrewH | Workshop | 2 | 12-22-2010 02:34 AM |