Improving Readability with MatchHeight.js
MatchHeight.js is a neat jQuery plugin that can be used to fix the height of elements on a page.
In this tutorial I will use the plugin to ensure all of titles on the page maintain an equal height, providing consistent spacing and improving readability.
So, what’s the problem?
Let’s say we have a list of movie titles, descriptions and dates shown in a row of columns on a page. Typically, stacking each of these elements would result in the content appearing directly underneath each other, like the image below:
However, that can cause usability issues for the reader.
Sure, reading vertically through each title, description and date is not an issue, but, the reality is that most people will not read the content throughly, they in fact first read horizontally - scanning quickly from left to right, looking for sub headings and critical information following an F-Shaped Pattern, only after finding something of interest do they read vertically.
By simply equalling the height of the titles, and the descriptions we are able to align each of the elements onto a horizontal grid - this additional whitespace improves consistency and now our audience can easily scan through the content.
Building the solution with MatchHeight.js
- Build your page layout, in our case we will use three columns, in a row. Each column contains a
.labelelement. We will use flexbox and
calcto create the column layout and make it responsive.
- Add some element styling:
- Trigger the MatchHeight.js plugin with a script that runs on page load:
How does it work?
This script will look for the all elements with the
.match class, find the tallest, and resize all others to equal it. You will see that I added this to class to our
Now that the MatchHeight plugin has been triggered on the page we can make it resize our
.description elements also - we do this using the
data-mh="group-name" attribute. This attribute will group all elements with the same ‘group-name’, check for the tallest, and resize the rest to match.
Note that there is no need to apply the
.match class on any other elements - just use the data attribute, like I have done in this example:
Now we have a page with 3 columns, each with an equal-height title, and an equal-height description.
Check out the pen below for all the code.
Why Not Just Use CSS?
- Building a robust and responsive framework that equally sets the height for arbitrary content in pure CSS is difficult…
- It can be partialy done using flexbox, but only partialy.
- MatchHeight.js is a fast and browser compatible way to do it without hacks or trickery.