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

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div id="links" class="page">
            <ul>
                <li>
                    <a href="http://www.cnn.com">External: cnn.com</a>
                </li>
                <li>
                    <a href="http://www.spiegel.de">External: spiegel.de</a>
                </li>
                <li>
                    <a href="#chapter1">Internal: chapter 1</a>
                </li>
                <li>
                    <a href="#chapter2">Internal: chapter 2</a>
                </li>
            </ul>
        </div>

        <div class="page">
            <h1 id="chapter1">Chapter 1</h1>
                <!--lorem-->
                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
                cubilia Curae; Morbi urna dui, fermentum quis, feugiat imperdiet, imperdiet id,
                sapien. Phasellus auctor nunc. Vivamus eget augue quis neque vestibulum
                placerat. Duis placerat. Maecenas accumsan rutrum lacus. Vestibulum lacinia
                semper nibh. Aenean diam odio, scelerisque at, ullamcorper nec, tincidunt
                dapibus, quam. Duis vel ante nec tortor porta mollis. Praesent orci. Cras
                dignissim vulputate metus.</p>

                <p>Phasellus eu quam. Quisque interdum cursus purus. In orci. Maecenas
                vehicula. Sed et mauris. Praesent feugiat viverra lacus. Suspendisse pulvinar
                lacus ut nunc. Quisque nisi. Suspendisse id risus nec nisi ultrices ornare.
                Donec eget tellus. Nullam.</p>
                <!--/lorem-->
        </div>

        <div class="page">
            <h1 id="chapter2">Chapter 2</h1>
                <!--lorem-->
                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
                cubilia Curae; Morbi urna dui, fermentum quis, feugiat imperdiet, imperdiet id,
                sapien. Phasellus auctor nunc. Vivamus eget augue quis neque vestibulum
                placerat. Duis placerat. Maecenas accumsan rutrum lacus. Vestibulum lacinia
                semper nibh. Aenean diam odio, scelerisque at, ullamcorper nec, tincidunt
                dapibus, quam. Duis vel ante nec tortor porta mollis. Praesent orci. Cras
                dignissim vulputate metus.</p>

                <p>Phasellus eu quam. Quisque interdum cursus purus. In orci. Maecenas
                vehicula. Sed et mauris. Praesent feugiat viverra lacus. Suspendisse pulvinar
                lacus ut nunc. Quisque nisi. Suspendisse id risus nec nisi ultrices ornare.
                Donec eget tellus. Nullam.</p>
                <!--/lorem-->
        </div>
        
    </body>
</html>

Stylesheet

@import url("../styles/a5.css");

.page {
    break-after: page;
}