epub, images, and my codes - Page 2

RbnJrg · 05-02-2025, 08:00 AM

Quote:

Originally Posted by Jellby

Aren't you assuming a screen in portrait orientation? What if someone wants to read in landscape orientation (and I know someone who does)?

Under epub3, no problem:

Click image for larger version

Name: Screenshot_2025-05-02-08-36-59.png
Views: 22
Size: 209.5 KB
ID: 215384

Click image for larger version

Name: Screenshot_2025-05-02-08-37-05.png
Views: 28
Size: 601.8 KB
ID: 215385

Click image for larger version

Name: Screenshot_2025-05-02-08-37-11.png
Views: 26
Size: 209.4 KB
ID: 215386

Click image for larger version

Name: Screenshot_2025-05-02-08-42-11.png
Views: 25
Size: 184.3 KB
ID: 215387

Click image for larger version

Name: Screenshot_2025-05-02-08-46-14.png
Views: 25
Size: 232.2 KB
ID: 215388

Click image for larger version

Name: Screenshot_2025-05-02-08-46-34.png
Views: 25
Size: 153.7 KB
ID: 215389

The above screenshots show full page images (and no blank spaces generated by them) but is possible to do the same with any size of image. The problem is under epub2; you can't avoid blank spaces on ereaders based on RMSDK and the size is an issue (because you have to define a height and that is a problem with RMSDK).

RbnJrg · 05-02-2025, 08:24 AM

Since you Jellby speak spanish, here you have an example with images at half size (of course, all under epub3):

Click image for larger version

Name: Screenshot_2025-05-02-09-12-28.png
Views: 21
Size: 199.3 KB
ID: 215391

Click image for larger version

Name: Screenshot_2025-05-02-09-12-47.png
Views: 32
Size: 255.9 KB
ID: 215392

Click image for larger version

Name: Screenshot_2025-05-02-09-12-53.png
Views: 22
Size: 200.6 KB
ID: 215393

Click image for larger version

Name: Screenshot_2025-05-02-09-13-11.png
Views: 23
Size: 147.3 KB
ID: 215394

Click image for larger version

Name: Screenshot_2025-05-02-09-13-21.png
Views: 27
Size: 112.3 KB
ID: 215395

Click image for larger version

Name: Screenshot_2025-05-02-09-13-26.png
Views: 28
Size: 163.4 KB
ID: 215396

As you can see, there is no fragmentation (no blank space) and the caption remains with the image in both, portrait and landscape mode (the caption is live text). With epub2 and ereaders based on ADE, is not possible to get that.

robertmchicago · 05-02-2025, 09:11 AM

Quote:

Originally Posted by Turtle91

Using ePub3 - if your targeted reader supports the css3 properties - you can use:
'object-fit: contain' as you mentioned, and maybe take a look at 'display: flex' .

You would need to provide fallback coding for devices that don't support them.

As DNSB mentioned, I use an svg wrapper that seems to be widely supported and works on ePub2/3 and doesn't care if the reading

Thank you for your suggestion and codes for SVG wrappers, but I'm more comfortable using <img> . SVG wrappers are usually used for full-page images, also for fixed-layout epub. My images are full-width, but not full page.

RbnJrg · 05-02-2025, 09:58 AM

Quote:

Originally Posted by robertmchicago

SVG wrappers are usually used for full-page images, also for fixed-layout epub.

SVG wrappers can be also used for half size images and they don't necessarily have to be 100% screen height (in fact, in my examples I used SVG wrappers); maybe you don't know yet how to use them in the best way and for that reason you prefer to employ the <img> tag. SVG wrappers are a powerful tool that solve problems that can hardly be fixed through the <img>. But since we didn't see any examples of the images you're using or your epub layout, it's not possible to say whether it's better to use <img> or <svg> in your case. Could you post and example (a screenshot will work) of the images are you using and the text surrounding them? Of that way would be easier to us to help you better.

Turtle91 · 05-02-2025, 10:50 AM

Quote:

Originally Posted by RbnJrg

SVG wrappers can be also used for half size images and they don't necessarily have to be 100% screen height (in fact, in my examples I used SVG wrappers);

I never thought about that… but it’s so obvious now that you mentioned it… super easy to change, just set the height of the div…

Code:

<head>
    <title></title>     
    <style type="text/css">
        *   {margin:0; padding:0}
        div {width:100vw; height:30vh}
    </style>
