lineSpacing not updating

Adobe XD UXP Plugin API
1

Hi guys,

i have two examples of line-height that doesn’t get the correct value. in both it seems like the lineSpacing is 0, although it really isn’t (i am using layers for developers to check the lineSpacing property)

attached the xd files.example 1example 2

2 Likes
2

I inspected the “lineSpacing” property values in your two documents, and I also see them as zero. I do not think that should be the case. I logged a bug with our team. Thanks!

2 Likes
3

I am experiencing the same issue with lineSpacing

1 Like
4

I discussed this with the developer, and the response was this was the expected behavior and is documented here:

The special value 0 causes XD to use the default line spacing defined by the font given the current font size & style.

So basically values seen in the XD GUI for shapes are often a calculation based on the shape’s context. For text the context is to calculate line spacing based on the font size. However values reported by the plugin APIs tend to be “raw” values that are placed on nodes. So if I change the font size of some text, the line spacing reported in the GUI will also update relatively, but the “lineSpacing” reported by the plugin API will continue to be zero. And if I explicitly set the Line Spacing in the GUI to a new value, that same value will be reported by the plugin API because it overrides the default value. I hope that explains things.

1 Like
5

Hi,

thanks for the explanation however i still don’t understand something.

in the line height bug #1 example the font size is 27 and the line spacing is 40. how am i suppose to understand that the line spacing is 40? where do i get the current font settings?

i understand lineSpacing 0 is a special case, but how am i supposed to treat it? if it is possible to talk with the developer it could be helpful.

Adi from Anima

1 Like
6

The lineSpacing property is always going to be zero unless it has been explicitly set to a non-default value. Unfortunately the plugin APIs do not provide a direct way of getting the value that the GUI shows. However it is possible to query the bounds of a text node to get its height, which corresponds to its line spacing. For example for a single line of text the localBounds might look like {"x":0,"y":0,"width":108,"height":27}. And for two lines of text the bounds would be {"x":0,"y":0,"width":108,"height":54}, so divide the height by 2.

1 Like
7

Hi David thanks for the quick answer.

I attached an example of text box with layers for developers to see what info we can get from the textbox.
can you explain to me how am i supposed to know what is the lineSpacing in this example?

as you can see they used “fixed size” it seems to be 5 lines of text. how am i supposed to get the number of lines of a text from the api by the way?

the localBounds.height is 218

and the lineSpacing is 36.

image
image2523×1198 164 KB

1 Like
8

Unfortunately the APIs in the area are limited, so I do not think there is a way to get the number of lines of wrapped text.

1 Like
9

so if i understand correctly for every font-size there is a corresponding line-height. where can i find this mapping? and does it changes from one font to another? and can i count that if the lineSpacing is zero, i will take the default lineSpacing of that fontSize?

1 Like
10

The default line spacing is a property of the font. It varies for each font as a percentage of the font size, usually 110% - 160%. That mapping is not available in XD. Yes, if the plugin API reports that the lineSpacing is zero, then the font’s default line spacing is being used.

1 Like
11

thanks David, we have to find a solution for this.

is there a way you can add to the api also the defaultLineHeight?

maybe the lineSpacing could be updated on a specific event?

from all our discussion, i don’t see a current way to count the lineSpacing of text that has 0.

1 Like
12

I wish I could be more helpful here. I have forwarded this discussion to our product management.

1 Like
13

While this is far (far!) from an ideal solution, I could imagine that it’s possible to “manually determine” the actual line-height within a plugin by experimenting with temporary content within the text area.

Within my Lorem Ipsum plugin, I fill text areas with the exact amount of text fitting the text area using textNode.clippedByArea and performing a binary search for the exact “minimum” height that doesn’t clip the text. Even closer, from when we didn’t have auto-height text areas, I also trimmed the text area to a size that exactly fits its content (cf. source code at lorem-ipsum-plugin/trim-height.js at a2b17b1e72c77815c9101673daf0dd86ec69b676 · pklaschka/lorem-ipsum-plugin · GitHub).

I would imagine that this could be expanded to a function that extracts the actual line-height by doing something like this:

  1. Fill the text area with a single character (“H”)
  2. Determine, using the method mentioned above, the height this one line takes. We’ll call this height the oneLineHeight
  3. Fill the text area with more chars (“H”) until textNode.clippedByArea === true
  4. Determine, using the method mentioned above, the height of these two lines. We’ll call this height the twoLinesHeight
  5. I’m not entirely sure how XD calculates the text area “filling” and “clipping”, but I could imagine that twoLinesHeight - oneLineHeight or something close to that matches the line-height of the text

Again: This is far from the ideal solution, but maybe it’ll still help (until we get a better API for it :wink:).

Best,
Pablo

PS: Please note that, depending on how XD calculates margins, line heights, clipping etc., for the first line, it could also be possible to just use step 1 of the algorithm and check the height of the text area. However, I could imagine that XD calculates things a little differently for single-line text (or at least I’m not sure that they don’t), which is why this solution is a little more complicated.

1 Like