Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-07-2017, 12:31 PM   #1
nodestar
Junior Member
nodestar began at the beginning.
 
Posts: 5
Karma: 10
Join Date: May 2017
Device: None
How to keep a Header and svg wrapped img on the same page

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.
nodestar is offline   Reply With Quote
Advert
Old 05-08-2017, 02:23 AM   #2
jbacelar
Interested in the matter
jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.
 
jbacelar's Avatar
 
Posts: 210
Karma: 90454
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
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:
Code:
display:none;
I hope this is useful to you.
jbacelar is offline   Reply With Quote
Old 05-08-2017, 09:18 AM   #3
nodestar
Junior Member
nodestar began at the beginning.
 
Posts: 5
Karma: 10
Join Date: May 2017
Device: None
Quote:
Originally Posted by jbacelar View Post
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:
Code:
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?
nodestar is offline   Reply With Quote
Old 05-08-2017, 12:46 PM   #4
jbacelar
Interested in the matter
jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.
 
jbacelar's Avatar
 
Posts: 210
Karma: 90454
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
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.
jbacelar is offline   Reply With Quote
Old 05-08-2017, 02:29 PM   #5
nodestar
Junior Member
nodestar began at the beginning.
 
Posts: 5
Karma: 10
Join Date: May 2017
Device: None
Quote:
Originally Posted by jbacelar View Post
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.
nodestar is offline   Reply With Quote
Advert
Old 05-08-2017, 02:46 PM   #6
Turtle91
Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 1,371
Karma: 11165888
Join Date: Dec 2012
Location: Altus, Oklahoma today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
Quote:
Originally Posted by nodestar View Post
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.
Turtle91 is offline   Reply With Quote
Old 05-08-2017, 04:19 PM   #7
nodestar
Junior Member
nodestar began at the beginning.
 
Posts: 5
Karma: 10
Join Date: May 2017
Device: None
Quote:
Originally Posted by Turtle91 View Post
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
Code:
<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
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: 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;
}
nodestar is offline   Reply With Quote
Old 05-08-2017, 05:50 PM   #8
jbacelar
Interested in the matter
jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.jbacelar composes epic poetry in binary.
 
jbacelar's Avatar
 
Posts: 210
Karma: 90454
Join Date: Dec 2011
Location: Spain, south coast
Device: Pocketbook Touch HD
Quote:
Originally Posted by nodestar View Post
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.

Last edited by jbacelar; 05-08-2017 at 05:53 PM.
jbacelar is offline   Reply With Quote
Old 05-08-2017, 08:05 PM   #9
nodestar
Junior Member
nodestar began at the beginning.
 
Posts: 5
Karma: 10
Join Date: May 2017
Device: None
Quote:
Originally Posted by jbacelar View Post
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.
nodestar is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is there a way to show chapter name as header on every page? Dragan Tanevski ePub 10 10-28-2015 03:27 PM
IMG inside SVG inside TD? Kasper Hviid Sigil 4 05-25-2014 06:57 AM
<svg> to <img> codrutoctavian ePub 8 03-01-2012 08:54 PM
<svg> to <img> tags conversion codrutoctavian Conversion 1 02-15-2012 09:58 PM
Odd and Even page Header Settings RajeshKumar Sony Reader 11 05-18-2007 10:16 AM


All times are GMT -4. The time now is 12:24 AM.


MobileRead.com is a privately owned, operated and funded community.