Skip to content
Turn mid-content hyperlinks into a listed footnote!
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.git-header.svg
.gitignore
LICENSE
README.md
improved-print.js
improved-print.min.js
index.html
package-lock.json
package.json

README.md

Improved print

improved-print Published on webcomponents.org Total filesize is 971bytes

improved-print is a native custom-element. It's purpose is to strip out links within content, and make a nice list of footnotes when attempting to print.

or view the DEMO

Installation

npm:

npm install improved-print

Usage

  1. Import the component by adding the following line to the end of your <body> tag.
<script src="improved-print.js"></script>
  1. Create the improved-print tag somewhere in the body.
<improved-print></improved-print>
  1. 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>
  1. Once you hit print you should see the results directly!

Future plans / TODO

  • Think of a better name(?)
  • CSS variables for additional styling

Credits

Licence

MIT

You can’t perform that action at this time.