vue-squish-fit-text

Introduction

A port of sc-fitted-text to a Vue 3 Component.

Motivation

Broadcast graphics often need to ensure that text will fit within a given space. There are existing libraries out there that can reduce the font size of an element to fit a given space, but this behavior isn't always what is wanted. Sometimes, the design calls for horizontally squishing (scaling) the text, rather than reducing the font size. This element enables that.

Installation

npm install vue-squish-fit-text

and then register it either globally:

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import VueSquishFitText from "vue-squish-fit-text";

createApp(App).component("vue-squish-fit-text", VueSquishFitText).mount("#app");

or locally:

<script setup lang="ts">
import VueSquishFitText from "vue-squish-fit-text";
</script>

<template>
   <vue-squish-fit-text text="This text will be fitted." :maxWidth="250" align="left" />
</template>

Properties

| Property name | Value type accepted | Default | | :-------------: | :------------------: | :------: | | text | string | None | | maxWidth | number | 0 | | align | left, center or right | left |