Hyperlinks in MOBI/KF8 fixed layout ebooks not working

RevonJulie · 11-03-2016, 12:00 PM

Hello all !

(I'm new to the community so please excuse me in advance if I'm not posting in the right forum

)

I need some help with the hyperlinks in my mobi/kf8 files generated via kindlegen from an ePub.

Here is the context :
I've got a PDF file that I converted into a HTML document using pdf2htmlEX. I've converted this HTML document into a fixed layout ePub 3 and now I would like to convert this ePub into mobi/kf8 ebooks. To do so I used the kindlegen app which usually works pretty well (at least for reflowable eBooks), the result is excellent except for the hyperlinks that don't work both in kindle previewer and in my Kindle Fire HD.

First, I thought kindlegen didn't handle properly the conversion and removed all the hyperlinks, but after unpacking the mobi package I remarked that the hyperlinks have been correctly created.

My HTML file is structured like this :

Code:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
	<head>
		<link rel="stylesheet" type="text/css" href="../Styles/myCSS.css" />
		<link rel="stylesheet" type="text/css" href="../Styles/myCSS2.css" />
		<link rel="stylesheet" type="text/css" href="myCSS" id="mobiCSS" />
		<meta name="viewport" content="width=942,height=1440" />
		<title>9780000000000_page21</title>
	</head>
	<body class="body">
		<div class="pouet-page-container">
			<span id="page_21" class="page" title="21" epub:type="pagebreak" data-AmznRemoved="mobi7"></span>
			<div id="pf15" class="pf w0 h0"><div class="pc pc15 w0 h0">
				<img class="bi x30 y73 wa h26" alt="" src="../Images/image00038.jpeg" id="d402e1626" width="709" height="1361" />
				<a class="l" href="mailto:vip@vestiairecollective.com">
					<div class="d m1" style="border-style:none;position:absolute;left:357.274973px;bottom:748.485324px;width:171.482000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
				<a class="l" href="http://www.secourspopulaire.fr">
					<div class="d m1" style="border-style:none;position:absolute;left:524.018541px;bottom:576.955423px;width:153.514000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
				<a class="l" href="http://www.emmaus-France.org">
					<div class="d m1" style="border-style:none;position:absolute;left:293.792298px;bottom:542.649443px;width:156.396000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
				<a class="l" href="http://www.croix-rouge.fr">
					<div class="d m1" style="border-style:none;position:absolute;left:302.464713px;bottom:508.343463px;width:117.894000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
				<a class="l" href="http://www.lerelais.org">
					<div class="d m1" style="border-style:none;position:absolute;left:184.559743px;bottom:405.425522px;width:111.140000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
				<a class="l" href="http://www.ecotextile.tm.fr">
					<div class="d m1" style="border-style:none;position:absolute;left:537.010016px;bottom:405.425522px;width:128.425000px;height:13.189000px;background-color:rgba(255,255,255,0.000001);">
					</div>
				</a>
			</div>
			</div>
		</div>
	</body>
</html>

and the CSS parts :

Code:

#page-container, .pouet-page-container {
  position:absolute;
  top:0;
  left:0px;
  margin:0; 
  padding:0;
  border:0;
}
.pc {
  position:absolute;
  border:0;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  display:block;
  transform-origin:0% 0%;
  -webkit-transform-origin:0% 0%;
}
.bi {
  position:absolute;
  border:0;
  margin:0;
  -webkit-user-select:none;
  user-select:none;
}
.l {
}
.d {
  position:absolute;
  transform-origin:0% 100%;
  -webkit-transform-origin:0% 100%;
}
.page { display:none; }

Code:

.h0 {
	height : 1440.000000px;
}
.w0 {
	width : 941.773425px;
}
.x30 {
	left : 150.470466px;
}
.y73 {
	bottom : 54.979593px;
}
.wa {
	width : 683.868976px;
}
.h26 {
	height : 1312.758359px;
}

As you can see, the page is composed of one large image and hyperlinks superposed to this image and positioned with <div> elements.

When I put text instead of <div> element in the <a> element, the hyperlinks are visible in my Kindle Fire HD as well as in the Kindle Previewer.

What have I done wrong ? Can Kindles display hyperlinks when superposed on images ?

(sorry for the grammar, english isn't my first language

)

Hitch · 11-05-2016, 02:37 AM

Quote:

Originally Posted by RevonJulie

Hello all !

(I'm new to the community so please excuse me in advance if I'm not posting in the right forum

)

I need some help with the hyperlinks in my mobi/kf8 files generated via kindlegen from an ePub.

Here is the context :
I've got a PDF file that I converted into a HTML document using pdf2htmlEX. I've converted this HTML document into a fixed layout ePub 3 and now I would like to convert this ePub into mobi/kf8 ebooks. To do so I used the kindlegen app which usually works pretty well (at least for reflowable eBooks), the result is excellent except for the hyperlinks that don't work both in kindle previewer and in my Kindle Fire HD.

