JayPanoz/portrait-caption.css

## portrait-caption.css
/* Current nugget */

/* This in your fallback CSS (for ePub 2) */
.portrait-caption {
  height: 99%;                /* must check if necessary */
  margin: 1.5em 0;
  page-break-before: auto;
}
.portrait-caption > img {
  width: auto;
  max-width: 100%;
  height: 80%;
}


/* The following in another CSS (EPUB 3) */

/* EPUB 3 FALL-FALL-FALLBACK */

.portrait-caption {
  background-color: yellow;  /* I'm using bg-color to check which styles are applied in RS */
}
.portrait-caption > img {
  height: 80vh;
  max-height: 800px;      /* Must check CSS specs — how max-height is supposed to behave when vh/calc on height */
  object-fit: contain;    /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
}

/* Feature query using @supports = progressive enhancement */

@supports (page-break-before: always) and (height: calc(99vh - 5em)) {
  .portrait-caption {
    min-height: 100vh;              /* fallback for the following line if anything goes wrong */
    min-height: calc(100vh - 0px);  /* = 100vh but we make sure it is recomputed when doc is updated */
    width: 100%;                    /* is probably useless */
    background-color: LightGreen;
    page-break-before: always;           /* So… ADE doesn't support that though it says it does */
    -webkit-column-break-inside: avoid;  /* making ADE behaves */
    display: block;
    margin: 0;               /* image in flow, it is not in its own xhtml file. That's the magic. */
  }
  .portrait-caption > img {
    box-sizing: border-box;  /* because padding */
    max-width: 100%;
    min-height: 60vh;        /* So that it doesn't become ridiculously tiny when huge font-size is set */
    height: -webkit-calc(98vh - 5em);
    height: calc(98vh - 5em);           /* 98vh - caption’s height || Fallback is 80vh */
    object-fit: contain;                /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
    padding: 1vh 0;          /* if for some reason it breaks inside, we make sure we got a padding at top of image, bottom for caption */
    margin: 0 auto;          /* centering */
  }
}

/* For Readium scroll as the viewport is unreliable.
   1. min-height depends on your documents’ sizes. Using `em`
      makes sure it is recomputed when font-size is changed.
      Maybe we could find something else?
   2. FYI, if you just got an image in a xhtml file,
      Readium’s default viewport in scroll is 300 x 150px
      so your 100vh-height image will be 150px.                 */

@media screen and (min-height: 150em) {
  .portrait-caption {
    display: block;
    margin: 1.5em 0;
    min-height: 0;   /* reset */
    height: auto;    /* reset */
    background-color: red;
  }
  .portrait-caption > img {
    min-height: 300px;   /* reset */
    height: auto;        /* reset as we rely on max-width */
    max-height: 100%;
    max-width: 100%;     /* Pic will scale based on its width */
    padding: 0;
  }
}
	/* Current nugget */

	/* This in your fallback CSS (for ePub 2) */
	.portrait-caption {
	height: 99%; /* must check if necessary */
	margin: 1.5em 0;
	page-break-before: auto;
	}
	.portrait-caption > img {
	width: auto;
	max-width: 100%;
	height: 80%;
	}


	/* The following in another CSS (EPUB 3) */

	/* EPUB 3 FALL-FALL-FALLBACK */

	.portrait-caption {
	background-color: yellow; /* I'm using bg-color to check which styles are applied in RS */
	}
	.portrait-caption > img {
	height: 80vh;
	max-height: 800px; /* Must check CSS specs — how max-height is supposed to behave when vh/calc on height */
	object-fit: contain; /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
	}

	/* Feature query using @supports = progressive enhancement */

	@supports (page-break-before: always) and (height: calc(99vh - 5em)) {
	.portrait-caption {
	min-height: 100vh; /* fallback for the following line if anything goes wrong */
	min-height: calc(100vh - 0px); /* = 100vh but we make sure it is recomputed when doc is updated */
	width: 100%; /* is probably useless */
	background-color: LightGreen;
	page-break-before: always; /* So… ADE doesn't support that though it says it does */
	-webkit-column-break-inside: avoid; /* making ADE behaves */
	display: block;
	margin: 0; /* image in flow, it is not in its own xhtml file. That's the magic. */
	}
	.portrait-caption > img {
	box-sizing: border-box; /* because padding */
	max-width: 100%;
	min-height: 60vh; /* So that it doesn't become ridiculously tiny when huge font-size is set */
	height: -webkit-calc(98vh - 5em);
	height: calc(98vh - 5em); /* 98vh - caption’s height \|\| Fallback is 80vh */
	object-fit: contain; /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
	padding: 1vh 0; /* if for some reason it breaks inside, we make sure we got a padding at top of image, bottom for caption */
	margin: 0 auto; /* centering */
	}
	}

	/* For Readium scroll as the viewport is unreliable.
	1. min-height depends on your documents’ sizes. Using `em`
	makes sure it is recomputed when font-size is changed.
	Maybe we could find something else?
	2. FYI, if you just got an image in a xhtml file,
	Readium’s default viewport in scroll is 300 x 150px
	so your 100vh-height image will be 150px. */

	@media screen and (min-height: 150em) {
	.portrait-caption {
	display: block;
	margin: 1.5em 0;
	min-height: 0; /* reset */
	height: auto; /* reset */
	background-color: red;
	}
	.portrait-caption > img {
	min-height: 300px; /* reset */
	height: auto; /* reset as we rely on max-width */
	max-height: 100%;
	max-width: 100%; /* Pic will scale based on its width */
	padding: 0;
	}
	}