02-27-2020, 07:00 AM | #1 | |
Member
Posts: 21
Karma: 10
Join Date: Aug 2013
Device: Kindle Voyage
|
background image with text and footnnotes
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:
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! |
|
02-27-2020, 09:55 AM | #2 |
Wizard
Posts: 1,590
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
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> 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> 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> Regards Last edited by RbnJrg; 02-27-2020 at 10:46 AM. |
Advert | |
|
02-27-2020, 10:34 AM | #3 |
Wizard
Posts: 1,590
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
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> 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"; } Last edited by RbnJrg; 02-27-2020 at 10:41 AM. |
02-27-2020, 12:27 PM | #4 |
Member
Posts: 21
Karma: 10
Join Date: Aug 2013
Device: Kindle Voyage
|
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. |
02-27-2020, 03:02 PM | #5 |
Member
Posts: 21
Karma: 10
Join Date: Aug 2013
Device: Kindle Voyage
|
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 |
Advert | |
|
02-27-2020, 04:48 PM | #6 | |
Wizard
Posts: 1,590
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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. Last edited by RbnJrg; 02-27-2020 at 05:23 PM. |
|
02-27-2020, 06:14 PM | #7 |
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, 06:51 AM | #8 | |||
Wizard
Posts: 1,590
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Quote:
Quote:
|
|||
02-28-2020, 09:19 AM | #9 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
02-28-2020, 12:09 PM | #10 |
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!
|
|
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 |