Want to Center Irregular Images with text wrap - Page 2

JSWolf · 04-02-2013, 10: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, 10: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) and Zelda.

AlexBell reports that the irregular images I've coded display as thumbnails using iBooks on iPad.
https://www.mobileread.com/forums/sho...d.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, 12: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!

Turtle91 · 04-03-2013, 12:19 AM

Here's the image from ibooks. Sorry about the HUGE picture...haven't figured out how to reduce with ipad yet...lol

AlexBell · 04-03-2013, 01: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, 02: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, 03: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, 04: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, 01:30 PM

Quote:

Originally Posted by AlexBell

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, 01: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, 08: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, 02:22 AM

Quote:

Originally Posted by Turtle91

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

04-03-2013, 12:08 AM	#18
Turtle91 A Hairy Wizard Posts: 3,095 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	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! Last edited by Turtle91; 04-03-2013 at 12:13 AM.

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

04-02-2013, 10:24 PM	#16
JSWolf Resident Curmudgeon Posts: 73,987 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.

04-03-2013, 12:19 AM	#19
Turtle91 A Hairy Wizard Posts: 3,095 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	Here's the image from ibooks. Sorry about the HUGE picture...haven't figured out how to reduce with ipad yet...lol

04-03-2013, 01:58 AM	#20
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	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.

04-03-2013, 02:12 AM	#21
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	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.

04-03-2013, 03:21 AM	#22
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I'd just forget about wrapping and consider all pictures as plain rectangular ones (without cropping). It's less "pretty", but more robust.

04-03-2013, 04:07 AM	#23
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	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.

04-03-2013, 01:36 PM	#25
Turtle91 A Hairy Wizard Posts: 3,095 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	If epub supports transparencies, then this should be doable....hmmmm something else for me to play around with.....AFTER I get may taxes done

04-03-2013, 08:57 PM	#26
JSWolf Resident Curmudgeon Posts: 73,987 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.