![]() |
#1 |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Captions together with image
Does anyone have any ideas how to keep captions on same page as image reflowable epub? I have a problem that one page ends with a caption and the the image starts in the next page.
I have tried <figcaption> but it's not consistent. Thanks! Last edited by swepub; 05-16-2024 at 04:11 AM. |
![]() |
![]() |
![]() |
#2 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
The bottom line: There are many techniques that are not consistent across devices. One that does seem to work is to edit the image and add the text to the image itself - then use an svg wrapper to put the image on its own page. Of course, you could play around with all the settings in the svg wrapper and add <text> there, but that takes a little more time/effort to learn. |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Where are you working? On epub2 or epub3? Answer that and we will be able to give you a better solution. <figcaption> is for epub3, so is you are working on epub2, you need to employ others tags and css properties.
|
![]() |
![]() |
![]() |
#4 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,663
Karma: 85000003
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
You should also consider that forcing images and captions to be on the same page can result in a poor user experience, especially on devices with smaller screens such as most e-readers and phones. In many cases either the caption text, the image, or both will be too small to view comfortably.
|
![]() |
![]() |
![]() |
#5 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Here you can watch screenshots from Kobo for Android on a 5" screen: Last edited by RbnJrg; 05-17-2024 at 12:18 AM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,241
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Even epub2, if the % is used the images + caption (just p and CSS) can be OK on a 4.3″ phone screen. Bluefire, Aldiko Basic etc apps.
|
![]() |
![]() |
![]() |
#7 | |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Quote:
In Adobe Indesign and cleanup done in Sigil. EPUB3. Hope that clarifies... |
|
![]() |
![]() |
![]() |
#8 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1. In your .xhtml file: Code:
<figure class="wrapper"> <img alt="" src="your_path_to_your_image" /> <figcaption class="caption">Your caption here</figcaption> </figure> Code:
.wrapper { float: left; width: 100%; text-align: center; -webkit-column-break-inside: avoid !important; page-break-inside: avoid !important; break-inside: avoid !important; } .wrapper img { width: 100%; /* or the width you wish */ } .caption { font-size: 0.9em; /* or the size you wish */ font-style: italic; /* ad libitum :) */ } I hope this can be of help. Also take into account that is ONLY for epub3 (it won't work properly on epub2). EDIT: I forgot something important; if you are going to employ margins, paddings, borders, you need to include the property "box-sizing: border-box;". Last edited by RbnJrg; 05-18-2024 at 10:25 AM. |
|
![]() |
![]() |
![]() |
#9 |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Great!!! Seems to work perfect.
Thanks a lot. ![]() |
![]() |
![]() |
![]() |
#10 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
![]() |
![]() |
![]() |
#11 |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
The only thing that I need now, is some help to decrease the gap between my images/figures - tried some options but not able to solve it.
See image attached Last edited by swepub; 05-20-2024 at 08:25 AM. |
![]() |
![]() |
![]() |
#12 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Do You want to reduce the vertical space between those three images? Ok, post here the code you are using and that are producing that output and I/we will try to help you. The fact you are working on epub3 wiil make things easier to fix them.
|
![]() |
![]() |
![]() |
#13 |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Here it is - ugly coding since I'm new to this and inherit the code from Indesign:
<figure class="wrapper"> <figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Original Photos</span></p></figcaption> <div class="_idGenObjectLayout-4"> <div id="_idContainer463" class="MainImage"> <img alt="" src="image/84-4.jpg" /> </div> </div> </figure> <figure class="wrapper"> <figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Virtual Copies</span></p></figcaption> <div class="_idGenObjectLayout-4"> <div id="_idContainer463" class="MainImage"> <img alt="" src="image/84-5.jpg" /> </div> </div> </figure> <figure class="wrapper"> <figcaption class="caption"><p class="ImageCaptionCentered"><span class="Semi-Bold">Videos</span></p></figcaption> <div class="_idGenObjectLayout-4"> <div id="_idContainer463" class="MainImage"> <img alt="" src="image/84-6.jpg" /> </div> </div> </figure> ________________________________________ CSS /* image wrapper for captions */ .wrapper { float: left; width: 100%; text-align: center; -webkit-column-break-inside: avoid !important; page-break-inside: avoid !important; break-inside: avoid !important; } .wrapper img { width: 100%; /* or the width you wish */ display: block; } .caption { font-size: 1rem; /* or the size you wish */ font-style: italic; /* ad libitum ![]() } div._idGenObjectLayout-4 { text-align:center; -webkit-column-break-inside: avoid !important; /* for webkit ereaders */ break-inside: avoid !important; /* for the rest of ereaders */ #_idContainer463 { display:inline-block; width:23.72%; div.MainImage { border-style:solid; box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6); margin-bottom:0.5em; max-width: 99%; max-height: 99%; } |
![]() |
![]() |
![]() |
#14 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() a) In your .xhtml file: Code:
<figure class="wrapper"> <figcaption class="caption ImageCaptionCentered Semi-Bold">Original Photos</figcaption> <div class="MainImage"> <img alt="" src="image/84-4.jpg"/> </div> </figure> <figure class="wrapper"> <figcaption class="caption ImageCaptionCentered Semi-Bold">Virtual Copies</figcaption> <div class="MainImage"> <img alt="" src="image/84-5.jpg"/> </div> </figure> <figure class="wrapper"> <figcaption class="caption ImageCaptionCentered Semi-Bold">Videos</figcaption> <div class="MainImage"> <img alt="" src="image/84-6.jpg"/> </div> </figure> b) In your .css stylesheet: Code:
.wrapper { float: left; width: 100%; text-align: center; box-sizing: border-box; -webkit-column-break-inside: avoid !important; page-break-inside: avoid !important; break-inside: avoid !important; margin: 1em 0 0; /* Here you control the gap between images; change 1em as you wish */ } .caption { font-size: 1rem; font-style: italic; } .MainImage { width: 23.72%; border-style: solid; box-shadow: 14px 14px 10px rgba(0, 0, 0, 0.6); margin: 0 auto; box-sizing: border-box; } .MainImage img { width: 100%; } Code:
<figcaption class="caption ImageCaptionCentered Semi-Bold"> Code:
<figcaption class="caption"> Last edited by RbnJrg; 05-20-2024 at 05:09 PM. |
|
![]() |
![]() |
![]() |
#15 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,241
Karma: 89531599
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Indesign is based on a 20+ year package based on an old Aldus package that was never released. It's DTP. Thus it's for paper/PDF/Print. It was fudged for ebooks. So it's no surprise it's really only good for flxed layout.
Loads of free options are better than Indesign for epub2 or epub3. Indesign is also now rental only. The epub2 didn't even exist when Indesign was first released. Expensive and used by Corporates doesn't mean a tool is the best solution. Even for simpler PDF layouts using MS Word (only if you have to) or LO Writer with styles is now a better solution than Indesign. LO Writer is at 7.x It's been good enough since 5.x unless you are interchanging the same document with MS Word users frequently, back and forth. |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Photo captions | anleva | Recipes | 5 | 11-06-2016 11:11 AM |
How do y'all do photos and captions? | Kamikuza | Kindle Formats | 3 | 02-28-2016 03:59 PM |
Cracked.com: Missing images and small image captions | damien18 | Recipes | 4 | 11-30-2014 11:14 PM |
How do you make captions? | GraciousMe | ePub | 6 | 08-05-2012 03:22 PM |
Image captions --- how to keep with image? | GrannyGrump | ePub | 7 | 01-31-2012 12:38 PM |