full "page" images with text reflow

[RbnJrg]

Originally Posted by Quoth

Stupid arrogant assumption.
I did websites, inc server side as a paid job, ever since CSS existed, and stupid websites with static HTML before that. Also many more years real programming: in C, C++, Forth, Modula-2 and Java. Designed and implemented hyperlink systems before HTML existed (though didn't use Apple's Hypercard). Designed and built multimedia systems before ebooks existed.
But ebooks, even epub3 (of which there are broadly 3 kinds) are not websites or even web pages. The specs are a subset, and actual implementations vary from different to a subset

Nor stupid, nor arrogant, not assumption. You know very few about css and xhtml for epub2/3. But that is not an assumption of mine, you yourself affirm it with the nonsense you publish. Everyone here realizes your skills, by reading what you write and seeing the code you advise. You can say what you want, but your facts speak for themselves and discredit your words.

I do make mistakes.

ThingA: auto
ThingB: some value

You seem to think vice versa is
ThingB: some value
ThingA: auto

It's not. Vice versa would be
ThingA: some value
ThingB: auto

Don't try to disguise the errors you proposed with pseudocode. You advised to use % for the height property. What a great expert you are! Why don't you post css and xhml code (code, not pseudocode)? You would shut my mouth and it would be the end of this exchange with a balance in your favor. You don't post code because you can't post it, because of that way everyone here could realize that what you proposed, what you propose does not work. When I post something and make a statement, I not only give the xhtml and css code, but I even include a sample epub. The entire forum here is witness to it. I don't offer empty words and code that doesn't work.

KISS principle. Clever stuff breaks. You are a fanatic that would result in ebooks only working on a small percentage of actual retail users platforms.

No, my ebooks can be opened in any epub ereader; if the ereader has support for epub3, then the human reader will have the best reading experience (no fragmentations, things perfectly centered horizontal and vertically, things justified vertically, full page images and tables, shape-outsided images, titles never so big nor so small, etc., etc., etc.). If the ereader doesn't have support for css3 properties, well, the epub3 code will be ignored and the user will have in his hands a good epub2 ebook. Of course, I have to work more.

Are you a Moderator that you have the right to shut me up and close debate?

No, you misunderstood me. I didn't say you don't respond to what I wrote. I said that when someone comes to MR for help, the best favor you can do is to avoid advising him/her. I have nothing personally against you, it just bothers me that you claim things that are not true as if it were the revealed truth.

[RbnJrg]

Originally Posted by PilcrowandStanza

guys! I love that there's a debate over ebook structure, but can we get to the answers on what actually works? Thanks!

The first thing you must know is that, under epub2, not all epub2 ereader will honor the code to get what you want. Under epub3, all the ereaders I know, with support for epub3, will honor the code and so you can have a full page image. Of that way, if you want your epub can be read for any ereader, you have to write code for epub2 and code for epub3. It's not easy to explain the full procedure because I don't know your image size and the text layout. But I will give an example about how you should procedure.

Look the following images. The first screenshot shows Readium supporting the property "shape-outside"; the second screenshoot shows IceCream not supporting that property.



So you need to include in your xhtml file, code to handle both situations. For example:

1. In your .xhtml file:

  <p>Blah, blah, blah... a long blah, blah, blah</p>

  <div class="WrapA">
    <img class="picA" alt="Imagen15" src="../Images/Imagen15.png"/>
  </div>

  <div class="WrapB">
    <img class="picB" alt="Imagen15" src="../Images/Imagen15.png"/>
  </div>

  <p>Blah, blah, blah... a long blah, blah, blah</p>

2. In your .css file:

.WrapA { /* This code is for epub2 */
  float: left;
  width: 40% !important;
  margin: 0px 10px 0 0;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important; /* this property is supported by ADE */
  break-inside: avoid !important;
}

