Image sizes and text alignment

HeartWare · 11-01-2023, 10:51 AM

In plain HTML I can do this:

<P>
<IMG SRC="..." WIDTH="50vw" ALIGN="LEFT">text, text...
</P>

to have the image scaled to 50% of the page width and the text flowing along the right-hand side of the image for the height of the image, and then flowing along the full width of the page.

In some readers, I can use WIDTH="50%" to achieve the same, but other readers interpret the 50% as "half the width of the image's full size" and not "half the width of the view (page)".

Is there a consistent way in ePub to tell that I want the image to occupy 50% (or 40%/33% etc.) of the page width and the text to flow around it?

Turtle91 · 11-01-2023, 11:11 AM

<div class="image"><img src="…" alt=""/></div>

.image {width=50%; float:left}
img {width:100%; max-width: 1000px *or whatever the width of your image*}

And welcome to MR!!

HeartWare · 11-01-2023, 12:21 PM

Quote:

Originally Posted by Turtle91

And welcome to MR!!

Thank you...

Quote:

Originally Posted by Turtle91

<div class="image"><img src="…" alt=""/></div>

.image {width=50%; float:left}
img {width:100%; max-width: 1000px *or whatever the width of your image*}

From what I've read elsewhere, shouldn't it be

.image {width=50%; height=auto; float:left}

and if not, then why not (just asking to learn).

And is it the img {width:100%; max-width: 1000px *or whatever the width of your image*} part that makes the 50% be 50% of the page width and not the image width?

Also, where do I put the "Text, text" part - inside or outside the <div>? And should the <div> be embedded in a <p> or does the <div> replace the <p> ?

JSWolf · 11-01-2023, 03:32 PM

You do not want 50vw. It doesn't work in a lot of cases. % is much better. Also, you don't want uppercase.

Turtle91 · 11-01-2023, 11:22 PM

Quote:

Originally Posted by HeartWare

From what I've read elsewhere, shouldn't it be

.image {width=50%; height=auto; float:left}

and if not, then why not (just asking to learn).

If you leave the height off it defaults to "auto" and keeps the proper aspect ratio. Use it, or not, at your discretion.

Quote:

Originally Posted by HeartWare

And is it the img {width:100%; max-width: 1000px *or whatever the width of your image*} part that makes the 50% be 50% of the page width and not the image width?

The <div> width of 50% is telling it to take up 50% of the container… in this case the <body>. The <img> width is telling it to take up 100% of its container… the <div>… which is half the <body>. The float on the <div> allows the following elements to take up the remaining space and flow around the <div>.

Quote:

Originally Posted by HeartWare

Also, where do I put the "Text, text" part - inside or outside the <div>? And should the <div> be embedded in a <p> or does the <div> replace the <p> ?

The <div> replaces the <p> in this case. Technically you could use either, but to be more semantically correct I’d use a <div> (for ePub2) since an image isn’t really a "paragraph". For ePub3 you could be even more semantically correct and use the <figure> and <figcaption> tags instead of the <div>.

For the ePub2 <div> example I would put the text right after the <img> inside the <div>, possibly surrounded by a <span>, but not necessarily. Then use the CSS to style it however you want.

Code:

<div class="image"><img src="…" alt="…"/><span>Some Caption Text</span></div>

.image     {width:50%; float:left}
.image img {width:100%; max-width:1000px}
.image span{display:block; font-size:.6em; font-style:italic; margin-top:.5em;
            text-align:center; yadda-yadda}

EDIT: Be aware that having the text inside the <div> does NOT guarantee the text and image will be kept together on the same "screen" that is entirely dependent on factors that you can’t control. You can use CSS to tell the renderer what your preferences are (eg. page-break-inside: avoid) but it isn’t required to follow your request. The only way to guarantee they are kept together is to include the caption as part of the image (using photoshop or some image editor) but there are reasons why that technique is not recommended.

Turtle91 · 11-01-2023, 11:28 PM

Quote:

Originally Posted by JSWolf

You do not want 50vw. It doesn't work in a lot of cases. % is much better. Also, you don't want uppercase.

JSWolf is correct that xhtml (ePub spec) doesn’t allow capital letters in the tags like regular HTML, so be careful there.

