links broken

gmccullo · 02-14-2023, 04:04 PM

Help me understand what's going on with links not working. Here's a simple repro. An epub file with one page:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="generator" content="pandoc" />
    <title>ch001.xhtml</title>
    <link rel="stylesheet" type="text/css" href="../styles/stylesheet1.css" />
  </head>
  <body epub:type="bodymatter">
    <section id="the-footnote-test-book" class="level1 unnumbered">
      <h1 class="unnumbered">The Footnote Test Book</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<sup class="footnote"><a id="rn1" href="ch001.xhtml#n2" xmlns="">1</a>,<a id="rn3" href="ch001.xhtml#n4" xmlns="">2</a></sup></p>
      <div class="footnote-group">
        <div class="footnote" id="n2">
          <p>
            <sup class="footnote">
              <a href="ch001.xhtml#rn1">1</a>
            </sup> This is note #1.</p>
        </div>
        <div class="footnote" id="n4">
          <p>
            <sup class="footnote">
              <a href="ch001.xhtml#rn3">2</a>
            </sup> This is note #2.</p>
        </div>
      </div>
    </section>
  </body>
</html>

Which the viewer renders as:

Code:

<html xml:lang="en-US" class="is-calibre-viewer" style="overflow: hidden; --calibre-viewer-background-color:#ffffff; --calibre-viewer-foreground-color:#000000; color-scheme: light; color: rgb(0, 0, 0); background-color: transparent;"><head><base href="clbr://internal.sandbox/book/EPUB/text/ch001.xhtml"><title>ch001.xhtml</title>
    <link rel="stylesheet" type="text/css" href="../styles/stylesheet1.css">
  </head><body epub:type="bodymatter" class="calibre-viewer-paginated calibre-viewer-light-colors" style="color: rgb(0, 0, 0); background-color: transparent; column-gap: 10px; column-width: 509px; column-rule: 0px inset blue; min-width: 0px; max-width: none; min-height: 0px; max-height: 100vh; column-fill: auto; margin: 0px; border-width: 0px; padding: 0px; box-sizing: content-box; width: 509px; height: 686px; overflow-wrap: break-word;">
    <section id="the-footnote-test-book" class="level1 unnumbered" style="break-before: avoid;">
      <h1 class="unnumbered">The Footnote Test Book</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<sup class="footnote"><a id="rn1" href="ch001.xhtml#n2">1</a>,<a id="rn3" href="ch001.xhtml#n4">2</a></sup></p>
      <div class="footnote-group">
        <div class="footnote" id="n2">
          <p>
            <sup class="footnote">
              <a href="javascript:void(0)" data-m3nkpb7pw6cwr7qts4nacf="{&quot;name&quot;: &quot;EPUB/text/ch001.xhtml&quot;, &quot;frag&quot;: &quot;rn1&quot;}">1</a>
            </sup> This is note #1.</p>
        </div>
        <div class="footnote" id="n4">
          <p>
            <sup class="footnote">
              <a href="javascript:void(0)" data-m3nkpb7pw6cwr7qts4nacf="{&quot;name&quot;: &quot;EPUB/text/ch001.xhtml&quot;, &quot;frag&quot;: &quot;rn3&quot;}">2</a>
            </sup> This is note #2.</p>
        </div>
      </div>
    </section>
  </body>
<!-- style stuff... -->
</html>

The last 2 links work. The 1st links do not. You can see they are rendered differently.

Foozle · 02-14-2023, 07:36 PM

You don't have your links setup correctly. First, remove the xmlns tags in the links (xmlns="" – remove these). Second, you need to point the links to the correct items. rn1 and rn3 (instead of n2 and n4). Third, your footnotes need to have an anchor name instead of a link ref (a name="ch001.xhtml#rn1" and "...rn3").

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
rtf to Epub, endnote links broken	Poltem	Conversion	3	06-01-2021 10:01 PM
Audible Download Links Broken	CRussel	Audiobook Hardware & Software	10	10-10-2018 12:39 AM
Choff links broken	rhaven	Kindle Developer's Corner	1	11-02-2015 06:41 AM
Internal links in ePub-files broken?	Portnull	Calibre	2	08-17-2009 11:00 AM

02-14-2023, 07:36 PM	#2
Foozle Connoisseur Posts: 62 Karma: 221034 Join Date: May 2021 Device: None	You don't have your links setup correctly. First, remove the xmlns tags in the links (xmlns="" – remove these). Second, you need to point the links to the correct items. rn1 and rn3 (instead of n2 and n4). Third, your footnotes need to have an anchor name instead of a link ref (a name="ch001.xhtml#rn1" and "...rn3"). Last edited by Foozle; 02-14-2023 at 07:40 PM.

Advert