I'm new to epub and my experience with html/css is minimal. So I'm not sure if what I'm trying to accomplish is best practice or possible. I'm open to hearing a better way.
I want my <h2> header to stay with an svg wrapped image. So the chapter title page will be the header(h2 tags) followed by an svg wrapped image that fills the rest of the page. Then the text starts on the next page.
As of right now I get a chapter title(h2 tags) on its own page. Then the svg image on the next page.
After reading most of the threads on svg I finally found code that properly centered the image(at least in the kindle previewer).
Pasted in HTML page header.
Code:
<style type="text/css">
@page { margin: 0.000000pt; padding: 0.000000pt; }
</style>
CSS
Code:
.svg_outer {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: left;
}
.svg_inner {
display: block;
text-align: center;
}
HTML code
Code:
<div class="svg_outer">
<div class="svg_inner">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1201 1800" preserveAspectRatio="xMidYMid meet"><image width="1201" height="1800" alt="John standing triumphantly by a flag" xlink:href="../Images/Leap1small.jpeg"/></svg>
</div>
</div>
I've tried putting the svg inside the h2 tags. Placing the h2 tags everywhere inside the svg. The only thing that's worked for me is to change the height="100%" to "80%". Which leaves room for the h2 header some of the time but breaks easily by just flipping the reading device. This also makes the image that much smaller.
I'm using Sigil and I've seen some guides on building a TOC from none headers. So I'm not stuck on the h2 tags. I'm also not stuck on the svg wrapper it just seemed like the way to go. I really just want a best practice/elegant solution.