.WrapB { /* This code is for epub3 */
  display: none; /* Pay attention here, the code for epub3 is not showed!! */
  float: left;
  width: 40% !important;
  -webkit-shape-outside: polygon(60% 0%, 54% 3.28%, 54% 10.90%, 62.25% 16.57%, 64.25% 24.78%, 67.25% 32.69%, 74.25% 39.85%, 74.25% 50.00%, 70.50% 55.82%, 78.25% 60.15%, 76.75% 66.12%, 83.00% 71.04%, 100% 73.88%, 100% 95%, 0% 95%, 0% 0%);
  shape-outside: polygon(60% 0%, 54% 3.28%, 54% 10.90%, 62.25% 16.57%, 64.25% 24.78%, 67.25% 32.69%, 74.25% 39.85%, 74.25% 50.00%, 70.50% 55.82%, 78.25% 60.15%, 76.75% 66.12%, 83.00% 71.04%, 100% 73.88%, 100% 95%, 0% 95%, 0% 0%);
  -webkit-shape-margin: 20px;
  shape-margin: 20px;
  shape-margin-bottom: 10px;
}

.picA, .picB {
  display: block;
  width: 100% !important;
  margin: 0;
}

/* Now it comes the important part! */

@supports(-webkit-shape-margin: 20px) {
 /* To Test epub3 code (with -webkit properties); if code is supported then */
  .WrapA {
    display: none; /* epub2 code is not showed!! */
  }

  .WrapB {
    display: block; /* epub3 code is showed */
  }
}

@supports(shape-margin: 20px) {
/* To Test epub3 code; if code is supported then */
  .WrapA {
    display: none;  /* epub2 code is not showed!! */
  }

  .WrapB {
    display: block;  /* epub3 code is showed */
  }
}

Of course, the code is an example an the polygon values are only valid for the example image. You don't want a image with the shape-outside property, you want a full page image, so you need to write code for a "quasi" full page image in epub2 and code for a full page image under epub3. And including code to test if epub3 is supported and of that way, to enable epub3 code and disable epub2 code.

To have a full page image under epub3, you need to use the tag <figure> of the following way:

figure {
  float: left;
  width: 100%;
  height: 98vh; /* This is key */
  margin: 0px; /* or what you want; if you add margin, you should reduce the height */
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important; 
}

But, one moment. You have defined the size of the <figure> container. BUT YOU CAN'T INCLUDE YOUR IMAGE HERE WITH a <img> tag because if you do so, then the image won't maintain the proportion. YOU MUST INCLUDE THE IMAGE WITH A SVG WRAPPER. Of this way:

In your .xhtml file:

  <figure>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/Img1.jpg"/></svg>
  </figure>

Of course, the width (600) and height (900) of your image will be different. With an svg wrapper your avoid all the issues generated by width and height of an image; the proportion and size always will be optimal. Here is how it looks that code under BibiReader:



