CODEWITHSUNDEEP
javascripthtmlcsstextfonts
Grzegorz Pietrzak
Grzegorz Pietrzak

Reputation: 175

How to set line height depending on text size in javascript?

I've got not typical problem (javascript) I want to set line height of specific text in div container to exactly match text size including custom fonts. Right now, line height is set to 1, and here are the results with Arial font:

default

I want something like this:

enter image description here

It has to fit if the text would be: eeeM or/and eeeg etc.

I need this, because later when I trim it in imagick, the placement of text is not correct (it's placed directly into left top corner, in first image case eee will be placed on top and it will be different like in frontend. And when I don't trim it in imagick, container differs from how it's presented on div.

I already tried to calculate text height with canvas, calculate difference between max font size and text height, then this difference with percentage apply to lineHeight of div container, but it didn't worked well for different font sizes, different text content and different fonts..

Any ideas?

EDIT: My topic was closed, without any explanation. Let's take the code from one answer, that I should set line height to 1em (1). Please open dev tools on the both examples and hover it in dev tools to see container height.

<p>Example 1 - this is not what I want</p>
<h1 style="font-size:100px;line-height:1em; padding: 0; margin: 0;">eee</h1>


<p>Example 2 - this is what I want</p>
<h1 style="font-size:100px;line-height:0.3; padding: 0; margin: 0; height: 50px">eee</h1>

Upvotes: 1

Views: 2165

Answers (1)

vedant199991
vedant199991

Reputation: 45

'em' is a form of measurement in html that is depending on the font size. 1em = the font size. So, if you set the line-height to 1em and padding and margin to 0 you will have what you want. No js.

<h1 style="font-size:1em;line-height:1em;">eee</h1>

Upvotes: 0

Related Questions