Text size scaling with percentage

Community
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