Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pimdewit/improved-print

Turn mid-content hyperlinks into a listed footnote!
https://github.com/pimdewit/improved-print

a11y academic accessibility custom-element custom-elements footnotes html inclusivity print webcomponent

Last synced: about 1 month ago
JSON representation

Turn mid-content hyperlinks into a listed footnote!

Awesome Lists containing this project

README

        


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](https://pimdewit.github.io/improved-print/index.html)

## Installation

npm:
```bash
npm install improved-print
```

## Usage

1. Import the component by adding the following line to the end of your `` tag.
```html

```

2. Create the improved-print tag somewhere in the body.
```html

```

3. Insert some HTML with links you want to print.
```html


Hello World!


This is an example link. And this is a link that is ignored on print.


Learn more!

```

4. 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](https://alistapart.com/article/improvingprint): Aaron Gustafson [@aarongustafson](https://twitter.com/AaronGustafson)
- *: Pim de Wit [@pdw_io](https://twitter.com/pdw_io)

## Licence

[MIT](https://github.com/PimdeWit/improved-print/blob/master/LICENSE)