Help with images

[JSWolf]

I have an ePub where there graphic under the chapter title. The graphic is 1200 lines long. That's fine. But what I want is for the graphic not to exceed the window which it is doing now. How can a graphic be coded such that it doesn't exceed the space reaming after the chapter title?

Below is the relevant code fo the section and the CSS code that goes with it.

<h2 class="h2">CHAPTER</h2>
<h2 class="h2n">Two</h2>
<p class="image2"><img alt="image" src="../images/ch2.jpg"/></p>

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-width: 100%;
  max-height: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.h2 /*"chapter"*/ {
  font-size: 1em;
  margin-top: 0.8em;
  margin-bottom: 0;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-weight: normal;
  font-style: italic;
}
.h2n /*chapter number*/ {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 0.8em;;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  text-align: center;
}
.image2 {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  font-weight: normal;
}

[RbnJrg]

Originally Posted by JSWolf

I have an ePub where there graphic under the chapter title. The graphic is 1200 lines long. That's fine. But what I want is for the graphic not to exceed the window which it is doing now. How can a graphic be coded such that it doesn't exceed the space reaming after the chapter title?
...

Two questions:

1) What is the size in pixels of "ch2.jpg"?
2) the code to manage "ch2.jpg", has to be full compatible with ADE (that is RMSDK)?

[JSWolf]

Originally Posted by RbnJrg

Two questions:

1) What is the size in pixels of "ch2.jpg"?
2) the code to manage "ch2.jpg", has to be full compatible with ADE (that is RMSDK)?

1. ch2.jpg is 485x1200 pixels.
2. Yes, it has to be compatible with RMSDK (ADE).

[Turtle91]

Build the title into the image, then wrap it with SVG.

[JSWolf]

Originally Posted by Turtle91

Build the title into the image, then wrap it with SVG.

Have a code sample?

[Turtle91]

Photoshop the title so it is part of the image. (you can try and use the svg text element, but that takes a lot more work with viewport sizing)

Then:

  <div style="text-align:center; padding:0; margin:0">
    <svg xmlns="http://www.w3.org/2000/svg" 
           height="100%" 
           width="100%"
           preserveAspectRatio="xMidYMid meet" 
           version="1.1" 
           viewBox="0 0 1200 485"
           xmlns:xlink="http://www.w3.org/1999/xlink">
          <image 
               width="1200" 
               height="485"
               xlink:href="../Images/ch2.jpg"/>
    </svg>
  </div>

Of course you could just use Sigil's "add img wrapped in svg" plugin after you photoshop the title...

[jbacelar]

Another chance:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 800" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <text text-anchor="middle" font-weight="bold" font-size="48px" x="300" y="60">Claudio Bombarnac</text>
    <text text-anchor="middle" font-weight="bold" font-size="42px" x="300" y="120">Julio Verne</text>                                                                                                                                                                                                    
    <image width="600" height="625" x="0" y="140" xlink:href="../Images/01.jpg"/>
    <text text-anchor="middle" font-size="24px" x="300" y="790">Traducción: J. Bacelar</text>
  </svg>

And image

[JSWolf]

I'm still not seeing how this is going to work with different resolution view ports.

[Turtle91]

The viewbox automagically adapts to the display size.

edit: here is a link to MR's SVG wiki. There is a section in their explaining all that.

[RbnJrg]

Originally Posted by JSWolf

1. ch2.jpg is 485x1200 pixels.
2. Yes, it has to be compatible with RMSDK (ADE).

The method suggested by jbacelar is correct. Sometime ago I posted a tutorial about how to add captions with SVG wrapper (https://www.mobileread.com/forums/sh...04&postcount=7). It's very easy to adapt that procedure to an "upper caption". Do the following:

1. Your image has a width of 485px and a height of 1200px. According to that, you normally would define the "viewbox" of a svg wrapper as:

viewBox="0 0 485 1200"

2. But now you want to add upper captions to that image. So, the first thing you have to do is to modify the size of the viewbox, so that it will be a bit larger. Let's say that our new viewBox definition will be:

viewBox="0 0 485 1325"

3. Since our image has a height of 1200px, then we need to position it at x="0" y="125" (y="125" because the height of the viewbox is 1325 and the height of image is 1200; "y" is the difference between those two measures). Then our svg wrapper would be (so far):

  
<div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 485 1325" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="1200" width="485" x="0" y="125" xlink:href="../Images/ch2.jpg"></image></svg>
</div>

3. Now we need to add the captions; font-sizes must be in pixels. To do that we need to add, to the previous wrapper, the new following code:

  
<div style="margin:0; padding:0; text-align:center">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 485 1325" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text text-anchor="middle" font-family="serif">
         <tspan x="242" y="30" font-size="25" font-style="italic">CHAPTER</tspan>

         <tspan x="242" y="80" font-size="45" font-style="normal" font-weight="bold">Two</tspan>
    </text>
    <image height="1200" width="485" x="0" y="125" xlink:href="../Images/ch2.jpg"></image></svg>
</div>

Why the viewbox is 1325? If you see the position of the second caption (y=80) and its size (45 pixels) that means that the caption will end at y=80+45=125. Since the image has a height of 1200, then we need to add 125 pixels to have enough space to write the captions.

Here you can see how it looks in ADE:



Below you can check the respective epub.

Regards
Rubén