@Lindon That makes sense, thanks!

Loading fonts seems to have fixed the issue with g.getStringWidth() in 4.0.0 too.

It's weird that it worked correctly even on unloaded fonts in 3.6.2, but in 4.0.0 using it on unloaded fonts gives you an incorrect pixel width. It's like the Windows fonts were loaded by default in 3.6.2, but in 4.0.0 they're loaded wrong. Could that difference in behaviour between versions indicate some kind of problem?

And is it worth adding a warning to users (whether in the software or in the documentation) when they use g.setFont() on unloaded fonts if the intention is that fonts should always be loaded in code? To me, the font loading part in the documentation reads as an option for adding your own fonts rather than a necessary step. I think I just read the correct syntax for setting a font, tried it and it worked, so I never had an indication that anything was wrong until now.

Either way, it looks like neither method is bugged, they just misbehave when you don't load fonts properly, so problem solved!

@Lindon

So is it normal practice to copy any fonts you want to use for a project from your system's Fonts folder into your HISE Projects Images folder and load them in code if you're using paint routines?

I can't remember where I learned to use g.setFont() but it always worked with all of the default Windows fonts without loading them like this so I never realised it was part of the process.

@Lindon

Still seems like an issue that Oxygen shows up in the font drop-down menu. It makes the user think it's a native font that g.setFont() could render without trouble.

@d-healey

You're right, your second one looks like Arial again with no spacing, and mine doesn't seem to be Arial OR Oxygen, its got the 'g' with a loop which neither font has (looking at the Google Fonts site). Is Oxygen definitely the selected font in your label? Do you have the option for Oxygen in the drop down menu? It's right at the top for me:

When I search for Oxygen in my HISE folder I find it in HISE-4.0.0\hi_core\hi_images along with a few other fonts. The date modified is the exact time it was compiled so it must be native, but it's in a different place to the other fonts.

I think it might be an old version of the Oxygen font that HISE uses in its own display. Image below shows the words "Interface Designer" as they appear in the HISE UI, and then below, a HISE label in Oxygen, 3.5, saying the same thing, they look the same to me!

So the Oxygen font shows up in the drop down font menu in labels, but cannot be accessed by g.setFont(), I guess because it doesn't look in the folder that Oxygen lives in.

I'll download the current version of Oxygen and load it myself like @Lindon suggested to avoid any more trouble. Perhaps it's worth hiding the font from users in the drop down to avoid the confusion?

@d-healey

Yeah, drawAlignedText() uses a character spacing of 0, so that's the spacing I want to check for.

I checked by drawing the same string below the original using g.setFontWithSpacing with a spacing of 0 and they're identical.

