PDF links

In this lesson we check how internal and external links are treated. Clicking on an external link should open the related URL in the pre-configured default browser. Clicking on an internal link should lead to the chapter 1 or 2 inside the PDF.

Two notes:

  • the anchor must contain some text and can not be empty elements (otherwise some converter may strip/ignore those anchors). In our lesson we place the anchors inside the <h1> elements of each chapter
  • use the id attribute for defining an anchor instead of the name attribute

Best practise:

<h1 id="my-anchor">some text</h1>

instead of:

<a name="my-anchor"></a>
<h1>some text</h1>

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" type="text/css" href="styles.css" />
  4.     </head>
  5.     <body>
  6.  
  7.         <div id="links" class="page">
  8.             <ul>
  9.                 <li>
  10.                     <a href="http://www.cnn.com">External: cnn.com</a>
  11.                 </li>
  12.                 <li>
  13.                     <a href="http://www.spiegel.de">External: spiegel.de</a>
  14.                 </li>
  15.                 <li>
  16.                     <a href="#chapter1">Internal: chapter 1</a>
  17.                 </li>
  18.                 <li>
  19.                     <a href="#chapter2">Internal: chapter 2</a>
  20.                 </li>
  21.             </ul>
  22.         </div>
  23.  
  24.         <div class="page">
  25.             <h1 id="chapter1">Chapter 1</h1>
  26.                 <!--lorem-->
  27.                 <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
  28.                 cubilia Curae; Morbi urna dui, fermentum quis, feugiat imperdiet, imperdiet id,
  29.                 sapien. Phasellus auctor nunc. Vivamus eget augue quis neque vestibulum
  30.                 placerat. Duis placerat. Maecenas accumsan rutrum lacus. Vestibulum lacinia
  31.                 semper nibh. Aenean diam odio, scelerisque at, ullamcorper nec, tincidunt
  32.                 dapibus, quam. Duis vel ante nec tortor porta mollis. Praesent orci. Cras
  33.                 dignissim vulputate metus.</p>
  34.  
  35.                 <p>Phasellus eu quam. Quisque interdum cursus purus. In orci. Maecenas
  36.                 vehicula. Sed et mauris. Praesent feugiat viverra lacus. Suspendisse pulvinar
  37.                 lacus ut nunc. Quisque nisi. Suspendisse id risus nec nisi ultrices ornare.
  38.                 Donec eget tellus. Nullam.</p>
  39.                 <!--/lorem-->
  40.         </div>
  41.  
  42.         <div class="page">
  43.             <h1 id="chapter2">Chapter 2</h1>
  44.                 <!--lorem-->
  45.                 <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
  46.                 cubilia Curae; Morbi urna dui, fermentum quis, feugiat imperdiet, imperdiet id,
  47.                 sapien. Phasellus auctor nunc. Vivamus eget augue quis neque vestibulum
  48.                 placerat. Duis placerat. Maecenas accumsan rutrum lacus. Vestibulum lacinia
  49.                 semper nibh. Aenean diam odio, scelerisque at, ullamcorper nec, tincidunt
  50.                 dapibus, quam. Duis vel ante nec tortor porta mollis. Praesent orci. Cras
  51.                 dignissim vulputate metus.</p>
  52.  
  53.                 <p>Phasellus eu quam. Quisque interdum cursus purus. In orci. Maecenas
  54.                 vehicula. Sed et mauris. Praesent feugiat viverra lacus. Suspendisse pulvinar
  55.                 lacus ut nunc. Quisque nisi. Suspendisse id risus nec nisi ultrices ornare.
  56.                 Donec eget tellus. Nullam.</p>
  57.                 <!--/lorem-->
  58.         </div>
  59.         
  60.     </body>
  61. </html>

Stylesheet

  1. @import url("../styles/a5.css");
  2.  
  3. .page {
  4.     break-after: page;
  5. }
  6.