join (image + caption) and fill page

AlanHK · 04-03-2015, 11:08 PM

I'm converting a book with photographic features.

I'd like to present each photo so it + its caption just fills a page.
They're at different ratios, some landscape, some portrait. And I'd like it to work whether the reader is in either orientation too.

What I've done is this CSS:

Code:

img.wide {
width:100%;
margin-top:1em;
margin-bottom:1em;
}

img.tall {
height:80%;
align:center;
margin-bottom:1em;
}

.caption { text-align:center;
           font-style:italic;
           margin-bottom: 1em;           
           text-indent: 0;
}

Then in the page:

Code:

  <div class="center">
    <img alt="" class="tall" src="../Images/tall.jpg" />
    <p class="caption">Tall image caption</p>
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <div class="center">
    <img alt="" class="wide" src="../Images/wide.jpg" />
    <p class="caption">Wide image caption</p>
  </div>

I use "wide" for pics wider than high, "tall" for higher than wide.
This works most of the time, but if I resize a reading app the caption can be separated from the photo.

What can I do to weld the photo + caption so they are never separated, and just resized to fit whatever the screen is?

And these should work in the text stream, so for instance a "wide" photo can fill half a page, and the article text is above and below it.

Would even consider the black art of svg if it can do it.

JSWolf · 04-03-2015, 11:12 PM

You cannot rotate the images based on the orientation of the device. There is no way to tell what the orientation is. So the best way to do your book is to set it up as best you can for portrait.

Now given that devices like the Kobo Aura HD, Kobo Aura H2O, Kindle Voyage, Microsoft Surface tablets, and other devices, you do want to use high resolution images. 1440 lines would do well enough if you can go that high. Yes, I know this is going to make your eBook huge, but in order to look it's best, you have to not skimp on image quality.

AlanHK · 04-04-2015, 03:14 AM

Quote:

Originally Posted by JSWolf

You cannot rotate the images based on the orientation of the device.

I don't want to rotate it.
I don't know why you think I did.
I want to make the picture as large as will fit without pushing the caption off the screen.

For just an image, I use the same code that Sigil creates when it makes a cover.
That resizes no matter what size or orientation the screen is.

Quote:

Originally Posted by JSWolf

There is no way to tell what the orientation is. So the best way to do your book is to set it up as best you can for portrait.

Anyone reading it on a laptop or desktop is using landscape mode, and tablets quite likely will.

So I can't ignore how it looks in landscape mode.

RbnJrg · 04-04-2015, 04:12 PM

Use the following code:

1. In your .css stylesheet:

Code:

p {
    text-align: justify;
    text-indent: 1em;
    font-size: 1em;
    margin-bottom: 1em;
}

2. In your .xhtml file:

Code:

<body>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 248 360" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="310" width="248" xlink:href="../Images/Obama.jpg"/>

    <text text-anchor="middle" x="124" y="330">
      Barak Obama

      <tspan x="124" y="350">President of the United States of America</tspan>
    </text>
  </svg>
</div>
</body>

Of course, the size of your image will be different. Also take in count that while the image size is of 248x310px, the viewbox of the svg wrapper is of 248x360 (the differnce in height is due to the space for captions). It works EVEN on ADE 2.0; here you can see a screenshot:

Click image for larger version

Name: Image1.png
Views: 293
Size: 133.0 KB
ID: 136801

Below you can check the respective .epub.

Regards
Rubén

dgatwood · 04-04-2015, 05:23 PM

Quote:

Originally Posted by AlanHK

Anyone reading it on a laptop or desktop is using landscape mode, and tablets quite likely will.

So I can't ignore how it looks in landscape mode.

The nice thing is that the majority of readers that actually have a landscape mode are based on WebKit, and thus should support media queries correctly.

So if you wanted to, you could specify two different SVG images with different cropping. Then have SVG "a" defined as display: block, and SVG "b" defined as display: none, and add a media query afterwards for "(orientation: landscape)" that swaps the display values.

That way, dumb readers that don't support media queries would default to the portrait orientation (which is correct more often than not), and newer readers should do the right thing based on orientation.

04-03-2015, 11:08 PM	#1
AlanHK Guru Posts: 668 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	join (image + caption) and fill page I'm converting a book with photographic features. I'd like to present each photo so it + its caption just fills a page. They're at different ratios, some landscape, some portrait. And I'd like it to work whether the reader is in either orientation too. What I've done is this CSS: Code: img.wide { width:100%; margin-top:1em; margin-bottom:1em; } img.tall { height:80%; align:center; margin-bottom:1em; } .caption { text-align:center; font-style:italic; margin-bottom: 1em; text-indent: 0; } Then in the page: Code: <div class="center"> <img alt="" class="tall" src="../Images/tall.jpg" /> <p class="caption">Tall image caption</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="center"> <img alt="" class="wide" src="../Images/wide.jpg" /> <p class="caption">Wide image caption</p> </div> I use "wide" for pics wider than high, "tall" for higher than wide. This works most of the time, but if I resize a reading app the caption can be separated from the photo. What can I do to weld the photo + caption so they are never separated, and just resized to fit whatever the screen is? And these should work in the text stream, so for instance a "wide" photo can fill half a page, and the article text is above and below it. Would even consider the black art of svg if it can do it. Last edited by AlanHK; 04-03-2015 at 11:16 PM.

04-03-2015, 11:12 PM	#2
JSWolf Resident Curmudgeon Posts: 73,983 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You cannot rotate the images based on the orientation of the device. There is no way to tell what the orientation is. So the best way to do your book is to set it up as best you can for portrait. Now given that devices like the Kobo Aura HD, Kobo Aura H2O, Kindle Voyage, Microsoft Surface tablets, and other devices, you do want to use high resolution images. 1440 lines would do well enough if you can go that high. Yes, I know this is going to make your eBook huge, but in order to look it's best, you have to not skimp on image quality. Last edited by JSWolf; 04-03-2015 at 11:14 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
keeping image and caption together	whbenson	ePub	0	08-20-2013 06:19 PM
How to be sure a full page image+ caption is not split between 2 pages?	silviolorusso	ePub	9	07-12-2013 08:24 PM
Caption, distance from image	GraciousMe	Sigil	10	10-30-2012 11:12 AM
L shape image with caption?	LostSock	ePub	5	09-08-2011 07:24 PM
Center Image and Caption	SamL	ePub	11	08-12-2011 09:27 AM

Advert

Advert