How to keep a Header and svg wrapped img on the same page

[nodestar]

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.

<style type="text/css">
@page { margin: 0.000000pt; padding: 0.000000pt; }
</style>

CSS

.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

<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.

[jbacelar]

You can take a look at one of my epubs (https://www.mobileread.com/forums/sh...d.php?t=268249).
The idea is to include all the text (for example the title of a chapter) in the svg wrapper, and before putting the header with its tag defined in the css as:

display:none;

I hope this is useful to you.

[nodestar]

Originally Posted by jbacelar

You can take a look at one of my epubs (https://www.mobileread.com/forums/sh...d.php?t=268249).
The idea is to include all the text (for example the title of a chapter) in the svg wrapper, and before putting the header with its tag defined in the css as:

display:none;

I hope this is useful to you.

Thanks for the reply. I didn't see any examples of a Chapter Header and a full page illustration on the same page in your epub.

I've tried to put the h2 tags inside the svg wrapper but I still get a page with just the Chapter Header and the full page illustration on the next page.

Wouldn't the display: none; make the header disappear?

[jbacelar]

Note the file "portada.xhtml", in this case it is a cover and the tag is <h1> (but this is the same for a cover, a chapter, etc.).
Observe the text carefully within the svg.
In the file "Estilo.css" you will find that the h1 tag (in your epub should be h2) has the property: display-none.
In short the header tag does not actually look, it's for the TOC. What you see is the text that is in the svg wrapper.

[nodestar]

Originally Posted by jbacelar

Note the file "portada.xhtml", in this case it is a cover and the tag is <h1> (but this is the same for a cover, a chapter, etc.).
Observe the text carefully within the svg.
In the file "Estilo.css" you will find that the h1 tag (in your epub should be h2) has the property: display-none.
In short the header tag does not actually look, it's for the TOC. What you see is the text that is in the svg wrapper.

I understand now. Thanks for the help.

This worked in firefox's epub reader but the text was missing in the Kindle previewer. I couldn't tell if the previewer was ignoring the x,y coordinates or the image was covering the text.

The text was also trapped inside the image. Because the image is trying to fill the page as much as possible, there is no space at the top for the chapter title/text to sit.

I'm trying to create this space for the chapter title to be preserved and have the svg wrapped image fill the rest of the available space while maintaining its aspect ratio.

[Turtle91]

Originally Posted by nodestar

I understand now. Thanks for the help.

This worked in firefox's epub reader but the text was missing in the Kindle previewer. I couldn't tell if the previewer was ignoring the x,y coordinates or the image was covering the text.

The text was also trapped inside the image. Because the image is trying to fill the page as much as possible, there is no space at the top for the chapter title/text to sit.

I'm trying to create this space for the chapter title to be preserved and have the svg wrapped image fill the rest of the available space while maintaining its aspect ratio.

You simply need to adjust the size of the viewbox - make it taller than the image - to provide the extra room for the text.

[nodestar]

Originally Posted by Turtle91

You simply need to adjust the size of the viewbox - make it taller than the image - to provide the extra room for the text.

I played around with different viewbox settings but I couldn't get anything to work. The whitespace created by the absence of the image still covers the text in Kindle Previewer. I can see a couple pixels peeking through right above the image. This may be the divs surrounding the svg fault. I'm not familiar enough with html/css behavior.

HTML

<body>
  <h2 class="hide">One Giant Leap</h2>

  <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"/>

        <text class="large" x="600" y="100">Chapter Title</text>
      </svg>
    </div>
  </div>

CSS

.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: center;
} 

.svg_inner {
display: block;
text-align: center;
}

text.large {
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
font-size: 700%;
font-style: italic;
text-indent: 0em;
text-align: center;
text-anchor: middle;
}

[jbacelar]

Originally Posted by nodestar

This worked in firefox's epub reader but the text was missing in the Kindle previewer. I couldn't tell if the previewer was ignoring the x,y coordinates or the image was covering the text.

This is the forum for epubs, maybe you find help in the forum for kindle formats.

[nodestar]

Originally Posted by jbacelar

This is the forum for epubs, maybe you find help in the forum for kindle formats.

Right'o. Thanks again for the help and tips.