Quote:
Originally Posted by Jellby
With CSS3 tools like grid and vh you can get that in a web browser. But those are not required in ePub2, and even ePub3 readers will most likely not supported them properly or at all.
Code:
<div style="text-align: center; display: grid; grid-template: 'label' min-content 'image' minmax(0,max-content) 'title' min-content / 100%; height: 50vh; margin: 0;">
<h4 style="grid-area: label;">CHAPTER ONE</h4>
<div style="grid-area: image;">
<img src="Ch1.jpg" alt="" style="height: 100%;"/>
</div>
<h2 style="margin-bottom: 3em; grid-ara: title;">CHAPTER TITLE</h2>
</div>
(Nitpick: Don't use <h4>/<h2> for purely visual styling. If there are no headings higher than chapter, chapters should be <h1> [ok, or <h2> according to some], and styling inside should be done with span/div/class, as in:
Code:
<h1>
<div class="label">CHAPTER ONE</div>
<img src="..." alt="..."/>
CHAPTER TITLE
</h1>
and yes, you need an "alt" attribute, which may be empty or not.) |
I don't see how this can work, realistically, in 99% of all eReaders. You have a scenario in which you want the later element, the body text, to be determined FIRST and then the heading element, with the contained image element, determined SECOND, based upon the rendering of the first. I don't see that working worth a damn, surely not on Kindle (MOBI or ePUB), B&N's Nook devices (via ADE), or KoboBooks' devices.
Something like that might and I emphasize, MIGHT, work on a browser-based reader, something like Readium, but for regular, everyday eReaders? Not a chance.
(This comment is directed to the thread-submitter,
not to my buddy Jellby! His markup is super for browsers.)
Hitch