text alignment

[proper copper]

I have a very broad question regarding my lack of understanding of typography.

Given is the following simple text node (see image):

As we can see the text's bounding box which is the origin for the text alignment has an overhang on the top and bottom.

How is this bbox calculated, is this a standard box that will be reproducible in a different application or is this something application specific?

Goal: I need to exchange design data like font position and size between applications (Figma plugin and other) with absolute precision.
But I don't know if the bbox is a reliable metric.

[buoyant grotto]

In typography, the total vertical height of the element you have selected is the "Line-height" property in CSS, and can be adjusted in the property highlighted in this screenshot of the Right Sidebar of the Figma UI.

The overhang on top and bottom exists because characters are not all equal height. For example, in your screenshot, how the tail of the "p" descends below the baseline and how the superscript 2 rises higher than the other letters. The default line-height will vary according to font family, size, etc., and there are different guidelines for how much line-height there should be for different types of copy i.e. long chunks of body copy should have more line-height than UI elements that only exist on one like (like a button).

There is a setting in the Typography section you can select to cap the height to the baseline, but I would be cautious using this because the baseline height is usually not enough to fit all characters' full height.

This text is has a font-size of 16, but I set the vertical trim to cap at baseline, so the height of the bounding box is only 11, and you can see how the tittles above the "i" and the tail of the "j" fall outside the bounding box now.

[proper copper]

Thanks for this great answer. It helped me to understand the layout of character glyphs better.

So, you are basically saying that all these measurements are similar across platforms as they are based on the fonts metrics?

For example, when application A sets a lineHeight of 2 for the font "Robo" it will yield the exact same bounding box on application B (or any other application/platform) that uses the same font?
Because the way fonts are rendered is not application specific, right? The only difference could be that application A expects lineHeight to be of unit point whereas application B expects pixels.

And

In typography, the total vertical height of the element you have selected is the "Line-height"
means that the bounding box of a character is equal to the lineHeight property. Every application will interpret/calculate line height the same?

Is my understanding correct?

[buoyant grotto]

I think that's all correct, yes! As long as your applications are written in the same coding language. I'm not a developer, so maybe try testing to validate if you can but this is how I understand it to work.

[proper copper]

This has nothing to do with programming language. I just wasnt sure whether the character box is something e.g. Figma specific or if its application independent. So if this is based on font metrics it should be the same boxes in every application. So, text layout coordinates will be the same no matter the application that receives these coordinates.

[buoyant grotto]

By application, do you mean the design software your design is created in? Like, Figma vs Sketch?

[proper copper]

I have multiple applications. One is Figma. I'm developing a plugin for Figma. The goal is to import data like text from a different application to render it in Figma. Then the text alignment must be exactly the same. Once done, the plugin will then export the modified text back to the original application.

If both applications would use a different bounding box around the rendered characters then as a consequence the text would not be positioned the same. For example when centered in Figma it could be offset in the original application.

I don't know if that's actually the case. I just wanted to know if the bounding box that the text arrangement is based on is the same across application boundaries or if this is something that every application handles differently.

But if the box is based on pure font metrics then this box should be teh same everywhere.

[buoyant grotto]

I gotcha, good luck!