![]() |
#1 |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Images side by side in EPUB
Hi all
Is it posssible to have two or more images side by side in an EPUB? If yes, how does a sample code look like? If no, is the best option to make merge two images into one in Photoshop? |
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,143
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
|
You can use the float command in your css file:
Code:
CSS
.images {clear:both; margin:2em 1em}
.floater {float:left; width:20%; margin:0}
HTML
<div class="images">
<img class="floater" alt="" src="../Images/img_1.png"/>
<img class="floater" alt="" src="../Images/img_2.png"/>
<img class="floater" alt="" src="../Images/img_3.png"/>
<img class="floater" alt="" src="../Images/img_4.png"/>
</div>
Code:
CSS
.images {clear:both; margin:2em 1em}
.images img {float:left; width:20%; margin:0}
HTML
<div class="images">
<img alt="" src="../Images/img_1.png"/>
<img alt="" src="../Images/img_2.png"/>
<img alt="" src="../Images/img_3.png"/>
<img alt="" src="../Images/img_4.png"/>
</div>
Last edited by Turtle91; 03-26-2024 at 08:20 AM. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,186
Karma: 89201339
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
It also works without float. An enclosing p or div can center them if the css for that has suitable CSS.
I'd put a class on each image to set the size. If you set the height all the same it looks better. The image class can also space them or have no spacing (margin and padding 0 in case set elsewhere). |
![]() |
![]() |
![]() |
#4 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 27,776
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Moved this to the EPUB forum since it's not really a Sigil topic.
|
![]() |
![]() |
![]() |
#5 | |
Swepub
![]() Posts: 23
Karma: 10
Join Date: Dec 2023
Device: iPad
|
Quote:
|
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,186
Karma: 89201339
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Have the outer div have CSS in its class to set left & right margins and padding 0 and center
HTML Code:
<div class="centred-stuff"> <img class="img-1" alt="" src="../Images/img_1.png"/> <img class="img-2" alt="" src="../Images/img_2.png"/> <img class="img-3" alt="" src="../Images/img_3.png"/> <img class="img-4" alt="" src="../Images/img_4.png"/> </div> I would use <p> CSS Code:
.centred-stuff { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; text-align: center } .img-1 { height: 100 px; width: auto; /* or exact pixels */ padding-right: 5px; } No padding on the last image on the line. If you use "pt" instead of "px" some renderers might change the image size as user changes font size! |
![]() |
![]() |
![]() |
#7 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,143
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:
5+200+5 + 5+200+5 = 420px Code:
CSS .images {clear:both; width:420px; margin:0 auto} .images img {float:left; width:200px; padding:0 5px} HTML <div class="images"> <img alt="" src="../Images/img_1.png"/> <img alt="" src="../Images/img_1.png"/> </div> Code:
.images {clear:both; width:50%; margin:0 auto} .images img {float:left; width:45%; padding:0 2.5%} Edit: If the different values for width are confusing just remember that the width refers to the container’s width. In this case, the img width is 45% of the containing div. The total width of the images + padding equals 100% of the div width. For 2 images: 2.5%+45%+2.5% + 2.5%+45%+2.5% = 100% For 3 images: 1.66%+30%+1.66% + 1.66%+30%+1.66% + 1.66%+30%+1.66% = 100% The width of the div is the % of ITS container (the body/document) Last edited by Turtle91; 03-26-2024 at 09:15 PM. |
|
![]() |
![]() |
![]() |
#8 |
Enthusiast
![]() Posts: 26
Karma: 10
Join Date: Sep 2023
Device: none
|
vertical centering
Greets,
This post help me getting some images right. What did is to use the code using percentage soI don't have to calculate measures. My only problem now is that both images in the div aren't centered vertically. The 'div' is pushed to the top leaving a wide gap at the bottom. Is it possible to align the images vertically as well? Another problem that I faced, how does the ereader understand page turn with images occupying roughly the size of the screen? Should I use '<newpage>' (mm... this might be latex), or <\br> after every div containing two images? I want the ereader understand clearly that the two images should be one and exactly one turn page. Thanks in advance. |
![]() |
![]() |
![]() |
#9 |
the rook, bossing Never.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 12,186
Karma: 89201339
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
Put the two images in one separate HTML file. Then there is page turn.
<newpage> doesn't exist. The 100% reliable way for a new page is a start of HTML file. It's <br /> not <\br> and it simply does a newline (break) without invoking any <p> settings. Mostly should be avoided as CSS is used to change paragraph spacing, not inserting <br /> A <br /> might be handy to break a heading tag content on to two lines as you can't use a <p> and two separate <h2> tags or whatever can cause spurious spacing, extra TOC entry or even a page break on a conversion. Never use <br /> to attempt a page break (a new file is more reliable than any "break" directive) or for paragraph or image spacing. Use css class with tag to set spacing. Vertical spacing may not work well to centre. The margin-top may not work on first element of a file, but padding-top will. margin-top and margin-bottom work between elements, not at top and bottom of file in most cases. Last edited by Quoth; Yesterday at 05:16 PM. |
![]() |
![]() |
![]() |
#10 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Are you working under epub2 or epub3? If you are working with epub3, then by far the simplest and easier solution is to employ a flex-box; it's a piece of cake to get what you want, since the flex-box does all the dirty work, you don't need to calc anything (even you don't need to use margins).
|
![]() |
![]() |
![]() |
Tags |
epub, image |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Looking for old thread about images "side-by-side" | GrannyGrump | Workshop | 10 | 04-15-2019 12:11 PM |
Double Window Layout (Note) / Side by Side View (Max2) | glober | Onyx Boox | 1 | 03-26-2018 03:10 AM |
iPad Display two epub files side by side? | FlorenceArt | Apple Devices | 15 | 09-24-2015 01:21 AM |
Kobo Android app - Switch from single to side-by-side view | akuerz75 | Kobo Reader | 58 | 11-22-2011 05:29 AM |
Side by side images - argh. | LostSock | Sigil | 7 | 07-22-2011 10:21 AM |