Tighten gap between bounding box and text (leading trim)
I would like to request that the text box be really tight against text/letters which would really help in calculating the amount of pixels between text instead of the text box. If you made this change it would really make mine and a lot of people's lives easier. Keep on rocking XD!!!
Jonathan Rich commented
Yes please - handoff to developers would be MUCH better if margins between text items were fit snug to the actual visual text, and not the oversized bounding box.
Andy Medley commented
The text should be flush against the text box so that when design files are exported for development, the developer can get accurate padding values.
This is really problematic and almost defeats the purpose of the dev link if the values aren't measured from the edge of the text.
some developers I work with refuse to accept XD as a serious solution and refuse to work with it for this reason.
[Deleted User] commented
Hello, there is a problem that bothers me for a long time. I want to reflect it.This question is about font height.In China, companies pay more attention to design specifications.Sketch did a better job.We prefer their company's font line height setting.I hope you can think about it.Thank you very much.😉
Due to the extra margins above and below the text, it is not possible to lay out according to the set line height.
I would like to improve the functionality in order to achieve the coding according to the design comp.
Shree B commented
Absolutely important and should get these basics right. Sketch already have it.
With the advent of Leading Trim (https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202) in CSS (though its specification is still in progress), it is going to be possible to align text and objects to the actual dimensions of characters.
Illustrator new has features that allow you to align and snap objects and text to various bounds of the text: glyphbound (top/bottom of bounding box), x-height, baseline. Mainly x-height and baseline snapping allows the designers to make designs with truly accurate spacing between elements.
I'm not sure how, but I would like to see a feature that shrinks the bounding box of texts to x-height/baseline, much like the upcoming leading-trim CSS property.
(and, if Adobe manages to give designers the tools to make more accurate designs with leading-trim, maybe this adds more weight/inspiration to the process of formulating/fine-tuning the CSS working group specification for this property ;-) )
Merging would be a good idea, thanks.
I have been just moving the bounding box and using guides, otherwise I'm forced to us the bounding-boxe's padding which I can't tell what it it is, since it's not related to the line-height, unless I'm missing something. This is really confusing.
Also, I can understand how the glyph size is the unique to the font, but the bounding box should match the glyph's edge-most pixel, aka the last pixel that has color, just like a basic image.
It would be great if the tool would snap for both the outside of the box as well as the actual font. This way you can align stuff with the actual font as well as the text-Box. Sounds like lots of dev work tbh
I'm just trying to left-align a font layer and a shape layer; I tried manually as well as the left-align control; both will not align properly, while regular shape layers align properly. What am I dong wrong???
Attached example text not aligning to grids or shape edges.
Per comments from other posts I have tried double clicking on the bottom resize control of the text, this does nothing. I'm Windows 10
The gap is more than the gap you will find on real HTML/CSS. Can it be the same?
Text with margins, can not be set to 0, which has a great impact on the display effect and cut development.
Matthias Kappeler commented
This is something Sketch also does wrong if you ask me. One of the very powerful aspects of using a tool like XD or Sketch is that you (supposedly) don't need to do measurements for every single screen anymore. The export for developers with color and font-size information is pretty decent. The spacing information nontheless is a real problem for me! The distance from a text box to the baseline of a text can get as big as 8px. I usually make measurements from the baselines. So if a spacing is supposed to be 50px - what do I do? Do I create an "untrue" visual (have the actuall gap be 58px) making the numbers that the developer will see correct or something in between? I'm pretty meticulous when it comes to correct spacing and this behavior makes measurements vague and that leads to a lot of problem and unnecessary work.
文字範圍 強烈 希望 靠齊 文字內容，因為網頁製作時無法正確測量真實的距離
This is especially important when the type size is large.
输入的字体自带高度 因为文字高度所以无法准确测算距离其他控件的距离 文字的外框 可不可以像ps一样默认无高度。
I would like to request that the text box be really tight against text/letters which would really help in calculating the amount of pixels between and element and text instead of doing it from the blue lines/bounds of the text box. If you made this change it would really make mine and a lot of people's lives easier. Keep on rocking XD!!!
Jesse Overlin commented
I second Gary's comment, I think this is what he's requesting.
Adobe team, please allow us to snap to line height or baseline somehow, rather than the seemingly arbitrary text box edges.
For instance, many design languages and best practices these days (Material Design being one) call for a 4 point baseline grid for consistent vertical rhythm, but if I turn on that grid in XD and try to snap to it, it's the box that snaps, not the line height or baseline, throwing the whole thing off the grid, requiring random nudging to get it to sit on the grid. If you're using 16px font size and 24px line height you should be able to always sit that right on a 4px baseline grid without having to nudge!
Measurements for fonts need to be taken from the font not the bounding box. designers measure from the font NOT the invisible bounding box.