Printing URLs to PDF

This site is hosted on Firebase hosting and is available by this URL:

https://leechy-dev.firebaseapp.com/

If you print this post as a PDF and open it with any pdf-viewer, you'll notice that you can point to the address above and you'll get a hand mouse cursor with the ability to click and open the link to the browser. But there are actually two links: https://leechy-dev and http://rebaseapp.com/. Hover the link to see the tooltips.

Ligatures

The problem here is in the ligatures. During the printing, the document is updated, and the two letters fi are transformed into one symbol fi. This happens with other ligatures as well if they are available in the font you are using.

On the next step, when the updated for the printing document is sent to the PDF-writer, some not-so-smart algorithm is trying to find URLs in the text and mark them as actual links. But the author of this, unfortunately, forgot to expand ligatures to their initial state. And since the ligature is not allowed in the hostname, the matching algorithm stops at it and continues to look for links in the rest of the text, creating not one but two links.

How to fix this

After spending some time, trying to find some font without ligatures at all, I realized that the page address at the bottom of the page (in Chrome, other browsers can display it on the top) is working properly as a link. Despite the ligature in it (you can select the text symbol by symbol to see it). So there is a solution without font changes.

And the solution was on the surface — all of the links in the HTML worked properly. And all you have to do is to make a link from the URL using <a>-tag. And then you can style it as usual text: inherit the color and without the underline, if you want.

<style scoped> 
@media print { 
  a { 
    color: inherit; 
    text-decoration: none; 
  } 
} 
</style> 
 
<a href="https://leechy-dev.firebaseapp.com/">https://leechy-dev.firebaseapp.com/</a>

Here it is, print it as a PDF and look at this one:

https://leechy-dev.firebaseapp.com/