Is there any configuration that sets the line spacing to a textblock?
This is a playground that I have created as feature test:
https://www.babylonjs-playground.com/#XCPP9Y#3806
It works properly.
Also, I have implemented on my own environment, and it also works properly (picture below)
Now, I am migrating to a new frontend technology (ReactJS), and the same code base isn’t working properly (picture below). Thus, I cannot reproduce it in playground
Indeed, I can solve through this variable.
But what is weird is that I am getting different behaviors between CDN and NPM with the same sample?
I am using 4.2.0 on both.
I tried to downgrade from 4.1.0, but it still with a different behavior on React. Is there any other parameter that can affect TextBlock line spacing?
Because I am using extra lines to fix it:
textBlock.paddingTop = -100;
textBlock.lineSpacing = 65;You don’t need use padding -100 you need vertical align. TextBlock | Babylon.js Documentation i think by default text aligned by center. And react dont affect any variables. React its only shugar above JavaScript
Hello,
For the BJS part and your advancedTexture GUI issue, you can look at my version of your PG.
‘https://www.babylonjs-playground.com/#XCPP9Y#5435’
Note: You sure can pass your variables. I didn’t redo it all. This PG focuses on the way you enter values as a string. You need to use “” to state percentage or pixels (in full, “25px” or “100%”). Most parts of the text handling in the BJS GUI are like this. Your values for i.e textBlock.fontSize = 65; – or – textBlock.paddingLeft = 25; well, they won’t work. As for lineSpacing, it will also work if declared properly.
Hope this helps,
@kvasss I am pretty sure that I don’t need, and I know that React does not make any difference in this case. It’s more to identify the 2 environments.
What I am asking is: What else could make it has any different behaviour? I have the same sample on both.
@mawa I will try your tips. Though, here says that units are pixels as default, so, I don’t need to explicitly use as a string. Also, internally it adds the ‘px’ string.
Yes, I know, but below in the doc it also says: (quote)
All these properties can be defined using pixel or percentage as unit. To set value as pixel, use this construct: control.left = "50px" To set value as percentage, use this construct: control.left = "50%"
Here, you have to read this in full, believe me. Because if you ignore the string format, you will start getting odd behavior. I didn’t try from react, but I did from ‘external’. And the API says ‘string’. Without the quotes, the value you enter is good for BJS format (mostly with a range of 0 to 1, speaking of the BJS GUI and GUI controls for height or width).
The point here is I am not a true dev, but I have spent a lot of time exploring and working with the BJS GUI. I can say, I had both an enjoyable and cumbersome experience with it. Parts are stunningly easy and welcomed and other parts, well, let’s just say I wasn’t sure…I believe UI and perfect integration is really something hard to achieve…
@mawa do not worry, I am a dev for almost half of my life… and strange behaviour is that annoys me most. I am using your example and it works properly (as PG), but when I add difference font size (65px and add the line spacing to 0, it breaks again).
I am trying to isolate the issue from problem.
Are you looking for a result like this one?
‘https://www.babylonjs-playground.com/#XCPP9Y#5437’
This is exactly the part stated as ‘cumbersome’ in my previous post.
Nope, the result is exactly as my previous:
As I am debuging, it seems that the internal Control._fontOffset is not being updated while I create a larger number of Tiles. The first label that I create has font size of 20px. The second, has font size 65px/ That’s why the lines overlap each other, cause it internally calculates as 20px of lines.
I am not sure yet, but it seems the case.
Are you sure about the font size 20px. Looking at the screenshot, I have the feeling that even with a font size 20px the text would still overlap. It somehow seems constrained in a textblock that would be of a smaller height (than the rectangle).
Edit: I guess you are not interpreting line spacing for line height in your code? Though that could explain the output, couldn’t it? Sry, I have only a SS here.
I think I found the problem.
It comes from Control._GetFontOffset to calculate the font size to 2D GUI. Thoug, it adds a rectangle inside DOM, and the DOM has it own CSS that changes the result from this calculation.
If you wanna try, just run this code in your console:
const font = " 65px Arial";
var text = document.createElement("span");
text.innerHTML = "Hg";
text.style.font = font;
var block = document.createElement("div");
block.style.display = "inline-block";
block.style.width = "1px";
block.style.height = "0px";
block.style.verticalAlign = "bottom";
var div = document.createElement("div");
div.style.whiteSpace = "nowrap";
div.appendChild(text);
div.appendChild(block);
document.body.appendChild(div);
var fontAscent = 0;
var fontHeight = 0;
try {
fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
block.style.verticalAlign = "baseline";
fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
} finally {
document.body.removeChild(div);
}
var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
console.log(result);
The result on my old project is:
Object { ascent: 59, height: 74.5, descent: 15.5 }
On my new project is:
Object { ascent: 14, height: 20.5, descent: 6.5 }
I am going to find a fix for that and create a pull request
LoL, now that I finally see what you are doing… Well, anyways, let’s just pretend I somehow pointed you towards the right direction…It had something to do with the font/text line height (and or offset)…let’s just pretend this, will we? 
GL with your project,
The simplest solution that I have found is replacing this line:
text.style.font = font;
with this:
text.setAttribute('style', `font: ${font} !important`);Simple is beautiful. 
I think, in fine, I like this method (if it really works).
It fixed like a charm 
