Improved-print NPM

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

or view the DEMO

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

Licence

MIT

a11y accessibility print javascript web-component custom-element vanilla js

@infinitebrahmanuniverse/nolb-imp @everything-registry/sub-chunk-1909

5 years ago

5 years ago

7 years ago

7 years ago