The image was displaced (because of the "float: left" property) less than half screen to be at full page. You can play with the property "height: 98vh" and margins values (sometimes a good value is 95vh, but don't use 100vh because in some readers can generate a blank page). You have now the code for a full page image under epub3. I leave the easy part to you (*), achieving something similar with epub2 (forget about a full page image without white spaces before or after the image, that is impossible with epub2 and with ereaders based on RMSDK). And don't forget to write both code (in the .xhtml file and the .css file) and to test the epub3 code to enable it (or leave it disabled if it is not supported).

Regards
Rubén

EDIT: (*) Please, don't think that I'm hiding information, but I practically gave you all the clues about the code for epub2

EDIT2: I think it was clear, but you have to write an epub3 and to add it a toc.ncx file so the epub3 can be read with epub2 ereaders. See Sigil "Epub3 Tools" command.

[PilcrowandStanza]

Ruben, thank you!

I've almost got it! It's full page with 1 line of text below, but it's reflowing!

Should the <figure> HTML go after the <div class> or inside it?

[RbnJrg]

Originally Posted by PilcrowandStanza

Ruben, thank you!

I've almost got it! It's full page with 1 line of text below, but it's reflowing!

Should the <figure> HTML go after the <div class> or inside it?

Don't use a div class (in this case, to get a full page image), just the <figure> tag. Maybe tomorrow I can upload an epub, so you can watch better how the things work. Bit if you want to use a div, then the structure is:

<div>
    <figure>
         ....
         ....
    </figure>
</div>

By the way, where are you testing your code?

[PilcrowandStanza]

I DID IT!!

I left out the epub2 for now, for simplicity:

<div class="wrap">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/7_Hitlersigned.jpg"/></svg>
</figure>
</div>

Using ibooks for a quick check, and it's working!
Will be checking other reader apps and Kindle (less likely to work?)

Now I just have to add the caption somehow...

THANK YOU!!

[JSWolf]

Originally Posted by Quoth

Yes, I gathered that. But the simple reliable and works everywhere solution is to have the image as a paragraph where you want it in the sequential paragraphs. You don't know what size a page is, but you can make an image approximately fit the screen with css
height: auto;
width: 95%;
( or vice versa)
and the enclosing p tags are centred with 0 left & right but desired top and bottom margin. Easy & compatible. Things that are at the start of a new file need a padding-top as many platforms ignore margin-top for the first item in a file.

A "Full page" image and text flowing round it is a nonsense in an ebook. Though you can have float, it fails on many platforms, so we never have any "float" in any CSS. No drop caps, image or text based. Ebooks use CSS and HTML, but are not web pages or web sites.

Forget Desktop Publishing, which is what InDesign is derived from. Or Web site design.

95% looks silly as you have the extra space or a few lines of text. I've always used 100% and it works.

[JSWolf]

Originally Posted by PilcrowandStanza

Attachment 205444

I DID IT!!

I left out the epub2 for now, for simplicity:

<div class="wrap">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/7_Hitlersigned.jpg"/></svg>
</figure>
</div>

Using ibooks for a quick check, and it's working!
Will be checking other reader apps and Kindle (less likely to work?)

Now I just have to add the caption somehow...

THANK YOU!!

Don't forget to try your eBook on a small phone screen such as an iPhone SE 202 or iPhone 8 (same scree size).

[PilcrowandStanza]

yes, it will eventually be tested on anything I can.

As mentioned, the hard part now seems to be adding the caption properly and I'm not finding a good answer. Would prefer to have the caption be text instead of rasterized with the image.

(I do have the indd. file set up with grouped objects so they export to epub properly, but of course not with the wrap working)

[RbnJrg]

Originally Posted by PilcrowandStanza

yes, it will eventually be tested on anything I can.

As mentioned, the hard part now seems to be adding the caption properly and I'm not finding a good answer. Would prefer to have the caption be text instead of rasterized with the image.

(I do have the indd. file set up with grouped objects so they export to epub properly, but of course not with the wrap working)

Now I don't have time but later I will explain you how to add a caption. Be patiente

[Quoth]

Originally Posted by JSWolf

95% looks silly as you have the extra space or a few lines of text. I've always used 100% and it works.

It was only an example.

[JSWolf]

Originally Posted by Quoth

It was only an example.

But some people will use our examples. So we should try to get them correct.

[Turtle91]

Sooooo, what is "correct"? 100% is not correct on some devices; it causes a blank page following. Since 95% was an example, and specifically stated as an example, we can rely on readers to be smart enough to make their own decisions.

Personally, I use 95vh to be centered and take up 95% of the viewport (screen).

Cheers!

[Quoth]

Originally Posted by JSWolf

But some people will use our examples. So we should try to get them correct.

In general yes. However if image aspect doesn't suit the screen shape you can't have 100% without either space top & bottom, or space at sides or sometimes an extra blank page appearing.
So I'd never make an image be absolutely 100% on any axis. Mostly if I'm fixing ebooks bought or from Gutenberg etc. I'd have about 75% width, unless that's unsuitable.

While it's cute, I'm not fussed on systems that let you tap or double tap on an image to "zoom" it to fill the screen as it breaks the flow of the reading. Hence if I buy or download a PD and the images are very "stupidly" formatted I'll take a look and fix it if it's not much work.

[RbnJrg]

Originally Posted by PilcrowandStanza

As mentioned, the hard part now seems to be adding the caption properly and I'm not finding a good answer. Would prefer to have the caption be text instead of rasterized with the image.

First at all, any caption must be added by using the tag <figcaption> inside the <figure> structure. Of this way:

<figure>
	<svg ...>
	</svg>
	<figcaption>Your Caption Here</figcaption>
<figure>

But the adding of a caption, changes the things a bit. So far, we had reserved a space of 98vh for the image (the svg wrapper) and it took the 100% of that space. But now, with a caption, we have to split that space of 98vh in two parts: one for the image and one for the caption. The structure would be something like:

 	 ---<figure>
	|	------------
	|
	|
	|	Space for image (svg wrapper)
   98vh	|
	|
	|	------------
	|	Space for caption <figcaption> tag
	|	------------
 	 ---</figure>

And now the question is: how much space to reserve for the image and how much space to reserve for the caption? Since we have already defined the height of the container (98vh), NOW AND ONLY NOW, IS POSSIBLE TO USE % TO RESERVE THOSE SPACES (and is also possible to determine the values with high precision, BUT since the caption is text and the user can change the size of the text, that initial precision is not very usefull).

The first thing to consider is the caption text, how long is, how long can be? One line? Two lines? And also we must consider the font-size of the caption. Let's suppose that the caption font-size will be 1em, the caption line-height: 1.2em, a margin-top and bottom of 0.25em and only one line. If so, then the height of the caption will be 1.7em. But we will take 3.4em in case the user changes (increases) the font-size (if the caption were of two lines, then the height will be 3.4em but we'd take 6.8em).