However, vw and vh work very well on devices that support them. Check which market you are targeting (if any) to see if their devices support vw/vh. Percentages are safer, but they don’t provide some of the benefits gained with vw/vh.

RbnJrg · 11-02-2023, 11:23 AM

Quote:

Originally Posted by Turtle91

EDIT: Be aware that having the text inside the <div> does NOT guarantee the text and image will be kept together on the same "screen" that is entirely dependent on factors that you can’t control...

Yes, but that's entirely true only under epub2; with epub3 it is perfectly possible to ensure that the text remains attached to the image, regardless of the size change in the text. Below I attach some images in ADE 4.5x that illustrate what I am saying (in the images I have selected part of the text of captions so it can be seen that the "text" is text and not part of the image):

Click image for larger version

Name: Image0.png
Views: 35
Size: 319.3 KB
ID: 204524

Click image for larger version

Name: Image1.png
Views: 38
Size: 289.1 KB
ID: 204525

Click image for larger version

Name: Image2.png
Views: 35
Size: 338.3 KB
ID: 204526

Click image for larger version

Name: Image3.png
Views: 34
Size: 307.6 KB
ID: 204528

As you can see, fragmentation is completely avoided and the text remains attached to the image (all this regardless of the change in font size). The image and the corresponding caption float "vertically" (they do not remain anchored to any paragraph, division or block) thereby ensuring that there are no blank spaces and that the caption remains attached to the image (the vertical displacement can be —at most— half a screen up or down).

Turtle91 · 11-02-2023, 11:30 AM

The example I was referencing was for ePub2. The failure case I was thinking about was on a small screen (like a phone) where the image height barely fits the display height. In that case the text would wrap to the next screen.

I don’t have experience with ePub3. Is there something special you did that would make a <div> NOT split in that case, or are you referencing <figure> functionality??

HeartWare · 11-02-2023, 12:32 PM

Quote:

Originally Posted by JSWolf

You do not want 50vw. It doesn't work in a lot of cases. % is much better. Also, you don't want uppercase.

I know - my example was HTML (web) and not xhtml (epub). I was asking for the equivalent xhtml.

HeartWare · 11-02-2023, 12:40 PM

Thank you all, I'll check it all out over the weekend (one of the advantages of having my own markup language that then gets translated into .html (for web use) or .xhtml (for epub use) is that I can tweak each output for maximum compatbility with that target).

For instance, a left-aligned image at 50% width with floating text is defined as

[IMG:<File Name> L 50%]Text, yaddah, yaddah.

HeartWare · 11-02-2023, 12:59 PM

Is it possible to have the "50" part of the "50%" be a parameter in the <div> tag, or should I simply define

.image50 {width:50%; float:left}
.image33 {width:33%; float:left}

and then just use the appropriate class in the <div> tag?

JSWolf · 11-02-2023, 01:35 PM

Quote:

Originally Posted by Turtle91

JSWolf is correct that xhtml (ePub spec) doesn’t allow capital letters in the tags like regular HTML, so be careful there.

However, vw and vh work very well on devices that support them. Check which market you are targeting (if any) to see if their devices support vw/vh. Percentages are safer, but they don’t provide some of the benefits gained with vw/vh.

Too many devices and/or programs do not support vw and vh. So it's best to use % which will work in many more cases. It's basically the same thing eccept one works more then the other.

Turtle91 · 11-02-2023, 01:36 PM

You may be able to use JS to make it a parameter, but you are making it MUCH more complex… much greater opportunity for reader/device conflicts. I would stick with the image50 / image33 concept.

JSWolf · 11-02-2023, 01:37 PM

Quote:

Originally Posted by HeartWare

Is it possible to have the "50" part of the "50%" be a parameter in the <div> tag, or should I simply define

.image50 {width:50%; float:left}
.image33 {width:33%; float:left}

and then just use the appropriate class in the <div> tag?

Yes you can do that.

RbnJrg · 11-02-2023, 01:41 PM

Quote:

Originally Posted by Turtle91

The example I was referencing was for ePub2.

Yes, I realized that; For that reason I didn't say that you were wrong but that what you stated was only valid for epub2.

Quote:

