InputText: is fontSize in percentage available?

Hello everybody,

I am spending some time on responsiveness and have some issues with the InputText of my chat: I managed to set the fontSize of a TextBlock in percents, but as soon as I am trying the same on the InputText, I can no more insert text…

I tried with different values ranging from “5%” to “100%” but no luck so far… as a workaround, I set the fontSize in a Windows.resize event to a percentage of the canvas width, which kind of works, but doesn’t feel… elegant :stuck_out_tongue:

Hiya Fenryll… good to see you again. Interesting challenge!

Ok, have you ever studied the “em” unit-of-measure… for font-sizing?

To summarize quickly… setting a fontSize to “1.3em” means… make the fontSize 1.3 times the current size of the letter ‘m’. So, 1.3em is the same as saying… “increase font size by 30%”, yes?

But a person NEEDS a “default font size”… to accomplish that. We NEED a reference ‘m’-size… to determine what is 1em (or 100% of default fontSize). This can be challenging… and after you see the below playround… you’ll surely agree. :slight_smile:

https://www.babylonjs-playground.com/#AYL9GV#7

Ok, up at line 88… inputText.fontSize = 25;

So, our ‘m’ is established as a size-25 ‘m’.

We’ll need to remind the setInterval() of that value… because… well… I’m not sure why, yet. :slight_smile:

Ok, off we go, touring the PG:

  • Line 122… establish a “font percentage” named fpct.
  • Line 123… a change step. Our tester will be working-with +/- 10% intervals.
  • Line 124… default ‘m’-size… same as the value in line 88.

Lines 126-136… an interval looper… happens every 1.5 seconds. To be brief, I am sweeping fpct in a range from 0%… to 210% (and back again)… in 10% intervals… and I’m going to “feed” that to textInput.fontSize… in STRING-based ‘em’ units-of-measure.

NOTE: textInput.fontSize MIGHT be ignoring ‘em’-based settings… and converting it to ‘px’ settings automatically… a possibility raised by the need to multiply * em in line 135. More about that… below. In short, ‘em’ units might not work… for textInput.fontSize setting, and I am only fooling myself/you/us.

  • Line 133… some reports to JS console.
  • Line 135… does that “poke”. See the * em in there? I dunno why that needs to be there, but it does. And as long as it IS in there, I don’t think my system is quite correct. But it DOES do SOMETHING… based upon a changing percentage. Even if it IS a badly-coded kludge/mess, it STILL seems to be almost working, and could maybe lead-to YOU, doing it correctly/wiser. :slight_smile:

So, it’s just a thing … a test playground… something for you/us to poke with sticks and see what its story is. :slight_smile: Stick-poking… may be the first stand-off investigative tool used by almost all children. So, it’s fairly famous, and a cherished best friend of mine. I still use poking-sticks often… especially when I find/examine unusual critter stools in woodlands. :slight_smile: This PG demo might have similar smells. heh

hey wingnut, that is very interesting, but not sure how to use it to simulate percentage and to avoid to plug it on a resize event ?

So the original idea was to have, like on TextBlock, a font that would scale “on its own” with the canvas size…

I illustrated my current solution here https://www.babylonjs-playground.com/#AYL9GV#8 which kind of of works :wink:

I am currently in vacation on a remote place with very poor wifi, so 5 min to load any playground, lol

btw, who’s fred ? :wink:

1 Like

Yeah, I understand. The Gods will be back on-forum Monday/Tuesday… so expect 40-50 other ideas within a couple days. :wink:

:slight_smile: Fred Flintstone, my “Bedrock”… my hero, and the ORIGINAL “Family Guy”. George Jetson was the 2nd. Everyone expected Pebbles Flintstone to marry Bam-Bam Rubble, but she ACTUALLY married Elroy Jetson… 10 years her elder. :open_mouth: They both followed their fathers… her becoming a manager of 4 De Beers diamond quarries, and he is a big wig and major shareholder at Spacely’s Sprockets.

percentage size for font actually work:
https://www.babylonjs-playground.com/#AYL9GV#9

But there is a catch :slight_smile: It is a percentage of the control parent and in your case the parent has a fixed size (in pixel) so the child font size will not change :slight_smile:

2 Likes

back to a place with a proper internet connection :wink: (but also back from holidays :frowning: )

So, seeing it working in the PG gave me some more faith to retry :slight_smile: I was about to report I was not able to make it work in my project, even not seeing the cursor, when I gave a try with paddingTop and bottom equal to 0, and that finally all worked, THANKS :wink:

Now my inputText looks like that (had to put 3% fontSize…).
Btw, my new “funny” issue, hitting the (dead) key to make a letter with an accent “circonflex”, i.e. â,ê,î,ô,û, will print the string DEAD instead… I guess I’ll have to tweak that PG https://www.babylonjs-playground.com/#I1Y5YT#1 to see how to make it work, right ?

this.chatInput = new GUI.InputText("chat Input");
            this.chatInput.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
            this.chatInput.horizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            this.chatInput.autoStretchWidth = false;
            this.chatInput.height = '4%';
            this.chatInput.width = '30%';
            //this.chatInput.fontSize = Math.round(this.canvas.width*0.014);
            this.chatInput.fontSize ="3%";
            this.chatInput.paddingBottom =0;
            this.chatInput.paddingTop =0;
            this.chatInput.left = - leftPerc+'%';
            this.chatInput.top = - topPerc+'%';
            this.chatInput.color = 'white';
            this.chatInput.background = 'rgba(0, 0, 0, 0.2)';
            this.chatInput.focusedBackground = 'rgba(0, 0, 0, 0.2)';
            this.chatInput.thickness = 0.5;
            this.chatPanel.addControl(this.chatInput);
1 Like

Correct :slight_smile: