Mobileread
need some help with formatting text in popup footnotes for Kindle ebook
#1  TashTash 05-13-2020, 09:11 AM
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=1yHsKZx1vlERUwNYwrOXphd3hLqyKqAhA

image »
Reply 

#2  TashTash 05-13-2020, 09:18 AM
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
Reply 

#3  DaleDe 05-13-2020, 12:04 PM
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.
Reply 

#4  jhowell 05-13-2020, 12:05 PM
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?

Quote 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.)
Reply 

#5  Doitsu 05-13-2020, 12:10 PM
Quote 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.
Reply 

#6  TashTash 05-13-2020, 05:43 PM
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=1Of1x6K3wrDi-kLokqeHty96xazKgwfqH

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
Reply 

#7  TashTash 05-13-2020, 05:48 PM
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=1Of1x6K3wrDi-kLokqeHty96xazKgwfqH
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
Reply 

#8  TashTash 05-13-2020, 05:51 PM
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!
Reply 

#9  Doitsu 05-14-2020, 04:28 AM
Quote TashTash
Here is the link to the picture again https://drive.google.com/open?id=1Of1x6K3wrDi-kLokqeHty96xazKgwfqH
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;)
Reply 

#10  TashTash 05-14-2020, 05:06 AM
Quote 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:

Code
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:

Code
<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.
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register