need some help with formatting text in popup footnotes for Kindle ebook

[TashTash]

Hello,

first let me introduce myself since I am new to the forum. My name is Tjasa and I live in Slovenia. I am a graphic designer otherwise specialized in branding but I also design books now and then and started working on ebooks as well. Forgive me if this thread is in the wrong topic, but this one seemed the most accurate for my question.

I designed a poetry epub in Indesign and exported it to .mobi file for Kindle. Everything looks fine, the poems are correctly formatted so there is no problem here. However the book has some footnotes and those are not formatted correctly when viewing on Kindle device. Somehow the lines get broken. I checked all the stylesheets, text alignment and everything looks fine in the original .indd file. Even kindle previewer program on my computer shows the footnotes correctly. but when viewing on Kindle device, I get a mess of broken lines and incorrect text alignment. I even checked the CSS styles and the HTML code, as far as my knowledge goes, everything looks correct there. Does anyone here have similar problem and had been able to fix it?

For days I am reading different forums, asking different designers and didn't find any solutions, so you guys are my last hope!

I am also posting a picture of the footnotes on Kindle device, just for reference. If needed I can even post the code.

PLEASE HELP!

Thank you good people and hope to hear from you soon!

Tash

here is the link to view the image:
https://drive.google.com/open?id=1yH...Xphd3hLqyKqAhA

[TashTash]

Hello,

first let me introduce myself since I am new to the forum. My name is Tjasa and I live in Slovenia. I am a graphic designer otherwise specialized in branding but I also design books now and then and started working on ebooks as well. Forgive me if this thread is in the wrong topic, but this one seemed the most accurate for my question.

I designed a poetry epub in Indesign and exported it to .mobi file for Kindle. Everything looks fine, the poems are correctly formatted so there is no problem here. However the book has some footnotes and those are not formatted correctly when viewing on Kindle device. Somehow the lines get broken. I checked all the stylesheets, text alignment and everything looks fine in the original .indd file. Even kindle previewer program on my computer shows the footnotes correctly. but when viewing on Kindle device, I get a mess of broken lines and incorrect text alignment. I even checked the CSS styles and the HTML code, as far as my knowledge goes, everything looks correct there. Does anyone here have similar problem and had been able to fix it?

For days I am reading different forums, asking different designers and didn't find any solutions, so you guys are my last hope!

I am also posting a picture of the footnotes on Kindle device, just for reference. If needed I can even post the code.

PLEASE HELP!

Thank you good people and hope to hear from you soon!

Tash

here is the link to view the image:
https://drive.google.com/open?id=1yH...Xphd3hLqyKqAhA

[DaleDe]

Welcome to MobileRead. You a more likely to get help if you post to the forum where the experts are. In this case it is the Kindle mobi forum. I will move the post for you.

[jhowell]

It is probably a quirk of how pop-up footnotes are rendered.

If you navigate to the page containing the footnote instead of using the link does the page show the footnote text as you expect?

Originally Posted by TashTash

here is the link to view the image: https://drive.google.com/open?id=1yH...Xphd3hLqyKqAhA

Your link is broken.


(Also please do not post the same question in more than one forum.)

[Doitsu]

Originally Posted by TashTash

I am also posting a picture of the footnotes on Kindle device, just for reference. If needed I can even post the code.

A picture isn't going to help. What we need to see is the HTML code of a paragraph with a footnote link, the HTML code of the paragraph with the footnote definition and the styles that you've used.

You might want to export an epub from InDesign first and convert it mobi once you're sure that everything works.

Also check out the footnote section in the Amazon Kindle Publishing Guidelines.

[TashTash]

x
Hi,

thank you for your help.


When navigating to the footnote section, all the footnotes are shown normally. I guess. But having footnotes only at the end of the book is not the best solution, because it does not return the user back to the text referring to the same footnote. Also when exporting epub without popup footnotes, kindle apparently automatically makes popup footnotes along with the footnotes at the end of the book. Is this making any sense?

I am sorry about the link, don't know why this happened. Here it is again and hope it works properly now. https://drive.google.com/open?id=1Of...Hty96xazKgwfqH

As far as the multiple thread to various topics... I am really sorry about that, just wasn't sure which topic to refer the question to. Won't happen again.

Tash

[TashTash]

