0

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>
Grzegorz Pietrzak
  • 55
  • 7
  • 2
    Since font sizes can vary. What you can do is create a canvas, draw the string. Calculate the absolute bounds by reading the pixels. Then get that int and apply it to the line-height as a px. – John Dec 02 '20 at 11:08
  • even if you find the correct line-height it's not enough because you cannot control from where you start the line-height calculation (you will for sure truncate the text). – Temani Afif Dec 02 '20 at 11:13
  • in case you goal is to center check this: https://stackoverflow.com/q/58924157/8620333 – Temani Afif Dec 02 '20 at 11:14
  • 1
    And an example of how someone approached the problem: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align There’s some excellent background on this in this Figma article as well: https://www.figma.com/blog/line-height-changes/ Unless you are working with many different fonts, the most practical option is often to make this a “magic number” (possibly at least through a CSS variable). Otherwise you need to calculate it based on the font metrics, ex. using OpenType.js like in the first link. – kennethormandy Dec 03 '20 at 01:45
  • kennethormandy, big thanks for resources. they're very helpful and valuable for me :) – Grzegorz Pietrzak Dec 04 '20 at 12:32

1 Answers1

0

'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>
Dharman
  • 21,838
  • 18
  • 57
  • 107
vedant12355
  • 27
  • 5