The failure case I was thinking about was on a small screen (like a phone) where the image height barely fits the display height. In that case the text would wrap to the next screen.

Yes, I agree with you statement if we are speaking about epub2. In that case, is like you said, the only way to guarantee that image and caption are kept together is to include the caption as part of the image.

Quote:

I don’t have experience with ePub3. Is there something special you did that would make a <div> NOT split in that case, or are you referencing <figure> functionality??

That, in conjunction with the use of properties "-webkit-column-break-inside: avoid !important;", "break-inside: avoid !important;", "display: inline-block !important" and "float: left" (or float: right). The <figure> block does all the "dirty work" and the others properties are used to asure the block remains together. In some ereaders, if you don't use "-webkit-column-break-inside: avoid !important;", "break-inside: avoid !important;", "display: inline-block !important" the <figure> block is splitted.

EDIT: Of course, also the use of <figcaption> inside the <figure> block

11-01-2023, 10:51 AM	#1
HeartWare Enthusiast Posts: 27 Karma: 10 Join Date: Nov 2023 Location: Copenhagen, DK Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13	Image sizes and text alignment In plain HTML I can do this: <P> <IMG SRC="..." WIDTH="50vw" ALIGN="LEFT">text, text... </P> to have the image scaled to 50% of the page width and the text flowing along the right-hand side of the image for the height of the image, and then flowing along the full width of the page. In some readers, I can use WIDTH="50%" to achieve the same, but other readers interpret the 50% as "half the width of the image's full size" and not "half the width of the view (page)". Is there a consistent way in ePub to tell that I want the image to occupy 50% (or 40%/33% etc.) of the page width and the text to flow around it?

11-02-2023, 12:40 PM	#10
HeartWare Enthusiast Posts: 27 Karma: 10 Join Date: Nov 2023 Location: Copenhagen, DK Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13	Thank you all, I'll check it all out over the weekend (one of the advantages of having my own markup language that then gets translated into .html (for web use) or .xhtml (for epub use) is that I can tweak each output for maximum compatbility with that target). For instance, a left-aligned image at 50% width with floating text is defined as [IMG:<File Name> L 50%]Text, yaddah, yaddah. Last edited by HeartWare; 11-02-2023 at 12:43 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Image Alignment Issues	AndrewCanada	Editor	2	10-06-2019 11:47 AM
Text - Image alignment problem	MrB	Sigil	10	11-03-2012 03:36 AM
Hello/Image and text alignment	Derek R	Introduce Yourself	3	06-26-2011 10:47 AM
Image alignment and spacing	Derek R	Kindle Formats	5	06-25-2011 12:57 PM

11-01-2023, 11:11 AM	#2
Turtle91 A Hairy Wizard Posts: 3,117 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	<div class="image"><img src="…" alt=""/></div> .image {width=50%; float:left} img {width:100%; max-width: 1000px or whatever the width of your image} And welcome to MR!!

11-01-2023, 03:32 PM	#4
JSWolf Resident Curmudgeon Posts: 74,455 Karma: 129358310 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You do not want 50vw. It doesn't work in a lot of cases. % is much better. Also, you don't want uppercase.

11-02-2023, 11:30 AM	#8
Turtle91 A Hairy Wizard Posts: 3,117 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	The example I was referencing was for ePub2. The failure case I was thinking about was on a small screen (like a phone) where the image height barely fits the display height. In that case the text would wrap to the next screen. I don’t have experience with ePub3. Is there something special you did that would make a <div> NOT split in that case, or are you referencing <figure> functionality??

11-02-2023, 12:59 PM	#11
HeartWare Enthusiast Posts: 27 Karma: 10 Join Date: Nov 2023 Location: Copenhagen, DK Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13	Is it possible to have the "50" part of the "50%" be a parameter in the <div> tag, or should I simply define .image50 {width:50%; float:left} .image33 {width:33%; float:left} and then just use the appropriate class in the <div> tag?

11-02-2023, 01:36 PM	#13
Turtle91 A Hairy Wizard Posts: 3,117 Karma: 18727091 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	You may be able to use JS to make it a parameter, but you are making it MUCH more complex… much greater opportunity for reader/device conflicts. I would stick with the image50 / image33 concept.

Advert

Advert