Sometimes we came up with a requirement where we have to scale up or down a text in a div or parent container. It is normally required when we are creating a responsive website. In this article, we will see how to create responsive text in a div using the fitty.js library.
Table of Contents
Introduction
In the ever-evolving landscape of web design, ensuring that your content is not only visually appealing but also responsive across various devices is crucial. One aspect that often demands attention is the legibility of text, especially when dealing with different screen sizes. Fitty.js, a lightweight JavaScript library used to create responsive text in a div. In this article, we’ll explore how to integrate Fitty.js to create a responsive text experience within a <div>.
How fitty.js help to create responsive text in a div
Fitty.js is a JavaScript-based library used to scale up or scale down text size so that it may fit perfectly into its parent container. It is an ideal way to resize text when we are building a responsive website design. In simple words, it is used to create responsive text in a div container.
In the following image, the container (dark blue bordered box) has a width of 500px while the actual font size is 32px.
After applying fitty.js, we get the following output:
This is an example with a fixed width. In case you have container width in percentage, the text will automatically get resized based on device type width.
How to use fitty.js
The fitty.js comes with an npm package as well as a CDN link.
NPM Package
Open the terminal and execute the following command:
npm install fitty --save
CDN Installation
The library is available as a CDN link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.2.6/fitty.min.js"></script>
Execute fitty.js like the following and pass an element selector.
<div class="container">
<div><h1 class="responsive-text">W3 Programmings</h1></div>
</div>
<!-- include jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
<!-- include fitty lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.2.6/fitty.min.js"></script>
<script>
fitty('.responsive-text');
</script>
It is recommended to include the script just before the closing of </body> element to get the best performance.
The padding issue
A 15px padding is applied to the container. Ideally, the library should handle it but it lacks the feature.
To fix that problem, we have to wrap the element in a parent div element.
Please see the following code example to get more clarity:
The full code
An example of full working code with the padding fix is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Respinsive text using fitty.js</title>
<!-- apply some basic stylings -->
<style type="text/css">
body {
font-family: arial;
background: #60c0f0;
}
.container {
width: 500px;
border: 5px solid #3633ce;
padding: 15px;
margin: 50px auto;
background: #fff;
border-radius: 15px;
}
h1 {
color: #d68a0f;
font-size: 32px;
}
</style>
</head>
<body>
<!-- wrapper -->
<div class="container">
<!-- element wrap inside a div to handle the padding issue -->
<div><h1 class="responsive-text">W3 Programmings</h1></div>
</div>
<!-- include jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
<!-- include fitty lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitty/2.2.6/fitty.min.js"></script>
<!-- call the fitty function -->
<script>
fitty('.responsive-text');
</script>
</body>
</html>
The above HTML example uses CDN links.
Properties
Following are the options available to configure the fitty method:
| Option | Default | Description |
|---|---|---|
| minSize | 16 | The minimum font size in pixels |
| maxSize | 512 | The maximum font size in pixels |
| multiLine | true | Wrap lines when using the minimum font size. |
| observeMutations | MutationObserverInit | Rescale when element contents are altered. Is set to false when MutationObserver is not supported. Pass a custom MutationObserverInit config to optimize monitoring based on your project. By default contains the MutationObserverInit configuration below or false based on browser support. |
An example of passing options to the fitty function is:
fitty('.responsive-text', {
minSize: 32,
maxSize: 45,
});
The fitty function returns single or multiple instances depending on how it is executed.
If you pass a query selector it will return an array of Fitty instances since the query selector targets all matched elements. If you pass a single element reference you’ll receive a single fitty instance.
Methods
The fitty also supports the following methods:
| Method | Description |
|---|---|
| fit() | Force a redraw of the current fitty element |
| freeze() | No longer update this fitty on changes |
| unfreeze() | Resume updates to this fitty |
| unsubscribe() | Remove the fitty element from the redraw loop and restore it to its original state |
Their usage is below:
var fitties = fitty('.responsive-text');
// get element reference of first fitty
var myFittyElement = fitties[0].element;
// force refit
fitties[0].fit();
// stop updating this fitty and restore to original state
fitties[0].unsubscribe();
Performance
For best performance, add a CSS selector to your stylesheet that sets the elements that will be resized to have white-space:nowrap and display:inline-block. If not, Fitty will detect this and will have to restyle the elements automatically, resulting in a slight performance penalty.
Suppose all elements that you apply fitty to are assigned the fit class name, add the following CSS selector to your stylesheet:
.fit {
display: inline-block;
white-space: nowrap;
}
This will apply the properties on all elements with the CSS class fit.
Limitations
- It will not work if the
fittyelement is not a part of the DOM. - If the parent element of
fittyelement has horizontal padding, the width calculation will become incorrect. You can fix this by wrapping thefittyelement in another parent element (already explained and covered in the code example previously).
Click here to learn more about the fitty.js library.
