Quantcast
Channel: MobileRead Forums - Kindle Formats
Viewing all articles
Browse latest Browse all 862

Hyperlinks in MOBI/KF8 fixed layout ebooks not working

$
0
0
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 :shy:)

Viewing all articles
Browse latest Browse all 862

Trending Articles