{ "blyg": "0.4", "id": "4y4agk5afryzjsq1xwnh2nrzem", "kind": "thread", "origin": "https://notionparallax.co.uk/", "page": "https://notionparallax.co.uk/2020/footnotes-for-print", "author": { "name": "Ben Doherty", "url": "https://notionparallax.co.uk/" }, "created": "2020-06-13T15:45:00Z", "updated": "2020-06-13T15:45:00Z", "version": 1, "content_md": "# Printing hyperlinks nicely as footnotes\n\n\n[Walden Pond](https://waldenpond.press/) is full of content that was intended to go on the web. So there's all sorts of problems with how to make it usable in print. One of the most obvious is [hyperlinks](rickroll).\n\nThere are some really nice tricks that make what the link links to visible in print.\n\n
\n```css\na:after {\n content: \" [\" attr(href) \"] \";\n}\n```\n
\nFrom [CSS tricks](https://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/#4-display-the-urls-in-the-body-content)\n
\n\n
\n\nWhich is cool if your links are nice looking, but sometimes the text has a tonne of links in it and you can end up with more link than content.\n\nIn Walden Pond I've put the links in as footnotes. So a superscript number in the text, and a numbered list of links at the end of the article. I'm using a slightly edited version of [Aaron Gustafson's](http://www.easy-designs.net/) [footnote code](https://gist.github.com/Sinetheta/6612205) (from 2005!).\n\nThis is great, but sometimes you'll get an article that uses a lot of long links. A prime offender is when the article recommends a lot of things with amazon referrer links, but it could be almost anything. For example, in the Wait But Why post [From Muhammad to ISIS: Iraq’s Full Story](https://waitbutwhy.com/2014/09/muhammad-isis-iraqs-full-story.html) there are 54 links, and a lot of them look like this:\n\n> https://www.ft.com/content/69e70954-f639-11e3-a038-00144feabdc0?%E2%80%94ftcamp=crm/email/2014617/nbe/AsiaMorningHeadlines/product#axzz3A20GKJTZ\n\nIn this case, the bit after the `?` is just tracking (_?%E2%80%94ftcamp=crm/email/2014617/nbe/AsiaMorningHeadlines/product#axzz3A20GKJTZ_) to tell the FT where the reader found the link. But in some cases, the URL params actually have useful information in them, so I can't just cut them off.\n\nWhat I've ended up doing is using [Firebase Dynamic links](https://firebase.google.com/docs/reference/dynamic-links/link-shortener) to shorten these links, so the FT link above becomes: `Hi1e`\n\nThat's sort of cheating because it's actually `https://pond.page.link/Hi1e` but the first part is the same for all the shortened links.\n\nThis means that people can either remember the `https://pond.page.link/` part and build their own links, or they can go to the [Walden Pond website](https://waldenpond.press/) and type it into the link-expander.\n\n
\n![](https://notionparallax.co.uk/assets/20/Link-expander-in.png)![](https://notionparallax.co.uk/assets/20/Link-expander-out.png)\n\n
\n\n
\n![some links in a list, some shortened, some not](https://notionparallax.co.uk/assets/20/shortened-links.png)\n\n
\nThis figure is half-width and floated right\n\n
\n\n
\n\nOne problem with shortened links is that they're an extra layer of abstraction away. So you have no idea if `Hi1e` is taking you to the FT or to PornHub, or to _Best Number One Phishing Bank_. I've tried to get around that by only shortening links over 90 chars long, and then for the links I do shorten leaving the first part of the domain intact. Giving: `ft.com | Hi1e`.\n\nSometimes the link has an ID attached to it, so I've added that in too. Hopefully it's not too confusing, because without it, you can't see what the link points to because Firebase seems to strip off the #part of the url.\n", "content_html": "

Printing hyperlinks nicely as footnotes

\n

Walden Pond is full of content that was intended to go on the web. So there’s all sorts of problems with how to make it usable in print. One of the most obvious is hyperlinks.

\n\n

There are some really nice tricks that make what the link links to visible in print.

\n\n
\n 
a:after {\n    content: \" [\" attr(href) \"] \";\n}\n
\n
\n

From CSS tricks

\n
\n\n
\n\n

Which is cool if your links are nice looking, but sometimes the text has a tonne of links in it and you can end up with more link than content.

\n\n

In Walden Pond I’ve put the links in as footnotes. So a superscript number in the text, and a numbered list of links at the end of the article. I’m using a slightly edited version of Aaron Gustafson’s footnote code (from 2005!).

\n\n

This is great, but sometimes you’ll get an article that uses a lot of long links. A prime offender is when the article recommends a lot of things with amazon referrer links, but it could be almost anything. For example, in the Wait But Why post From Muhammad to ISIS: Iraq’s Full Story there are 54 links, and a lot of them look like this:

\n\n
\n

https://www.ft.com/content/69e70954-f639-11e3-a038-00144feabdc0?%E2%80%94ftcamp=crm/email/2014617/nbe/AsiaMorningHeadlines/product#axzz3A20GKJTZ

\n
\n\n

In this case, the bit after the ? is just tracking (?%E2%80%94ftcamp=crm/email/2014617/nbe/AsiaMorningHeadlines/product#axzz3A20GKJTZ) to tell the FT where the reader found the link. But in some cases, the URL params actually have useful information in them, so I can’t just cut them off.

\n\n

What I’ve ended up doing is using Firebase Dynamic links to shorten these links, so the FT link above becomes: Hi1e

\n\n

That’s sort of cheating because it’s actually https://pond.page.link/Hi1e but the first part is the same for all the shortened links.

\n\n

This means that people can either remember the https://pond.page.link/ part and build their own links, or they can go to the Walden Pond website and type it into the link-expander.

\n\n
\n

\"\"\"\"

\n\n
\n\n
\n

\"some

\n\n
\n

This figure is half-width and floated right

\n\n
\n\n
\n\n

One problem with shortened links is that they’re an extra layer of abstraction away. So you have no idea if Hi1e is taking you to the FT or to PornHub, or to Best Number One Phishing Bank. I’ve tried to get around that by only shortening links over 90 chars long, and then for the links I do shorten leaving the first part of the domain intact. Giving: ft.com | Hi1e.

\n\n

Sometimes the link has an ID attached to it, so I’ve added that in too. Hopefully it’s not too confusing, because without it, you can’t see what the link points to because Firebase seems to strip off the #part of the url.

\n", "content_hash": "sha256:a569c7ccc6c357587dfc47b8f7fb12d8fc4e9cf6639b69697e8c62ea8bd3aa00", "media": [], "changelog": [ { "version": 1, "at": "2020-06-13T15:45:00Z", "note": null } ], "transclusions": [] }