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”:
To start using the library, install it to your project:
npm i svelte-action-balancerThen 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.
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.