svelte-action-balancer

Introduction

svelte-action-balancer is a super-simple svelte action, heavily inspired by react-wrap-balancer that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like single word in the last line, makes the content more “balanced”:

Usage

To start using the library, install it to your project:

npm i svelte-action-balancer

Then you can simply use your action on the element

<script>
  import { balancer } from "svelte-action-balancer";
</script>

<h1 use:balancer={{ enabled: true, ratio: .5 }}>
    Svelte: A much cooler JavaScript library for building user interfaces
</h1>

<style>
  h1 {
    text-align: center;
    margin: auto;
  }
</style>

For full documentation and use cases, please visit svelte-action-balancer.netlify.app.

About

This project was inspired by react-wrap-balancer which was in turn inspired by Adobe’s balance-text project, NYT’s text-balancer project, and Daniel Aleksandersen’s Improving the New York Times’ line wrap balancer. If you want to learn more, you can also take a look at the text-wrap: balance proposal.