HiseSnippet 1024.3ocsVstaaaCElxILH1qcXEXO.D9W1XFF1oYsCnXnNwwdvX4hwTV6FFFJXjnj3hDopDURbJJ1q3PeD1SvdCxNjR1RZ0YsyXU.1Pmq7iGdNeTySjNrzTYBxp44KhYHqGfsWHTAiCnbAZ1QHqOGeBMUwRH4pNbQLMMk4hrr156zJrZtMx77WO+PZHU3vJUgPuPxcXGyi3pRsyG887vvoTW147nJdu+nYNRwXYnLCvyV3AnXpykTe1oTsaMvHqcl3xUxDaEUwRQVaenzcgcf7ZQt+ufmxuHjoEFhrgDkqdpLzUiXsVz3.dn67k66TDjk4kUgsxqBeI9DtKek9xpwWXLPJinZ8vpQc3sUM3MrJ7FTAdqARVUfz14P5QXamDdrpzhFOeFdl.Nb7nPYuJTx8E03OafGKAODp9QzKYSS.gUQz4ICFzi.+08YsZAk9TE4JZBIZwbpfER9VxxP8YpwxnXo.D5z1XcXacPEt1OkolCkH0OHyTbAqiWlvQwkhN9ca8lVM866Am3GDF1I+zMsO81rDFjAvjaB85i0AAXYOMfFV76wZ6sZpgjqz+b1MJ.RsUALxqy3NWRtHAprDO4MjeKKJl4RjWAsoZ6gzaWniosIA9Z3MUpg9AIbZXaH86Ut1GDx8ELWc96TrN8H+hAL.FFXd4W6QZGx7Ts6VOiujqBrgtTtvuZx6QF7Qj+8We90K.T3Skgr9wIbMrM68q4tp.BOkzl7UDe8YhsBL6+Rs9kYtqdc+fQOQ3CE76IE.TpuSfT91tOa4QJQJNUpXmI5XNZa81Vj+oIOu0ZS2MkHCCYIq0rlLH4eKvNhrnKXI8flzvL1JGgIj5ic36erqJqfSdycEGkhYBt5rXl393JPESDva+3rinJpdVsPG3WLKQw0Pv5H1U.wW9jaS7QrzKUxXfCa0XDxZWkw5CWNWqGjPbX5cWb9DF5lpLoKpJvUrnkDkM24c28t6pqcuppMG8qhdzuOJfw8CpPH+yiPUvUq535X5EE35AX4MK7YhyYop6EamNRA8PHq93+KCpHcPkaHHOFj6AU1bx+cwmYVaiJa9sUt1nyn5av+3Min5QtHytYGrdtBtz48HTApboaVHUUmeWeoVgAn6qFopl3TjxUKpdo2+aj9erP7Q34bkSv5wXi0fQnG8SAFKtp7g3IddLGUI.2FO8m9zbuHJ+9E+Sn.sEzAhOMKxF5YbXvpKfYF8zuUC8bZt7.srtBXyDtFg6fmBiC0xVEFGtzHJh5jHekSNmi9x3cMZ.LILshMgOHBjICQFdnp04H3aCdkiS8T8dAt2lF3i2z.2eSC7q2z.exlF3S2z.+lObf5Oc6fLkLJerAgNY9DCItk0DAE5.Mcqn+FIr8EyA```

@d-healey

Oxygen works fine when I use it in a label so it's definitely on my system. If you run this snippet, are both strings in the same font? For me the top one (set as Oxygen in the paint routine) displays as Arial, but the bottom one (set as Oxygen in the font component of a label) displays correctly:

HiseSnippet 1007.3ocsV8uaaaCDlxILH1scXEXO.D9ubPMLrS6ZGPwPch+wfwxOLly51vvPAiDkLWjHUknRhSQw.5S3PeR5aP1cTx1xqNqaFqFvFh2cem93w69nGmncEoo5DhS0ylEKHN2mNYlxLs2TtTQF0m37Ezi4oFQBK2zgyh4ooBOhiyVeGZvo51D6mO7hC4gbkqXoIB4kZoq3HYjzrz53teuLLbH2SblLpTzOo6HWspmNTmA7YKZaRL28Bdf3DNFVEJwYmAdRiNYhgaDoDmsOT6MaxT8Up73eoLUddn.WzgLARTt4g5POjwnURuoxPuwy22oDHKiWVE1JuJ7UzikdxE1WVM9RqC1RDkqGNUVkdasB85TldsKQu0PImRTZ6bJ8P5D2DYrYoGjO2iNRAGN9bnrWlJ4wRp7tJzdZHBkoUD+BwvDXwBDMdZ61MYvO687Z0fRepgcIOgEMaLWIBYeKaNz.gomNJVqfEMpa81oNBpHzVoByXnDY9AclQpDM7yTtFoV0HXuZuoV0fV9vI9AggMxOcSawuIKQ.Y.b4kvu5HDDvk8QB0o36iQ+0phTxSGbl3ZCPo5loB1qyjtWvNOAprLe80reOKJV3wzWBson+P9MyPL0sIH.o2PMR8SudVfPUGx+9Ke4GDJCTBO7Ezn3E0j8qV1.jns8geqIqdnv2TOmSPgIUGJZEmHwzZ41UROyTlLkUm8HV.VylX.2A+DZedh2Cw+IQOPE.Ej6HE.SNHQxCs6hlr1XJe6dOedImoUmnMhSUMrk9ZusF6u6x2es9vS6DcXnHYstwg0j+IfMTYQmKRZBMQgYhEABcvqNVPu6whxSst4MekBTqFojlSiEp6ZVlTzwBO8ii5yMbbVpvFDWrHwHQJ3zWbIHLkOYUk1WjdgQGCZLKZyIN6Zrdev74NrQmHgoqco4S.jqKqzMq7BoQDMWHq5Nu+12e6pV2urY6Q+Bzc+itSExfokDL+ktjR7p1p75H94E759Tss89LQp4N4V+tFnGh3zh9eYPhffVtgf7XYtOTYyEm2klOZYMMQdSIY8FcWcC9muoKGm3hr6lcn3XEbovGI3ARsZurPtYU8W7RmBGP22JhdnvlJUZlU9Ro+2Dk+2RwGRGKMtSWOGqrFNB8neN3XwUYOfNv2W3ZVRvsoC+4OO2aQx0+CNlCxVPGH8jrnIPOiq.d6JXlAm9cpfyo4qaiqwJvDgxyt3V3SgyN3ZmBmcl6jDwcSzuxMWyAurbWqEfSJaqXU3Or.qYcHVcnx04H3t6W45tZp9Hf6uo.e7lB7IaJvudSA9zME3y1TfeymFH9WqNHynixGaHjiGOvJh63LPwgNPa2J4u.3e16iM

I get the same incorrect result from Engine.getStringWidth() unfortunately:

Both say 196.7 when the text is visually longer than the 200 pixel line.

Follow on from my previous post, but I was able to reproduce the bug in a simpler way once I figured out what was happening.

I've drawn a line 200 pixels wide, and then drawn text that exceeds the width of line. g.GetStringWidth() tells us that the text is 196.7 pixels wide, which is clearly false.

HiseSnippet 903.3ocsVstaaaCElxIJH18BZA5C.g+kCVfgc5kMfhh5Dm3Ai1jZLm0shggBFoijXCEoFEURbGJ16XeR1aP5gTxwxKAosFXFvF5b46vOctQOQqBf7bkl3073YY.w6t9SmIMICSXbIY79Du66eHK2.ZZop8lkwxygPhm2Z+rUgWy0ItO+6K2iIXx.XgJB4sJd.7ZdJ2rP6jAuhKDiXgvw7zZd+jAiCTxgJgp.4yZ98HYrfSYwvQLqaM7IdabPH2nzSMLCji9rmJb1zD04xR+eKOmeh.rB8ISw.UplLLgKBmL+cMmP7Vexh270Jeyej+g7P9U5WjAdfy.cAh54.uF2Fk5+cPIuZTZ8RJ8P+oAZdlYgEKeti+XIVPhXXptNUJ8kznaC+gJzCooaJ6TXjFEtBQmm0q21T7msddqVX5N2POioooylvjff9B5bnwfYnJMSIQgNscV621Bpx0t4fYBlhL+hpvvkPmnBYfgqjch2p0e2pYb2HrJuqPzorhl2k8wBMfQ.MEpYm+ZKHjK6XIT+puO1ZuUSKkBUwGCWXPJ01j.z+pfGbJ8DMlYoQpKnenHMCBopyvVSqcA6iyrXZ6BPrkdiTVpuqlyDswvuyhydWAOVBg132o5b1l9GNxfbnm6g+baZaADYZWRILujqDP2LM2FUG0NmGZRn7bZa5OPisoroFzb7uY0OOvag3+zVOed5gpjGoLvajcbooVepE8+ZJJ5FsYqLZkP.5azrcXRea.6HKROAzaiEbQAbkiX21xsva7s0BGT1nTyQkbrjadSFTIORIBssl1mudCOopSCe5WGuOyvry.U5P+x.sgaoi29vY3RjxIhl96C4mZTYNeqZOIdaZbVu274EaCJgiG8l9kctjKpuUZVcAtARmuzo4Fe9xOe4xZ2otZWE+JzC9mAI.ONo1xs2Mfb84XbChJrPvLKuVwt+rx.VnVZV1NuJy4lY02u9crqo2stq4akhOzeB2DjbybrwMvQrD9+AGq1PeO+Chhf.yBBtt+neeUWG+UN9x0ZwGxvIZr4w+nhzoX2P.fmtDaovf660v1FWJ2yJay.SAYnS3R7Skw9VYuJi8majjxBzp2GTNdZuCXSmFjSR2UdMw6dQYZehajsddNEuR58AAKGpqAbmUE3iWUfOYUA9zUE3yVUf+3pB7m95.s+igcKLpzxwFB4vIG31w44cfjgcfttUxWPhDWpi

Further, g.setFont(Oxygen, fontSize) does not display the Oxygen font in a panel paint routine.

@d-healey Looking forward to it haha!

I've also realised I have two versions of HISE on my PC; 3.6.2 and 4.0.0 which is what caused my confusion. One's a desktop shortcut and the other was coming up when I searched HISE in the start menu!

The random difference in behaviour that I posted about earlier was a result of using different versions. In 4.0.0, I get the cut-off text with the ellipsis, whereas in 3.6.2 I get the "working" version, but BOTH versions fail to display the text in Oxygen when I say g.setFont("Oxygen", 20), and display Arial instead.

In 3.6.2, my code works with all fonts; even when I ask for Oxygen and get given Arial instead, g.getStringWidth knows we're in Arial now and scales correctly. Interestingly, if I put g.setFont("Default", 20) (the default being Oxygen), HISE crashes. Typing in font names that don't exist just makes the text display in Arial, so something about specifically "Default" really upsets g.setFont() in 3.6.2.

In 4.0.0, my code produces the cut-off text in every font I try. Using g.setFont("Oxygen", 20) still doesn't work and gives me text cut-off and in Arial. BUT when I try g.setFont("Default", 20) in 4.0.0, I no longer crash, but get Oxygen.

So what we've learned is:

1. g.setFont("Default", 20) causes a crash in 3.6.2, which seems to have been fixed by 4.0.0
2. g.getStringWidth() did work in 3.6.2, but doesn't anymore in 4.0.0
3. Neither version can correctly display Oxygen using setFont(), at least in a paint routine on a panel.

I was able to replicate this in a fresh project; I draw a line 200 pixels long, draw text that clearly exceeds the line, and g.getStringWidth() tells us that the text is only 196.7 pixels. In 3.6.2, it says the text is 215.5 pixels which seems about right.

HiseSnippet 903.3ocsVstaaaCElxIJH18BZA5C.g+kCVfgc5kMfhh5Dm3Ai1jZLm0shggBFoijXCEoFEURbGJ16XeR1aP5gTxwxKAosFXFvF5b46vOctQOQqBf7bkl3073YY.w6t9SmIMICSXbIY79Du66eHK2.ZZop8lkwxygPhm2Z+rUgWy0ItO+6K2iIXx.XgJB4sJd.7ZdJ2rP6jAuhKDiXgvw7zZd+jAiCTxgJgp.4yZ98HYrfSYwvQLqaM7IdabPH2nzSMLCji9rmJb1zD04xR+eKOmeh.rB8ISw.UplLLgKBmL+cMmP7Vexh270Jeyej+g7P9U5WjAdfy.cAh54.uF2Fk5+cPIuZTZ8RJ8P+oAZdlYgEKeti+XIVPhXXptNUJ8kznaC+gJzCooaJ6TXjFEtBQmm0q21T7msddqVX5N2POioooylvjff9B5bnwfYnJMSIQgNscV621Bpx0t4fYBlhL+hpvvkPmnBYfgqjch2p0e2pYb2HrJuqPzorhl2k8wBMfQ.MEpYm+ZKHjK6XIT+puO1ZuUSKkBUwGCWXPJ01j.z+pfGbJ8DMlYoQpKnenHMCBopyvVSqcA6iyrXZ6BPrkdiTVpuqlyDswvuyhydWAOVBg132o5b1l9GNxfbnm6g+baZaADYZWRILujqDP2LM2FUG0NmGZRn7bZa5OPisoroFzb7uY0OOvag3+zVOed5gpjGoLvajcbooVepE8+ZJJ5FsYqLZkP.5azrcXRea.6HKROAzaiEbQAbkiX21xsva7s0BGT1nTyQkbrjadSFTIORIBssl1mudCOopSCe5WGuOyvry.U5P+x.sgaoi29vY3RjxIhl96C4mZTYNeqZOIdaZbVu274EaCJgiG8l9kctjKpuUZVcAtARmuzo4Fe9xOe4xZ2otZWE+JzC9mAI.ONo1xs2Mfb84XbChJrPvLKuVwt+rx.VnVZV1NuJy4lY02u9crqo2stq4akhOzeB2DjbybrwMvQrD9+AGq1PeO+Chhf.yBBtt+neeUWG+UN9x0ZwGxvIZr4w+nhzoX2P.fmtDaovf660v1FWJ2yJay.SAYnS3R7Skw9VYuJi8majjxBzp2GTNdZuCXSmFjSR2UdMw6dQYZehajsddNEuR58AAKGpqAbmUE3iWUfOYUA9zUE3yVUf+3pB7m95.s+igcKLpzxwFB4vIG31w44cfjgcfttUxWPhDWpi

@d-healey it is yeah

@cynthasiser I've also tried various other fonts in g.setFont, and they all display. I tried typing random words as the font, and they default to Arial when not recognised, so it seems my issue is that g.setFont cannot find Oxygen by name. The font exists on my system though, as labels can successfully display it.

@aaronventure No, I thought that too when I was getting the initial wrong behaviour, but I tried it and it still cut the text off

@cynthasiser Okay I'm very confused now, was just about to bug report when I tried the broken snippet again and it works now, it's displaying the correct amount of tests, with no ellipsis:

The code is identical as before, but it works now.

One important realisation though - the font being displayed in both the original broken version, and the current working (despite being identical) one, is Arial, not Oxygen as I specified.

Comparison using labels:

So it seems the behaviour is coming from a confusion between Arial and Oxygen, even though the code explicitly says to use Oxygen.

I'm using version 3.6.2 btw

@aaronventure Thanks for confirming, will do! It's just an aesthetic thing, I don't like the squashed look you get with drawFittedText()

I tried to write some code using g.getStringWidth() to scale text down to perfectly fit a panel, but I've run into a problem. I'm trying to fit text into an area of 500, but even when my text is below 500 pixels across, it is still cut off. It seems that the real text width is bigger than what getStringWidth is telling me.

Am I misunderstanding exactly what getStringWidth does, or is my code wrong maybe? It's the same with Engine.getStringWidth too. Snippet below image.

HiseSnippet 1125.3ocsVstaaTDEd1DuztlVIpTe.F4esQI3Z6lT.Et3KwFYQShENTPBgplr630CY2YL6NacLnJj3ogGCdI38f2.3b1wd20INzJC0+vxm4bY9Ne9bYFEq73IIpXhkyEKlwIVOvd7BodZuoLgjL7Dh08r07DcSR2EyXIIbehk0teIpzxoBI6ye8EcYgLoGu3HB4EJgG+4hHgt3zQs+JQX3.lO+BQTIqOr8POkrmJTkB.YW6FjYLuqXA7yXnY6XSrdu99BsJdrlAngXUoqxew3op4Ri8uPjHtLjiBMIig.YNdfJzGQLdJo2TQn+nUIbBAhxnhzeWS5+X6SE9h7yKngOHSAsvix7g0NqCucWCdMKCuFkf2FfjUIHUw.oGYO1KVLSWnAwy6aOTp4wSX.sWFJFaI67mUr6o.Kj55Qrq3ChAgbObeViFGPgu163pUApOQSeEKldYXJeDSxCoeFckyAbcOUzLkDDbqkaQMzSzGr3nSbLaA3iy2+CGWbXjJUpwSa0.rchJl5J.wFGSEzOsjIf796uW0eopSdrpOKMYpaMTFunWWsZ9EWOgqGA+on+ZUpVH4tSRkdZgR5FjEif5SfZrNggtl5oj5reJkEwhAagP4T0YUl1Ily.7nmJRvr74JOVXW.P9ItHuja22J70SKYXlrKZAvQIpPd8YPvAxoKXLcdl0hDZM59EtWbyS.dcr3m4P.QdwwPWWiDUQ5+iJgzsFkRqYbL.yZS9jmVWFB8Hn5LkCTHBN+5EAbYsCxukh6EuiUYR.lFi0.pCLICpDM8IO4ll1WF.D2lr+.5sutCnML23MXlKvDbMlI+NL1KlPcKt1OuDwQ2XrfnnUJLj7kTzbnUheWAopCTY3jS8eHTEVu0QfeuQxy4sh2.h6+Locy77L9bSgwl4M320ntXLnIXNgJySPP2d0yHlWaJe7iYy6DJBjbej+VhkUcA.p7f16XteV21dGupmhpjmoz7yktY8VPiH8lplLYi5vwGwpvPd7FUiy+i+2bzUlFcIO9.XtD.xbCgghqOo09tmzVdQfmYZVICUxgRg97Yb4csdfrbDH7quY3ILMCGOu7LvtY7Xs.gf0I7WA65LCqcrOgmbkVMCVakO2jXcecl1GtZTNNIiH7ww3QvvLi70k2etnrfPyiVsd7A1G15SZcXylOswQkTz5FZxpZxiwe7asmxEAS0kOgTBf12M.yG8VFfCaC.z152get9M09WaSt8NLX6oxOMjoWekJ9NhkJf+8WaOFtqRlHzKJ+Ni+21y91BwGYORn8ltYLtyFvHTi7t.iKecxCs6OYB2SW.vJ1C9t2MOEgXVvFbJClgA+yaeVZzXnPyiC2tDJGvtOqcv9DibCTFYfwboelveCeVprIJasTYyUJIQLuX0K8L8736ete1I.ljYO8yw9TTl1jjMGnLOGAOG6kddqGpa4Xqs0wmtsNd3153QaqiOaac7i1VG+32ri3qk6jpUQl1FB4zQ8yFhZY0WxfJvrpUx+P2+SYD

@cynthasiser

Yep, that's perfect, thanks!

@d-healey ah that's great news, I'll give it a go! thank you!

@d-healey

You get the same horizontal squishing behaviour even in a panel though:

Updating the font size would work, but I'd have to somehow know exactly how many pixels the text would take up to know if I needed to scale it down.

e.g.
If I had a text box that's 200 pixels wide and the sentence "the quick brown fox jumped over the lazy dog" in Arial at 20pt size. Let's pretend this sentence would take up 220 pixels of screen space. I'd want to write a for loop that keeps decreasing the font size until the sentence was less than 200 pixels wide.

But how would I check the "pixel width" of a given text string in a given font?

@d-healey I'm not sure what the snippet would show? It's standard HISE behaviour (at least on my computer) that text boxes try to scale text horizontally but not vertically.

@d-healey that doesn't change the scaling though? it only changes how much of the text is visible:

(the example is in a label)

I need to scale text in my project, but I don't like the way it looks when it's scaled horizontally without being scaled down vertically too.

For example, HISE deals with the line under "30 Divisions of the Octave" like this:

Whereas I'd want it to look more like this:

Is there a way to do achieve this?