Nobel Prize Magnet

# npm

## line-height

0.3.1 • Public • Published

# 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:

For `npm` and `component`, you can load it in as follows:

For `bower` and `http`, you can use vanilla JS

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.

## Donations

Support this project and others by twolfson via donations

## Documentation

`line-height` provides a single function.

## 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`).

### Converting `pt`, `pc`, `in`, `cm`, `mm` to `px`

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:

Tests can also be run continuously via:

## 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`.

## Keywords

### Install

`npm i line-height`

### Repository

github.com/twolfson/line-height

### Homepage

github.com/twolfson/line-height

302,203

0.3.1