fit-text-webcomponent

1.1.0 • Public • Published

fit-text

A very basic and lightweight vanilla fit-text web component.

Adjusts the font-size to fit the parent container width.

Highlights

  • vanilla web component / custom element
  • less than 600 byte (minified + gzip)
  • no dependencies
  • no additional css / js required
  • supports custom fonts

The implementation relies on custom elements and shadow dom parts of the web component specs (check support). For using custom fonts, the browser must support the FontFaceSet API (onloadingdone event, check support)

Thus, not every major Browser is supported yet.

Demo

Demo on Codepen

Play with this demo on codepen.io.

Usage

<script src="https://unpkg.com/fit-text-webcomponent"></script>
 
<div style="width: 50vw;">
  <fix-text>This fits to 50vw</fit-text>
</div>

Also checkout the examples directory.

Dependents (0)

Package Sidebar

Install

npm i fit-text-webcomponent

Weekly Downloads

75

Version

1.1.0

License

MIT

Unpacked Size

907 kB

Total Files

13

Last publish

Collaborators

  • lipp