</head>

Thanks!

RbnJrg · 05-02-2025, 12:03 PM

Quote:

Originally Posted by Turtle91

I never thought about that… but it’s so obvious now that you mentioned it… super easy to change, just set the height of the div…

That's right!

Quote:

Thanks!

You are welcome!

EDIT: I use the method of setting the div height (to me, is the best and safest), but you also have the alternative to set the height of the svg wrapper and not setting the div height, for example:

Code:

<div>
   <svg xmlns="http://www.w3.org/2000/svg" height="20vh" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 xxx xxx" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
...
   </svg>
</div>

robertmchicago · 05-02-2025, 02:53 PM

Quote:

Originally Posted by RbnJrg

SVG wrappers can be also used for half size images and they don't necessarily have to be 100% screen height (in fact, in my examples I used SVG wrappers); maybe you don't know yet how to use them in the best way and for that reason you prefer to employ the <img> tag. SVG wrappers are a powerful tool that solve problems that can hardly be fixed through the <img>. But since we didn't see any examples of the images you're using or your epub layout, it's not possible to say whether it's better to use <img> or <svg> in your case. Could you post and example (a screenshot will work) of the images are you using and the text surrounding them? Of that way would be easier to us to help you better.

Click image for larger version

Name: 6C-3T.png
Views: 36
Size: 56.4 KB
ID: 215400

Click image for larger version

Name: Straight 2-T.png
Views: 36
Size: 23.0 KB
ID: 215401

These are the sample images that we are using for testing. All images are PNG files and include shapes, letters, and numbers.

To make things easier, all images will have the same width: exactly 1240 pixels. The height will be different for each image but always less than 900 pixels.

