background image with text and footnnotes

severus · 02-27-2020, 07:00 AM

Hi there, I'm working on this epub in Sigil, epub 2.0.

I'm looking for a way to append a footnote to a text that overlays a background image (a footnote referring to another file in the epub).

Text over an image was nicely managed in this thread, but the footnote wasn't discussed:

https://www.mobileread.com/forums/sh...=227739&page=6

So (working on the file kindly provided by RbnJrg in the thread above) I was hoping to get the footnote to work like this:

Quote:

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1222" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1222" width="800" xlink:href="../Images/ch-template.jpg"/>

<text fill="black" style="font-size: 40px; font-family:'Fontin'; font-style: bold" text-anchor="middle" x="400" y="200">Chapter title</text>

<text fill="black" style="font-size: 25px; font-family: Fontin" text-anchor="middle" x="400" y="400">"...so that at least I may come to rest<br/>
in death in the tranquil resting places"<a href="../Text/ftn.html#ftn1" id="ftn1"><sup>[1]</sup></a></text>

<text fill="black" style="font-size: 20px; font-family: 'Fontin'" text-anchor="right" x="550" y="430">Vergil</text>

</svg>

</div>
</body>

But when a footnote is added, the reference link doesn't work as the footnote is moved to the bottom of the page instead of pointing to another file in the epub. In adtion [<br/>] doesn't work and the text is displayed as a single line.

The idea for this exercise is to have a separate chapter page.

I'd be super greateful if someone can give a helping hand out of this corner. Thanks!

RbnJrg · 02-27-2020, 09:55 AM

First at all, your svg img included in your epub is wrong:

Code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1222" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1222" width="800" xlink:href="../Images/ch-template.jpg"/>

    <text fill="black" style="font-size: 40px; font-family:'Fontin'; font-style: bold" text-anchor="middle" x="400" y="200">Chapter title</text>

    <text fill="black" style="font-size: 25px; font-family: Fontin" text-anchor="middle" x="400" y="400">"...so that at least I may come to rest</text>
    </svg>   <!-- Here end the svg image -->

    <br/>

    in death in the tranquil resting places"<a href="../Text/ftn.html#ftn1" id="ftn1"><sup>[1]</sup></a> 

    <text fill="black" style="font-size: 20px; font-family: 'Fontin'" text-anchor="right" x="550" y="430">Vergil</text>
  </div>

When you apply the </svg> closing tag, then the svg image ends. So, nothing below belongs to the image. Besides the <br> tag doesn't work in a svg and <text> only works INSIDE svg. If you want to split text, then you must use the tag <tspan>. Your right svg image could be something like:

Code:

  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1222" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1222" width="800" xlink:href="../Images/ch-template.jpg"/>

      <text fill="black" style="font-size: 40px; font-family:'Fontin'; font-style: bold" text-anchor="middle" x="400" y="200">Chapter title</text>

      <text fill="black" style="font-size: 25px; font-family: Fontin" text-anchor="middle">
         <tspan  x="400" y="400">"...so that at least I may come to rest</tspan>

<tspan x="400" y="450">in death in the tranquil resting places"</tspan></text>

      <text fill="black" style="font-size: 20px; font-family: 'Fontin'" text-anchor="right" x="550" y="500">Vergil</text>
</svg>
  </div>

If you want to learn how to handle text inside a svg image, then it would be good for you to read the following pages:

http://tutorials.jenkov.com/svg/text-element.html

http://tutorials.jenkov.com/svg/tspan-element.html

http://tutorials.jenkov.com/svg/tref-element.html

http://tutorials.jenkov.com/svg/textpath-element.html

Besides, to define a link inside a svg image is not exactly the same as defining a link in xhtml. Watch here how to define a link in svg:

http://tutorials.jenkov.com/svg/a-element.html

Also, inside a svg image you can't use <sup>. If you want text that mimics the superscript style, then you must use basement-shift="super". Your final svg should be something like this one:

Code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1222" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1222" width="800" xlink:href="../Images/ch-template.jpg"/>

          <text fill="black" style="font-size: 40px; font-family:'Fontin'; font-style: bold" text-anchor="middle" x="400" y="200">Chapter title</text>

          <text fill="black" style="font-size: 25px; font-family: Fontin" text-anchor="middle">
             <tspan  x="400" y="400">"...so that at least I may come to rest</tspan>

             <tspan x="400" y="450">in death in the tranquil resting places"</tspan>

             <a xlink:href="../Text/ftn.html#ftn1"><tspan baseline-shift = "super" font-size="20px">[1]</tspan></a>
         </text>

         <text fill="black" style="font-size: 20px; font-family: 'Fontin'" text-anchor="right" x="550" y="500">Vergil</text>
    </svg>
