How to get the current upper and lower line boundaries of an inline element?

Question

For instance :

<div>
<span style="font-size: 20pt" id="BBB">Hello</span> 
<span style="font-size: 5pt; vertical-align: middle;" id="AAA">World</span> 
</div>

From the element BBB it's easy to get the line boundaries as BBB is the taller element of the line. Its offsetTop and offsetHeight properties are the line boundaries.

But how to get the line boundaries from the element AAA ?

Can I get that info directly, or do I have to loop through the elements of the line ?

What do you mean by *get the line boundaries*? Can you give an example of what result you expect, and what you tried to get it? — RaphaMex, Apr 11 '18 at 15:46
The top and bottom y values of the line. In my example that would be the top and bottom values of the first element as it is the bigger one. — Simon, Apr 11 '18 at 16:10
`Element.getBoundingClientRect()` is probably what you're looking for. — Alexey Lebedev, Apr 11 '18 at 16:18
Nope that gives the boundaries of the element, not of the line. — Simon, Apr 11 '18 at 16:18
I see what you mean. Maybe you could use Selection API to create a selection range for the line, and then use `Range.getBoundingClientRect()`. Might be easier to loop through the line though. — Alexey Lebedev, Apr 11 '18 at 16:22
Yes I think there is no magical function that will help here. — Simon, Apr 11 '18 at 16:34
So what about `Element.parentElement.getBoundingClientRect()`? — RaphaMex, Apr 11 '18 at 19:42

Taki · Answer 1 · 2018-04-11T15:54:49.393

use getComputedStyle to get all the computed css properties for the rendered element and pick what you want.

The Window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

i noticed that in the snippet there are not all the properties so check this Fiddle

const element = document.querySelector('#AAA');
const computed = window.getComputedStyle(element);

[...computed].forEach((e) => {
  console.log(e, ' : ', computed.getPropertyValue(e));
});

<div>
  <span style="font-size: 20pt">Hello </span>
  <span style="font-size: 5pt; display: middle;" id="AAA">World </span>
  <span style="font-size: 10pt">etc </span>
  <span style="font-size: 10pt">etc</span>
</div>

I don't find the info in there. – Simon Apr 11 '18 at 16:18 — Simon, Apr 11 '18 at 16:18

Simon · Accepted Answer · 2018-04-13T19:30:05.180

0

There is no API to handle line boxes.

There was that question related : How can I count text lines inside an DOM element? Can I?

And no miracle there.

edited Apr 13 '18 at 19:30

answered Apr 11 '18 at 16:32

Simon

2,067
2
17
30

How to get the current upper and lower line boundaries of an inline element?

2 Answers2