MobileRead Forums
Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub
Reload this Page Two images in a single page

Notices

Reply
 
Thread Tools Search this Thread
Old 04-13-2020, 06:34 AM   #1
Pippo53s03
Member
Pippo53s03 began at the beginning.
 
Posts: 19
Karma: 10
Join Date: Apr 2015
Device: Kobo Aura H2O 2ed
Question Two images in a single page
I would like to show two images, each one of them with its caption, in a single page.
Two images have different size (not "very" different), and I have two different e-book readers: Sony PR-S t1 and Kobo Aura H2O.
Do you have any suggestion?
Actual code is:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta name="charset" content="UTF-8"/>
<title></title>
<link rel="stylesheet" href="../Styles/main.css" type="text/css"/>
</head>
<body>
<h2 style="text-align: center;"><img src="../Images/main-18.jpg" alt=""/><br/></h2>
<div>
<p style="text-align: center;"><span style="font-style:italic;">Figura 1: l'Adige al quartiere s. Alessio e chiesa di s. Giorgio (M. Lotze)</span></p>
<p><span style="font-style:italic;"><br/></span></p>
<p><span style="font-style:italic;"><br/></span></p>

<div style="text-align: center;"><img src="../Images/main-19.jpg" alt=""/></div>
<p style="text-align: center;"><span style="font-style:italic;">Figura 2: Case sul fiume nel quartiere S. Alessio (1880)</span></p>
</div>
<div><br/></div>
<div><br/></div>
<div></div>
</body>
</html>
Thank you!
Pippo53s03 is offline   Reply With Quote
Old 04-13-2020, 06:54 AM   #2
carmenchu
Groupie
carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.carmenchu ought to be getting tired of karma fortunes by now.
 
Posts: 183
Karma: 266070
Join Date: Dec 2010
Device: Win7,Win10,Lubuntu,smartphone
I would *try * to put each <im.../> plus its caption <p>...</p> into a <div style="display:inline; max-width: 50%">...</div>, and perhaps both into a single <div>...</div>.
That should work in xhtml: I won't answer for the effect under any particular viewer, though.
carmenchu is offline   Reply With Quote
Advert
Old 04-13-2020, 08:50 AM   #3
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 27,823
Karma: 198099188
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
This is not really a Sigil question/issue. Moving it to the epub forum,
DiapDealer is offline   Reply With Quote
Old 04-13-2020, 03:01 PM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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
Here is an example of what carmenchu suggested. I also recommend you test on your specific platforms.

Two on same page:
Spoiler:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style>
.imagegroup {margin:1em 0 0; page-break-inside:avoid}
.image {width:95%; margin:1em auto; font-size:.6em; text-align:center}
.image img {display:block; margin:0 auto .25em; width:100%; max-width:500px}
</style>
</head>

<body>
  <div class="imagegroup">
    <div class="image">
      <img src="../Images/img1.jpg" alt=""/>Figure 1: Angel, Buffy, and Spike
    </div>

    <div class="image">
      <img src="../Images/img2.jpg" alt=""/>Figure 2: The Crew
    </div>
  </div>
</body>
</html>

I would move the <style> into a separate, linked, css sheet. The max-width should be set to your images - it is there to prevent small images from being over-blown and getting fuzzy.

The 'page-break-inside:avoid' isn't always respected by devices/apps...but it doesn't hurt to try...

Two on same page, side-by-side:
Spoiler:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style>
.imagegroup {margin:1em 0 0; page-break-inside:avoid}
.image {float:left; width:45%; padding:0 2%; font-size:.6em; text-align:center}
.image img {display:block; margin:0 auto .25em; width:100%; max-width:500px}
</style>
</head>

<body>
  <div class="imagegroup">
    <div class="image">
      <img src="../Images/img1.jpg" alt=""/>Figure 1: Angel, Buffy, and Spike
    </div>

    <div class="image">
      <img src="../Images/img2.jpg" alt=""/>Figure 2: The Crew
    </div>
  </div>
</body>
</html>



These settings can all be adjusted to suit your preferences. I hope that helps!
Attached Thumbnails
Click image for larger version Name: same page.jpg Views: 171 Size: 122.4 KB ID: 178364   Click image for larger version Name: side-by-side.png Views: 157 Size: 387.4 KB ID: 178365  
Turtle91 is offline   Reply With Quote
Old 04-14-2020, 10:44 AM   #5
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
And if you plan to do also something for Kindle, here you could find a way to do it:

https://www.mobileread.com/forums/sh...4&postcount=21
RbnJrg is offline   Reply With Quote
Advert
Old 04-17-2020, 04:56 AM   #6
Pippo53s03
Member
Pippo53s03 began at the beginning.
 
Posts: 19
Karma: 10
Join Date: Apr 2015
Device: Kobo Aura H2O 2ed
Red face
Sorry for the delay but I'm trying the proposed solutions but I have communication problems between the PC and the Kobo ....
Pippo53s03 is offline   Reply With Quote
Reply

« Previous Thread | Next Thread »

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Multiple JPG images in SVG on single epub page dbb1480 Sigil 7 05-20-2016 09:57 AM
Print page range in viewer outputs single empty page larzeb Library Management 2 04-30-2013 05:24 AM
Printing a Single Page? foxglove Calibre 0 11-16-2011 06:24 PM
PRS-900 Single page in landscape mode? leonardfrye Sony Reader 2 03-25-2010 08:29 AM
Single page "Invalid Page!" error Sony-505 2percentright Calibre 5 07-29-2009 11:22 AM


All times are GMT -4. The time now is 02:45 AM.

Contact Us - FAQ - Guidelines - Privacy - Top

MobileRead.com is a privately owned, operated and funded community.