This content originally appeared on Viljami Salminen and was authored by Viljami Salminen
Manually adjusting line-height with media queries for optimum readability across vast number of screen sizes can be hard. What makes it even harder, is, that instead of the screen width, the line-height should be relative to its container’s width and its font settings in order to achieve proper readability and appropriate spacing.
Thanks to @Wilto, there has been a jQuery plugin called “Molten Leading” around for quite some time already which makes it possible to automate this process and define a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line-height to adjust through.
I wanted to use something similar in one of my latest projects, but I didn’t want to introduce new dependencies to external JavaScript libraries just because of this one feature. I also wanted something that would have a bit better performance, so I decided to write a custom version of Molten Leading without any library dependencies. All this is now available on GitHub too, so take a look and give it a spin.
Features #
- Automatically adjust line-height based on element width.
- Works in all browsers, including IE6 and up.
- Uses requestAnimationFrame for the best possible performance.
- Free to use in both commercial and non-commercial projects.
- Doesn’t require external JavaScript libraries.
- Supports
px,emandremCSS units. - Weighs only 1.17kb minified and Gzip’ed.
- Supports multiple instances.
Download #
This content originally appeared on Viljami Salminen and was authored by Viljami Salminen
Viljami Salminen | Sciencx (2014-06-27T00:00:00+00:00) Molten Leading. Retrieved from https://www.scien.cx/2014/06/27/molten-leading/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.