line-height
Calculate line-height of an HTML element (IE6 compatible)
This was created for provide a well-tested module for calculating line-height in pixels for trunkata, a line-based truncation library for HTML.
Getting Started
line-height
is available via the following:
- npm,
npm install line-height
- bower,
bower install line-height
- component,
component install line-height
- Download via HTTP
For npm
and component
, you can load it in as follows:
var lineHeight = ;
For bower
and 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 npm
/component
section).
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
Donations
Support this project and others by twolfson via donations
Documentation
line-height
provides a single function.
;/** * Calculate the `line-height` of a given node * @param * @returns */
Solved problems
line-height: normal
In a large amount of browsers, the computed style for an element's line-height
is 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 nodeName
(e.g. h2
if it is an h2
), apply the original element's font-size
, and return the element offsetHeight
. This is the height
of 1 line
of the element (i.e. line-height
).
pt
, pc
, in
, cm
, mm
to px
Converting In most browsers, when the line-height
is specified in pt
, pc
, in
, cm
or mm
, the 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
In IE6, numeric
font-size
s (e.g. 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.
Development
Testing
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
Contributing
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 npm test
.
License
Copyright (c) 2013 Todd Wolfson
Licensed under the MIT license.