# Adjust text size based on screen resolution

**URL:** https://discourse.processing.org/t/adjust-text-size-based-on-screen-resolution/22747
**Category:** Coding Questions
**Created:** [July 20, 2020, 5:06pm UTC](https://discourse.processing.org/t/adjust-text-size-based-on-screen-resolution/22747 "2020-07-20T17:06:20Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![TechMaster04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/techmaster04/32/14929_2.png) [@TechMaster04](https://discourse.processing.org/u/TechMaster04)
#### Post date: [July 20, 2020, 5:06pm UTC](https://discourse.processing.org/t/adjust-text-size-based-on-screen-resolution/22747/1 "2020-07-20T17:06:20Z")

</div>

Hello

Recently I discovered how to make my programs resizable in Windows (Add surface.setResizable(true);  
in setup())  
This led me to make a function that changes the location of certain elements based on resoloution, to make the program fit the window size.  
_Useless Information here about how my function works if you’re interested_  
It works by using the dividend of the location of the element (in 720p) and the X or Y size (depending on which coordinate I am calculating). For example, if an icon were at X-pos 5 and Y-pos 10, I would divide 5 by 1280, and 10 by 720. Those dividends are then pasted into the function.

Then the function multiplies the user’s current window size by the dividend mentioned above to get the scaled location of the element.

```auto
void detectSizeAndChangeLocations() {
  int wid = width;
  int hei = height;
  //title
  posName[0] = wid*0.5;
  posName[1] = hei*0.0494444444;
  //Name Preview
  posView[0] = wid*0.5;
  posView[1] = hei*0.20;
  //Home Icon
  home[0] = wid*0.02734375;
  home[1] = hei*0.326388889;
  //Settings Icon
  settings[0] = wid*0.02734375;
  settings[1] = hei*0.417095778;
  //Stats Icon
  stats[0] = wid*0.02734375;
  stats[1] = hei*0.493055556;
  //Theme Toggle Button Coords
  them[0] = wid*0.37109375;
  them[1] = wid*0.62734375;
  them[2] = hei*0.231944444;
  them[3] = hei*0.291666667;
  //Color Button Toggle Coords
  clr[0] = wid*0.30703125;
  clr[1] = wid*0.68203125;
  clr[2] = hei*0.305555556;
  clr[3] = hei*0.369444444;
  //Theme Text Position
  themPos[0] = hei*0.291666667;
  //Color Text Position
  clrPos[0] = hei*0.361111111;
  //Verbose Text Position  
  verbosePos[0] = hei*0.430555556;
  //UDP Socket text position
  UDPSPos[0] = hei*0.5;
  //UDP IP Text Position
  UDPIPPos[0] = hei*0.569444444;
  //Admin Commands Text Position
  adminCommandPos[0] = hei*0.638888889;
  //Verbose Button Coords
  verboseButton[0] = wid*0.27265625;
  verboseButton[1] = wid*0.71796875;
  verboseButton[2] = hei*0.376388889;
  verboseButton[3] = hei*0.427777778;
}

```

However one issue that I can’t seem to fix, which is text size. Normally I’d use displayDensity, however that is an Android mode-only thing. I tried to add this line of code at the end of the function:

```auto
textScale = wid/1280;

```

and then add the textScale varible into textFont like this:

```auto
  textFont(productSans, 20*textScale);

```

However that does not seem to work. As I resize the window, the text size does not change, and if I make the window size too small, this gets printed to the console:

```auto
textFont: ignoring size 0.0 px:the text size must be larger than zero

```

I can see why it is, since the textScale variable at that time is quite small, and the product could be too small to draw, however this does not explain why, when the window is bigger than 1280x720, the text size stays the same.

Anyone see what I could be doing wrong, or know of a way in which I can achieve the effect I’m looking for?

Thanks in advance

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [July 20, 2020, 6:49pm UTC](https://discourse.processing.org/t/adjust-text-size-based-on-screen-resolution/22747/2 "2020-07-20T18:49:21Z")

</div>

Hello,

Please post a small complete and snippet of code demonstrating your issue.

It may be something as simple as declaring your variables correctly:

```auto
float scaleWidth = width/float(wIni); //from my code

```

What is your wid variable? I am guessing it is an integer and you are doing integer math and result is an integer.

I used this at end of draw() to see variables:

```auto
println(width, height, scaleWidth);

```

It is working here with the code I wrote.

`:)`

---

<div class="post-metadata">

### Author: ![TechMaster04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/techmaster04/32/14929_2.png) [@TechMaster04](https://discourse.processing.org/u/TechMaster04)
#### Post date: [July 20, 2020, 11:03pm UTC](https://discourse.processing.org/t/adjust-text-size-based-on-screen-resolution/22747/3 "2020-07-20T23:03:15Z")

</div>

Ah. Now I feel stupid😅. Wid and Hei were both integers. I assumed since it was fine since the function was able to scale the position of all the elements correctly. After changing those variables to floats the issue seems to be fixed. Thanks for the insight