Now we know the height of the caption, what will the space for the image be? The space for the image (for the svg wrapper) will be "height: calc(100% - 3.4em)" (calc is a property of css3). In that formula, "100%" represents the height of the <figure> container, that is, 98vh (and 3.4em is the caption height). This should work even with an increase of 100% in font-size for body text (let's say that will work if the user increase the font-size from 1em to 2em). If the user makes an increment higher than 100%, then the caption could not remain joined with the image (according to the values we have used; if instead of 3.4em we had taken 6.8em. then the caption will remain joined to the image even if the user makes an increment of 200% in the font-size, from 1em to 3em).

Now the code:

1. In your xhtml file:

  <figure>
    <div class="pic">
      <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/Img1.jpg"/></svg>
    </div>

    <figcaption>This is my caption</figcaption>
  </figure>

Remember that the values of width (600) and height (900) (they are px) must be replaced with the width and height of your image in px (also in the viewBox property).

2. In your .css stylesheet:

figure {
  float: left;
  width: 100%;
  height: 98vh; /* This is key */
  margin: 0px; /* or what you want */
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important; 
}

figcaption {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2em;
  margin: 0.25em 0;
}

.pic {
  height: calc(100% - 3.4em);
}

Now, watch this screenshoot:



As you can see, the caption is quite aparted from the image. Why? To see why, let's add a border to the image:

.pic {
  height: calc(100% - 3.4em);
  border: 1px solid red;
}

Now we can see that the issue is due to the proportion of the image regarding the proportion of the screen. There is nothing we can do to fix that. As much, we can center (horizontal and vertically) the image perfectly:



and we do that with:

.pic {
  height: calc(100% - 3.4em);
/* properties to center vertically an image inside a container no matter the size of the container or the image */ 
  display: flex;
  align-items: center;
  justify-content: center;
}

Well, that's all about how to add a caption to an image at full page UNDER EPUB3. Don't forget you also need to write code to handle epub2 ereaders.

Regards

[PilcrowandStanza]

wonderful! This makes things so much simpler! (Don't have to do the whole image/caption grouped in seperate frame thing.) I even figured out how to do a variant that floats/wraps top right. (sweet!)

If you were here I would hug you!
Thank you so much!!