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.) |
A lot of people will disagree with your h1 code.
Code:
<h1>CHAPTER ONE</h1>
<div class="center"><img src="..." alt="..."/></div>
<h2>CHAPTER TITLE</h2>
And of course style h1, .center, and h2 appropriately.