First, I thought kindlegen didn't handle properly the conversion and removed all the hyperlinks, but after unpacking the mobi package I remarked that the hyperlinks have been correctly created.

My HTML file is structured like this :

<SNIP code>

As you can see, the page is composed of one large image and hyperlinks superposed to this image and positioned with <div> elements.

When I put text instead of <div> element in the <a> element, the hyperlinks are visible in my Kindle Fire HD as well as in the Kindle Previewer.

What have I done wrong ? Can Kindles display hyperlinks when superposed on images ?

(sorry for the grammar, english isn't my first language

)

Well, you have a couple of issues.

You can build a FXL mobi, by using an ePUB and running it through Kindlegen--but, that will NOT work when you try to upload it to the KDP.
The MOBI FXL format is proprietary, and requires the coding to be exactly what they've specified. That's your first issue.
And, no, you cannot put a link in an image, period. Depending upon what TYPE of FXL book you've created (Kids', Comics, Textbook), the page may/may not be able to be zoomed.
If it CAN be zoomed--well, you see the obvious issue. How can the device interpret the difference between a tap to enlarge/zoom, and a tap for a link?
If you created a Comic or Kids' book, the answer is quite flatly NO, you cannot have links on top of a page that's being rendered as an image.

So, sorry to be the bearer of bad tidings. I didn't take a lot of time to glance at your code, but off the cuff, that doesn't look like MOBI fixed-layout coding. Anyone else see if it was?

(I swear, I'm going to write an article about this. I keep running into people--it's particularly common in INDD circles--who output an ePUB3 "fixed layout" ePUB, feed it to Kindlegen, and think it's going to work. It's frustrating to see it, over and over and over. I wish Amazon would put big black print on their PG, with something like "do it our way, or kiss off!" It would save people an awful lot of time and aggravation. )

Hitch

RevonJulie · 11-07-2016, 03:05 AM

Thanks for the answer !

I produce tons of FXL MOBI looking like this one and they're always accepted by amazon, but I'm a bit worried right now after what you explained that it won't work in the future !

At least now I know that what I was trying to do can't work at all. Do you have any good documentation to recommend for me to understand my errors ? I'm not sure where to start, I've browsed the forums but to be honest I'm not sure to know what to begin with.

Thanks a lot for your reply !!

Hitch · 11-07-2016, 05:12 PM

Quote:

Originally Posted by RevonJulie

Thanks for the answer !

I produce tons of FXL MOBI looking like this one and they're always accepted by amazon, but I'm a bit worried right now after what you explained that it won't work in the future !

At least now I know that what I was trying to do can't work at all. Do you have any good documentation to recommend for me to understand my errors ? I'm not sure where to start, I've browsed the forums but to be honest I'm not sure to know what to begin with.

Thanks a lot for your reply !!

Well, if they're working, then perhaps you'd be better off not messing with it. However, Amazon's FXL is indeed proprietary. You can see the coding in the Publisher's Guidelines. Not the shortened version--the full. I also think, IIRC, that they still have sample books up, that you can rip apart, to take a look at how they're coded.

The last set of PG had this bit:

Quote:

To demonstrate best practices in creating fixed-layout books, Amazon provides a children’s book example at www.amazon.com/kindleformat (under the KindleGen Examples heading). This example is a demonstration of how to create content to take advantage of fixed-layout with Region Magnification. It is not intended to be an HTML tutorial.

That should get you started, I'd think. They also list the required fu in the Section 10 in the PG, with some code, too. (n.b.: if you've been uploaded ePUB3 content, created via KG, that could be throwing the intake for a loop.) I assume that you buy/download the books afterwards, right? They're working? You have a separate HTML file for each page?

Start with the publisher's guidelines, the full set, and then download their sample books. But as I said, if your stuff is working...shrug.

Hitch

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fixed Layout for Kindle Not Working	miz sue	Kindle Formats	4	03-11-2016 09:52 AM
Advantages of fixed layout Epub3/KF8 vs. PDF?	SBT	Workshop	8	06-19-2015 07:10 PM
Placing hyperlinks in a Kindle fixed layout template	holdit	Kindle Formats	4	12-01-2013 02:46 PM
Fixed layout EPUB not working smoothly	sonnydalheim	Apple Devices	2	10-11-2013 04:23 AM
Opening Fixed Layout KF8 on Kindle 1,2. What happens?	FunkeXMix	Kindle Formats	6	12-13-2012 06:20 AM

11-07-2016, 03:05 AM	#3
RevonJulie On vähäkin tyhjää parempi Posts: 5 Karma: 10 Join Date: Nov 2016 Device: iPad 2, iPad 3, Kindle Fire HD, Kobo Touch, Kobo Glo	Thanks for the answer ! I produce tons of FXL MOBI looking like this one and they're always accepted by amazon, but I'm a bit worried right now after what you explained that it won't work in the future ! At least now I know that what I was trying to do can't work at all. Do you have any good documentation to recommend for me to understand my errors ? I'm not sure where to start, I've browsed the forums but to be honest I'm not sure to know what to begin with. Thanks a lot for your reply !!

Advert