I did export the epub from indesign first and then converted it to mobi, checked also on kindle previewer before copying it to Kindle device. In epub and kindle previewer everything looks great, but on the device, all the sentences in the pop up footnotes get broken. Here is the link to the picture again https://drive.google.com/open?id=1Of...Hty96xazKgwfqH
I even checked the code, tried to manually change it but without any luck and fewer progress.
However I am more then glad to show you the code, should I just paste it here?

Thank you so much for your help!

Tash

[TashTash]

p.s. I also checked the footnote section in the amazon kindle publishing guidelines, used the code they recommend, got some progress there for the footnote number 1, but the second footnote did not show in popup, instead it was shown on another page, standing alone on it. IT became actually a part of the body text. is this making any sense?

thank you again!

[Doitsu]

Originally Posted by TashTash

Here is the link to the picture again https://drive.google.com/open?id=1Of...Hty96xazKgwfqH

1. You can attach images to posts.
2. We'll need to see the actual footnote styles. (It looks like you styled footnotes (or a parent tag) as text-align: justified;)

[TashTash]

Originally Posted by Doitsu

1. You can attach images to posts.
2. We'll need to see the actual footnote styles. (It looks like you styled footnotes (or a parent tag) as text-align: justified;)

Hello,

I know I can post a picture inside the thread, but for some reason I was requested to use a link which didn't work.

However here is the css styles:

p.footnotes {
	color:#000000;
	font-family:Arial, sans-serif;
	font-size:0.75em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:1.2;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:99;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}
span.italic-footnote {
	font-style:italic;
	font-weight:normal;
}
span.CharOverride-1 {
	font-size:58%;
	vertical-align:super;
}
span.CharOverride-2 {
	font-family:Arial, sans-serif;
	font-size:58%;
	font-style:italic;
	font-weight:normal;
	vertical-align:super;
}

And this is the part of the code where one of the footnotes appear:

<p class="body-txt"><br />Jangadas<span class="CharOverride-1"><span id="footnote-032-backlink"><a class="_idFootnoteLink _idGenColorInherit" epub:type="noteref" href="quinta_pitanga_ebook.xhtml#footnote-032">1</a></span></span>

<div class="_idFootnotes">
				<aside id="footnote-032" class="_idFootnote" epub:type="footnote">
					<p class="footnotes"><a class="_idFootnoteAnchor _idGenColorInherit" href="quinta_pitanga_ebook.xhtml#footnote-032-backlink"></a>Jangada, a traditional fishing boat with a single sail.</p>
				</aside>

Should I miss anything out, please let me know.

Thank you so much for your effort and help.

[JSWolf]

You also need to test your eBook in Mobi format because Mobi does not do popup footnotes and you have to make sure the footnotes work in Mobi.

[TashTash]

Originally Posted by JSWolf

You also need to test your eBook in Mobi format because Mobi does not do popup footnotes and you have to make sure the footnotes work in Mobi.

Hello,

yes I know I do. And I have tested it directly on Kindle device. And the popups do not work properly, the sentence lines get broken. See the picture I posted above in one of the replies.

Thank you,

Tash

[DaleDe]

Originally Posted by TashTash

Hello,

I know I can post a picture inside the thread, but for some reason I was requested to use a link which didn't work.

If you scroll down after the reply to thread (or the advance option on new posts) You will find a Manage Attachments button. Press this to add attachments to a post. The attachment can be a file or a picture. This is the preferred way to provide more information.

Dale

[Doitsu]

Originally Posted by TashTash

Should I miss anything out, please let me know.

The HTML code looks OK. The stylesheet is missing the definitions of the following classes:

_idFootnotes
_idFootnote
_idFootnoteAnchor
_idGenColorInherit

[TashTash]

Originally Posted by Doitsu

The HTML code looks OK. The stylesheet is missing the definitions of the following classes:

_idFootnotes
_idFootnote
_idFootnoteAnchor
_idGenColorInherit

Hello,

You are right, i actually didn't see that and didn't realize this could be a problem. As I told you, I am just a designer with only basic CSS and HTML knowledge. However I do have idGenColorInherit defined, just didn't copy it. As for the others, they indeed are not in the CSS. I know this is not your job, but could and would you be willing to help me define them?

Thank you in advance, sending big hug.

Tash