</div>

Of course, the reference of the link must be ajusted. Your epub must contain a page named "ftn.html" (your epub contains a file named "ftn.xhtml" and there must exist the id="ftn1". Othewise the link won't work. Watch in the epub below a working link.

Regards

RbnJrg · 02-27-2020, 10:34 AM

I don't know why you chose my svg approach for text over image. Of course that is valid but there are other alternatives that do not involve the use of svg images. Here is an example of another way to achieve what you want (you are posting in the epub forum, but if you are going to use it in books for Kindle, the code needs modifications):

1. In the .xhtml file:

Code:

<body>
  <div class="top">

    <h2>Chapter Title</h2>
    <p class="center bold top">"...so that at least I may come to rest<br/>in death in the tranquil resting places"<sup><a href="../Text/ftn.xhtml#ftn1" id="ftn1">[1]</a></sup></p>

    <p class="right bold">Virgil</p>
  </div>
</body>

2. In the .css file:

Code:

@font-face {
    font-family: "Fontin";
    font-weight: normal;
    font-style: normal;
    src: url("../Fonts/Fontin.ttf");
}

html {
     height: 100%;
}

body {
     height: 100%;
     margin: 0;
     padding: 0;
     background: url("../Images/ch-template.jpg");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
}


h2 {
     text-indent: 0;
     text-align: center;
     font-size: 1.4em;
     margin-bottom: 25%;
     font-family: "Fontin";
}

.center {
     text-indent: 0;
     text-align: center;
}

.right {
     text-align: right;
     
}

.bold {
     font-weight: bold;
}

div.top {
     margin: 40% 15% 0;
     font-family: "Fontin";
}

As you can see, I'm using "html {height: 100%}". This can produce some issues if the page is not only for a image with some text inscribed over it. But if want to uses as a start of a chapter only, then no problem. Below you can check the respective epub. Probably the margins used by me will need a tweak, but the important is to show the method.

severus · 02-27-2020, 12:27 PM

Thank you, RbnJrg, for pointing all this out to me

I can see I've some work to do. I went through SVG explanations at tutorials.jenkov.com.

I followed your advice to adjust the "ftn.html" and the id="ftn1" (or so I believe).

The back-reference works in SIGIL both ways in that it points to the fotnote at "ftn.html" and back to "main.xhtml" from the footnote file.

But it doesn't work both ways in the kindle ereader. While it corrently points to the footnote, it doesn't point back to the original xlink:href location at "main.xhtml".

I couldn't find the solution at tutorials.jenkov or I may have missed something.

I'd really appreciate just one more finishing touch to this as I'm unable to sort it out.

severus · 02-27-2020, 03:02 PM

Thanks again, RbnJrg.

yes, this will only be used as a start of a chapter only.

The reason why I chose your approach is simple really: being quite a novice I haven't come across an altenative. Your approach to include the graphics with overlaid text brings forward the visual side of the ebook, which seems important to me. I wanted to avoid placing about 20 images (with different chapter titles) in the epub file as it'd increase the file size.

This other method without the use of SVG image is a brilliant solution. And it provides a cross-link both in the Sigil and in the kindler ereader.

It just doesn't display the picture in the ereader (converted in Previewer and calibre).

I tried tweaking the margins to no avail.

So, in summary, the SVG method doesn't provide a cross-link in the ereader, and the alternative method without SVG doesn't display the picture in the ereader.

I do hope there's a solution to get the cross-link work in the SVG method!

If you would be so kind as to afford some more patience and time with at least SVG method (it's super interesting). Thanks

RbnJrg · 02-27-2020, 04:48 PM

Quote:

Originally Posted by severus

The back-reference works in SIGIL both ways in that it points to the fotnote at "ftn.html" and back to "main.xhtml" from the footnote file.

But it doesn't work both ways in the kindle ereader. While it corrently points to the footnote, it doesn't point back to the original xlink:href location at "main.xhtml".

Well, if you want a solution for Kindle, then you should have posted in the Kindle forum

(here we are in the epub forum for epub solutions). Anyway, bad news for you, Kindle doesn't handle svg images with text, that is, if you want a .kfx file. If you convert an epub like yours, Kindlegen (or KindlePreviewer) will built a .kf8 book, where you can't find "enhanced typesetting" and links inside svg images won't work

Currently, there is nothing (at least, I don't know, maybe Hitch can tell you something different) that works in .kfx to produce the effect you want. You can get that, but ONLY for .kf8 (forget .kf7, there nothing works and you have another source of problems) but with .kf8 you won't have "enhanced typesetting". Sorry, I would like to help you but the necessary .css is not handled by the .KFX format (so far)

You could use a transparent .gif with negative top margin over text but .KFX won't accept a transparent .gif; or to use text with negative top margins over a normal image (.jpg, .png), or a image as background of <body> but also .KFX will have issues to show the text or the image.

So that, your ONLY WAY (for .KFX) is to use an image with the text written on the image. And to build the link with this one (so a click in any part of it will trigger the text of the footnote). Watch the epub I attach.

severus · 02-27-2020, 06:14 PM

Thank you! Now I understand why you asked about choosing this VGA approach of yours

All the more thanks, RbnJrg, for taking the time to patiently explain the intricacies to me. Despite all being said against an overlaid text in a VGA image as an unsatifactory solution for kindle, I like to think I learned a lot.

Apologies for posting this discussion in the wrong forum. If only admin would be so kind as to please transfer this thread over there where it might (perhaps) be of some use to someone who come up a the same question.

And if Hitch offers any comment I'd be only happy to hear it.

RbnJrg · 02-28-2020, 06:51 AM

Quote:

Originally Posted by severus

All the more thanks, RbnJrg, for taking the time to patiently explain the intricacies to me.

No problem

Quote:

Apologies for posting this discussion in the wrong forum. If only admin would be so kind as to please transfer this thread over there where it might (perhaps) be of some use to someone who come up a the same question.

Send a PM to any of the moderators asking them to move your post to the Kindle forum.

Quote:

And if Hitch offers any comment I'd be only happy to hear it.

I'm sure that when she reads your post, she will give you her opinion.

Hitch · 02-28-2020, 09:19 AM

Quote:

Originally Posted by RbnJrg

No problem

Send a PM to any of the moderators asking them to move your post to the Kindle forum.

I'm sure that when she reads your post, she will give you her opinion.

Hmmm.

I fear that links "over" images don't work worth two s**ts on Kindle.

That's because Kindles natively assume that tapping an image is meant to either a) flip the page or b) zoom the image, NOT c) tap a link.

CAN you make it work, at least for KF8 (and nothing else)? Yes, but then as Ruben mentions, you won't have Enhanced Typesetting, which aside from the widows/orphans feature, is really quite nice, and of course, it won't work at all in KF7 devices, of which there are still millions.

(for those that ask "how I know," the answer is Holmesian. Given how much aggro it is, Amazon would surely have nuked KF7, if they didn't have use statistics telling them that they're still in use. Plus, all the trade-pubbed books that have multimedia, are all still delivered in KF7 format. So...don't see that going away any time soon.)

I always recommend against it, at this time.

Hitch

severus · 02-28-2020, 12:09 PM

Thank you for your kind comment, Hitch. I'd love to hear from you answering some other question I may have this time in the correct forum

(the moderator has been notified to move the thread) Ruben and Hitch, thanks!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Background image with text on top?	Psymon	ePub	144	05-26-2020 05:48 PM
Background image	Najwa	Sigil	2	01-13-2020 02:50 PM
svg image on top of a background png image	roger64	ePub	25	04-24-2015 11:00 AM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
Background image	djrulz	Kindle Formats	1	03-29-2011 04:51 PM

02-27-2020, 06:14 PM	#7
severus Member Posts: 21 Karma: 10 Join Date: Aug 2013 Device: Kindle Voyage	Thank you! Now I understand why you asked about choosing this VGA approach of yours All the more thanks, RbnJrg, for taking the time to patiently explain the intricacies to me. Despite all being said against an overlaid text in a VGA image as an unsatifactory solution for kindle, I like to think I learned a lot. Apologies for posting this discussion in the wrong forum. If only admin would be so kind as to please transfer this thread over there where it might (perhaps) be of some use to someone who come up a the same question. And if Hitch offers any comment I'd be only happy to hear it.

02-28-2020, 12:09 PM	#10
severus Member Posts: 21 Karma: 10 Join Date: Aug 2013 Device: Kindle Voyage	Thank you for your kind comment, Hitch. I'd love to hear from you answering some other question I may have this time in the correct forum (the moderator has been notified to move the thread) Ruben and Hitch, thanks!