improved-print
v2.0.0
Published
Turn mid-content hyperlinks into a listed footnote!
Downloads
3
Readme
Improved Print
is a 'leaf' custom-element. It's sole purpose is to encapsulate HTML, strip out the links within the content, and make a nice list of footnotes when attempting to print.
This web component is based on an A List Apart article from 2005(!), written by @AaronGustafson.
Visit the original article: https://alistapart.com/article/improvingprint
Installation
npm:
npm install improved-print
Usage
- Import the component by adding the following line to the end of your
<body>
tag.
<script src="improved-print.js"></script>
- Create the improved-print tag somewhere in the body.
<improved-print></improved-print>
- Insert some HTML with links you want to print.
<improved-print>
<article>
<h1>Hello World!</h1>
<p>This is an <a href="https://www.google.com/">example link</a>. And <a href="https://pdw.io" data-no-improved-print>this</a> is a link that is ignored on print.</p>
<a href="https://www.wikipedia.com">Learn more!</a>
</article>
</improved-print>
- Once you hit print you should see the results directly!
Future plans / TODO
- Think of a better name(?)
- CSS variables for additional styling
Credits
- Original concept and research: Aaron Gustafson @aarongustafson
- *: Pim de Wit @pdw_io