About the height of text, what's wrong with it?

Explorer ,
Mar 01, 2019 Mar 01, 2019

Copy link to clipboard

Copied

I wrote something and found the height of text is strange.

As you can see on the images:

1.png

2.png

The height calculation is very different from web browser, it has a certain amount of error.

Why became this & how can I fix it ?

I used a plugin "text toolbox" but doesn't help.

Views

11.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Mar 03, 2019 Mar 03, 2019
While CSS line-height allows for many types of values (pixels, percent, unitless, etc.) the line-height that XD uses is pixels. On the web text sits vertically aligned within the allotted line-height (so space is above and below the text). In this case the 14px type sits within 21px of line-height, but XD is not giving a box height that matches what one would expect via CSS.

Likes

Translate

Translate
Adobe Community Professional ,
Mar 02, 2019 Mar 02, 2019

Copy link to clipboard

Copied

Maybe XD is measuring the visible size, not the allotted space?

XD is not a web browser, so I'm not surprised that things like this are slightly different. It would be nice if they could match exactly, but that is easier said than done.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 03, 2019 Mar 03, 2019

Copy link to clipboard

Copied

The above values refer to box height, the bottom to line spacing. As I can see in CSS and in the panel line-height='21" That must be correct..

%A line height in percent of the current font size

CSS line-height property

All other refer to program language

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 03, 2019 Mar 03, 2019

Copy link to clipboard

Copied

While CSS line-height allows for many types of values (pixels, percent, unitless, etc.) the line-height that XD uses is pixels. On the web text sits vertically aligned within the allotted line-height (so space is above and below the text). In this case the 14px type sits within 21px of line-height, but XD is not giving a box height that matches what one would expect via CSS.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 04, 2019 Mar 04, 2019

Copy link to clipboard

Copied

Thx for reply, so what can I do for this question? you know it's 5px deviation, if everything has deviation maybe 1px or 10px, finally,the end product that developer coded will far from design on XD.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 04, 2019 Mar 04, 2019

Copy link to clipboard

Copied

You code the text size and line-height. As a coder I would never have even looked at the height in XD because I don't code it that way. Coders need to be able to look at designs and match them. It's not just copying and pasting numbers, so this should not be a major problem.


— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 08, 2019 Apr 08, 2019

Copy link to clipboard

Copied

Very disappointing considering Xd was built from the ground up—in this age of the web.

Figma gets it exactly correct.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 11, 2020 Feb 11, 2020

Copy link to clipboard

Copied

Yeah true, but there are cases where you have to measure to text lines gap with line height, how do we solve that, and the end UI Visual will be different.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 10, 2020 Mar 10, 2020

Copy link to clipboard

Copied

I'm very disappointed to @Dan_Rodney's answer. This is exactly old school Adobe answer. As a coder if you would never have even looked at the heights, please start looking at it asap. These numbers are very important and height of the components are connected with the line-height most of the time. Every pixels in the design must be calculated. This is a MAJOR problem for Adobe XD. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 11, 2020 Mar 11, 2020

Copy link to clipboard

Copied

You don't design by pixels anymore.

Apart from that: unless someone in this forum is marked as "STAFF", they are not staff.

 

If you want to make a feature request: https://adobexd.uservoice.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 06, 2020 Jun 06, 2020

Copy link to clipboard

Copied

I'm a designer.  If the box height is different between XD and CSS, how do I indicate to the developer the amount of vertical space that should be between boxes?? Sketch and Figma both give you the true CSS box height When using their text boxes, so it's easy to indicate with those programs. Please help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 24, 2020 Oct 24, 2020

Copy link to clipboard

Copied

LATEST

I absolutely agree. XD is amazing and all but this is a major bug... Please fix it : /

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines