Calculate line-height of an HTML element (IE6 compatible)
line-height is available via the following:
npm install line-height
bower install line-height
component install line-height
- Download via HTTP
component, you can load it in as follows:
var lineHeight = ;
http, you can use vanilla JS
window.lineHeight; // `line-height` is defined on `window` in camelCase
or you can use AMD
or CommonJS syntax (see
Once you have the module loaded, you can get the
line-height of any node in the DOM.
// Calculate the `line-height` of the body; // 19// Calculate the `line-height` of an h2var h2 = document;documentbody;; // 29// Calculate how many lines tall an element isvar div = document;divinnerHTML = '<p>1</p><p>2</p>';/ divoffsetHeight; // 2, how trunkata performs its calculations
line-height provides a single function.
;/*** Calculate the `line-height` of a given node* @param* @returns*/
In a large amount of browsers, the computed style for an element's
normal by default.
If it is specified by any other means (e.g. ancestor has a
line-height or the element has a
line-height specified), it is either a CSS length.
To solve this problem, we create a vanilla element of the same
h2 if it is an
h2), apply the original element's
font-size, and return the element
offsetHeight. This is the
1 line of the element (i.e.
In most browsers, when the
line-height is specified in
computedStyle value is in the same unit.
To solve this problem, we use the standard ratios of conversion to pixels to make a conversion to pixels.
- 3pt to 4px
- 1pc to 16px
- 1in to 96px
- 2.54cm to 96px
- 25.4mm to 96px
numeric font-size in IE6
font-size: 2.3) are returned without a unit.
To solve this problem, we treat this number as an
em since it is relative as well. To do that, we set the element's style to
"numeric value" + "em", compute and save the
font-size, remove the temporary style. This conversion gives us the unit in
pt which we know how to deal with from before.
Tests can be run once via:
npm test# Or with Karma directly via# npm run test-karma-single
Tests can also be run continuously via:
npm run test-karma-single
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via
npm run lint and test via
Copyright (c) 2013 Todd Wolfson
Licensed under the MIT license.