https://github.com/lipp/fit-text

A fit text to width responsive web component
https://github.com/lipp/fit-text

Last synced: 9 months ago
JSON representation

A fit text to width responsive web component

• Host: GitHub
• URL: https://github.com/lipp/fit-text
• Owner: lipp
• License: mit
• Created: 2018-10-05T12:46:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-24T07:26:45.000Z (about 7 years ago)
• Last Synced: 2025-04-15T20:47:23.819Z (9 months ago)
• Language: JavaScript
• Homepage: https://fit-text.now.sh/examples/
• Size: 946 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# fit-text

A very basic and lightweight vanilla fit-text web component, which adjusts the font-size to fit the parent container width.

[![Demo](./demo.gif)](https://fit-text.now.sh/examples/tiles.html)

.

## 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components#Browser_support)).

For using custom fonts, the browser must support the `FontFaceSet` API (`onloadingdone` event,

[check support](https://developer.mozilla.org/kab/docs/Web/API/FontFaceSet#Browser_compatibility))

Thus, not every major Browser is supported yet.

# Demo

Play with this demo on [codepen.io](https://codepen.io/lipp/pen/YJGvEe?editors=1100#0).

# Usage

```html



  This fits to 50vw



```


Also checkout the [examples directory](./examples). They are deployed [here](https://fit-text.now.sh/examples/)