Text size scaling with percentage

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

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}
}

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:

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

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

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?