Please note that these PNG images have been optimized using TinyPNG (https://tinypng.com).
The epub layout is simple. The text is above the image and below the image. There is no text on the left or right side of any image. The images do not have captions.
I heard that things like vw, vh, and SVG wrapping are mostly used by Apple. Other platforms like KDP, Kobo, and Nook don’t support them very well.

RbnJrg · 05-02-2025, 03:13 PM

Quote:

Originally Posted by robertmchicago

The epub layout is simple. The text is above the image and below the image. There is no text on the left or right side of any image. The images do not have captions.

Ok, but, where is the first text? Is it at the start of the page? Or it can be at the middle of the page? Or the text can be almost at the end of the page? As you can understand, if the first line of text is at the top of the page, things are easier to code.

Turtle91 · 05-02-2025, 06:21 PM

Quote:

Originally Posted by robertmchicago

I heard that things like vw, vh, and SVG wrapping are mostly used by Apple. Other platforms like KDP, Kobo, and Nook don’t support them very well.

<philosophy>
You always need to check that your target devices support the coding you use.

I'm pretty sure someone will jump on here and say to NEVER use anything but CSS2 because their old device, based on old standards, doesn't support the new capabilities. That concern is partly true. You should always test on the devices in your target market. However, there are methods of coding that will use the new CSS on devices that support it, and 'fall back' to the older CSS if it doesn't support it.

vw and vh are part of the current CSS that is seeing more and more support....it's OK to use them as long as you provide fallback. eg. {width:100%; width:100vw}

I am not aware of a device that doesn't support SVG wrappers unless it is really old (like maybe mobipocket). It's up to you if you want to lose the .02 cents and not serve that market to make all the rest of the books look nice.

I'm pretty sure the Kobo will support the new CSS if it is loaded as a kepub...if you try and load it as an epub it uses a really old rendering engine that doesn't support much of anything...

In general, the newer devices that are being actively maintained by the manufacturer will support the new CSS...
</philosophy>

As always...it's up to you to decide what you want to do.

Cheers!

DNSB · 05-02-2025, 08:35 PM

Perhaps using figure and figcaption might be useful since the books are intended to be EPUB3.

RbnJrg · 05-02-2025, 11:30 PM

Quote:

Originally Posted by DNSB

Perhaps using figure and figcaption might be useful since the books are intended to be EPUB3.

We need to know the layout of the epub. The OP says that is simple: a line of text, the image, and another line of text. If these three elements are at the start of the chapter, anything will work; the problem arises if all three elements can be anywhere. The OP also doesn't say whether the three elements should remain together but I suspect so. Finally, if the book's design allows all three elements to float (that is, they don't have to be in a specific position), then using the <figure> tag makes sense. However, the OP still needs to consider the fallback code for epub2.

robertmchicago · 05-03-2025, 03:56 AM

Quote:

Originally Posted by RbnJrg

Ok, but, where is the first text? Is it at the start of the page? Or it can be at the middle of the page? Or the text can be almost at the end of the page? As you can understand, if the first line of text is at the top of the page, things are easier to code.

Thanks

They are making some changes, so the internet is not working well these days.

Chapter layout example

Definition 1: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 2: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
page break on same html file
Definition 3: one line text
one imgae with width=1240 pixels
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 4: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 5: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 6: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
page break on same html file
Definition 7: one line text
one imgae with width=1240 pixels
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 8: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
Definition 9: one line text
text text text text (from 1 to 13 lines of text on 4-inch width page with Arial-12)
text text text text text text text text text text text text
........................
Please note that there is a page break on same html file before every definition that contains an image.

robertmchicago · 05-03-2025, 04:00 AM

Quote:

Originally Posted by Turtle91

<philosophy>
You always need to check that your target devices support the coding you use.

I'm pretty sure someone will jump on here and say to NEVER use anything but CSS2 because their old device, based on old standards, doesn't support the new capabilities. That concern is partly true. You should always test on the devices in your target market. However, there are methods of coding that will use the new CSS on devices that support it, and 'fall back' to the older CSS if it doesn't support it.

vw and vh are part of the current CSS that is seeing more and more support....it's OK to use them as long as you provide fallback. eg. {width:100%; width:100vw}

I am not aware of a device that doesn't support SVG wrappers unless it is really old (like maybe mobipocket). It's up to you if you want to lose the .02 cents and not serve that market to make all the rest of the books look nice.

I'm pretty sure the Kobo will support the new CSS if it is loaded as a kepub...if you try and load it as an epub it uses a really old rendering engine that doesn't support much of anything...

In general, the newer devices that are being actively maintained by the manufacturer will support the new CSS...
</philosophy>

As always...it's up to you to decide what you want to do.

Cheers!

Okay, I understand. I will use the new features and also give a 'fallback'. Kepub is new for me, but I’m not scared to learn something new. Thank you for your helpful information.Thanks for your suggestion, but my images don't have any captions, and I don’t know what the figure tag is.

robertmchicago · 05-03-2025, 04:02 AM

Quote:

Originally Posted by DNSB

Perhaps using figure and figcaption might be useful since the books are intended to be EPUB3.

Thanks for your suggestion, but my images don't have any captions, and I don’t know what the figure tag is.

robertmchicago · 05-03-2025, 04:06 AM

Quote:

Originally Posted by RbnJrg

We need to know the layout of the epub. The OP says that is simple: a line of text, the image, and another line of text. If these three elements are at the start of the chapter, anything will work; the problem arises if all three elements can be anywhere. The OP also doesn't say whether the three elements should remain together but I suspect so. Finally, if the book's design allows all three elements to float (that is, they don't have to be in a specific position), then using the <figure> tag makes sense. However, the OP still needs to consider the fallback code for epub2.

Thanks a lot

Images match their definition. They should be placed with their definition.

05-02-2025, 08:24 AM	#17
RbnJrg Wizard Posts: 1,663 Karma: 8566337 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Since you Jellby speak spanish, here you have an example with images at half size (of course, all under epub3): As you can see, there is no fragmentation (no blank space) and the caption remains with the image in both, portrait and landscape mode (the caption is live text). With epub2 and ereaders based on ADE, is not possible to get that. Last edited by RbnJrg; 05-02-2025 at 09:06 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Word -> EPUB Chapter titles blank for Headings using Word's {TC...} codes	GranitStateColin	Conversion	2	12-21-2021 09:29 PM
images in epub	alberto_savoini	Tolino	1	01-10-2020 12:33 AM
Images exporting to epub	carlsbad	Workshop	5	09-13-2014 02:10 AM
Epub creation - pasting word and preserving codes	Mr Pointy	ePub	24	03-21-2014 02:55 PM
ePub with Images	prdufresne	Calibre	10	12-04-2010 01:55 AM

05-02-2025, 08:35 PM	#25
DNSB Bibliophagist Posts: 45,310 Karma: 168808723 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos	Perhaps using figure and figcaption might be useful since the books are intended to be EPUB3.

Advert

Advert