Footnote popup not aligned

2 posts / 0 new
Last post

Hello everyone!

Initially I would like to ask for my bad English, but I'm from Brazil and I do not speak English so well!
My situation is as follows, I am creating ePubs and I was very interested in the possibility of footnotes being displayed like popup.
I did some research on how to apply this to an ePub and when it comes to implementing an ePub file it is showing up this way on my iPad (https://dl.dropboxusercontent.com/u/102796035/Diversos/Arquivo_000.png)

Note that the note is not aligned with the note reference. I'd love to know how to leave aligned as we can see here (http://www.digitalbookworld.com/wp-content/uploads/footnotes-768x1024.jpg)

Below is the code I used to display this note. In case I'm using Sigil to create the ePub

<? Xml version = "1.0" encoding = "utf-8"?>
<! DOCTYPE html>

<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: epub = "http://www.idpf.org/2007/ops">
<Head>
<Title> </ title>
</ Head>
<Body>
<P> This is just a test <a href="noteref" href="#fn01"> [1] </a> </ p>
<Aside id = "fn01" epub: type = "footnote"> Notes for the test </ aside>
</ Body>
</ Html>

Anyone could help me?

First note, that your noted source code is no XHTML, not even valid XML.
But you need this for EPUB.

Especially XHTML has no elements starting with capital letters.
And you can note an attribute only once per element - there are some more bugs in your source code, check it with a Validator vor XHTML/XML.

Asuming you mean the HTML 5 aside element, it has no special appearence by default.
If you want to provide a specific presentation you need to add some styling (CSS) to your book.
The problem with alignment with CSS here is of course, that there is no simple relation between the referenced aside and the referencing a.
If you use only the CSS pseudo element :target, the position of the targetted element is not related to the referencing element.
To get this somehow in an easy way, you may need to put some structure inside the referencing a element.
Because this is inline, this should be an inline element as well, for example span instead of aside.
For such a structure, it is more simple to align interactively.

But some low quality EPUB viewers may have restricted options for providing dynamically changing decorations, you cannot rely on this anyway.

Secondary menu