Text size scaling with percentage

Community
1

I was wondering if someone could help me? I have been creating my OSC controller using percentages because I would like it to scale perfectly on different sized touchscreens. That works perfectly.

However, text labels and button naming results in the text size not scaling so I wondering what is the correct way to use text? Sorry, I’m a beginner so it’s probably something simple.

Many thanks

Jono

2

There's no font-size unit that's relative to the container's size in css, but you could try with css media queries:

/* Could go in a container's css to avoid code repetition */
@media screen and (min-width: 1600px) {
  :host {font-size: 30rem}
}
@media screen and (max-width: 1600px) {
  :host {font-size: 20rem}
}
3

Thanks Jean.

I just tried this in the root CSS and it actually stops all the text (when opening the JSON file for the first time) being larger than when I saved it.

font-size: .9em

I shall try what you have said above though! :slight_smile:

4

Hi Jono,

It should work with the viewport (vw) unit.

I've made an example where text and icon sizes automatically adapt to both the viewport/window/screen size, the widget sizes and the size of the container.

Downscaling is not perfect but it should be good enough for one session to be used on HD screens, 4k screens and everything in between.

/* font size depends on the viewport width 
   (1 vw unit equals 1% of the viewport width) */
--font-size: 1vw;

/* font size also depends on the panel width */
--panel-width: #{parseInt(@{panel_1.width})};

/* font size also depends on the button width */
--button-width: #{parseInt(@{this.width})};

--fs: calc(var(--font-size)*#{parseInt(@{panel_1.width})}*#{parseInt(@{this.width})}/2400);
font-size: var(--fs);

/* line height scales the same */
line-height: calc(var(--fs)*1.2);

automaticTextScalingExample.json (98.2 KB)

2 Likes
5

Wow Amazing. I'll have a look at this later! Thank you! :slight_smile:

6

Just to say that this worked for me! My biggest challenge though is that I couldn't get it to work in my theme CSS file, only in the CSS property of each widget...any idea why?

7

HI @udo thanks for your solution, could you give me an example with a textarea widget, where the caracter size adapts to the number of caracters ?
can we define a max number of caracter?

thanks so much

8

Hi @Bennid,

I'm scratching my head how to do this properly with a text widget. I'm clueless since it has no label property. I tried in vain to stringify the value property in order to get its string length.

Stylizing the text with CSS also seems nearly impossible. Changing the line height or centering the text don't work, for instance.

However you can get the same results when using the labels of invisible non-interactive buttons.
Here's an example of this:
fontScalingByTextLenght.json (8.3 KB)