# textWidth() issues

**URL:** <https://discourse.processing.org/t/textwidth-issues/14218>\
**Category:** Coding Questions\
**Created:** [September 26, 2019, 2:38pm UTC](https://discourse.processing.org/t/textwidth-issues/14218 "2019-09-26T14:38:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GildasP](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@GildasP](https://discourse.processing.org/u/GildasP)\
**Post date:** [September 26, 2019, 2:38pm UTC](https://discourse.processing.org/t/textwidth-issues/14218/1 "2019-09-26T14:38:30Z")

</div>

Hi there.  
I’m using textWidth() to fit texts horizontaly in a fixed width.  
Doing so works great, I check for the textWidth() of my text in size 100, then I calculate in which size it would perfectly fit my fixed width and I draw it accordingly.

But whith some apparently random chains the textWidth() is not accurate.  
For exemple “TOROTOTO” is ok, but not “TARATATA” (the “TA” chain is what causes the problem).

I guess it may be a misinterpretation of the font I use, because it works fineif I don’t use any font.  
but as anyone an idea about it ?

Or maybe another way of checking the width of a text which would be more accurate ?

---

<div class="post-metadata">

**Author:** ![GildasP](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@GildasP](https://discourse.processing.org/u/GildasP)\
**Post date:** [September 26, 2019, 2:44pm UTC](https://discourse.processing.org/t/textwidth-issues/14218/2 "2019-09-26T14:44:57Z")

</div>

Here is a test code I’m using to find a solution :

```auto

var texte = "taRATA";
texte = texte.toUpperCase();

var my_font;
function preload(){
	my_font = loadFont('../madgen-assets/fonts/FredokaOne-Regular.ttf');
}
function setup(){
	var c = createCanvas(600, 600); 
	// c.parent(self.select.canvas_container);

	textFont(my_font);
	textAlign(CENTER, CENTER);
	rectMode(CENTER);
	imageMode(CENTER);
}
function draw(){

	fill(0);
	textSize(100);
	text(texte, width/2, 60);

	var w = textWidth(texte);
	var h = textAscent();
	noFill();
	rect(width/2, 60, w, h);

	noLoop();
}

```

and 2 results, a good and a bad one :  
 ![Annotation-2019-09-26-164056b](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/20db5383592acacb3fc10d9e9a36b6c245d68fe8.png)

---

<div class="post-metadata">

**Author:** ![GildasP](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@GildasP](https://discourse.processing.org/u/GildasP)\
**Post date:** [September 26, 2019, 6:19pm UTC](https://discourse.processing.org/t/textwidth-issues/14218/3 "2019-09-26T18:19:54Z")

</div>

Well, I managed to get the real width of the text by looking at the pixel matrix, searching for the farest not-empty pixel on screen…  
It was a bit tricky but works fine.

```auto
function realTextWidth(texte){
	clear();

	// écrit le texte
	textAlign(LEFT, TOP);
	fill(255,0,0);
	textSize(100);
	text(texte, 0, 0);

	// ok la zone ou chercher un point noir
	var _x = Math.ceil(textWidth(texte));
	var _y = 0;
	var w = 300; // arbitraire
	var h = Math.floor(textAscent(texte));

	loadPixels(); 
	var max_x = _x; // coord du point non-blanc le plus éloigné

	for (var x = _x; x < _x+w; x++) {
		for (var y = _y; y < _y+h; y++) {

			var k = 4* (x + y*width); // le rang du lot de valeurs rgba

			if(pixels[k]>0){
				max_x = Math.max(x, max_x);
			}
		}
	}
	console.log(texte+' : '+i+ " itérations... "+_x+' / '+max_x);

	// si on cleare tout de suite on n'a même pas le temps de voir quoi que ce soit...
	clear();

	return max_x;

}

```

It works fine and fast, too.  
I started with the get() function but it was really slow (like 8 or 9 seconds ).  
With loadPixels() it takes no time.

It solved my issue and I learned some stuff !

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 30, 2019, 11:02pm UTC](https://discourse.processing.org/t/textwidth-issues/14218/4 "2019-09-30T23:02:51Z")

</div>

Nice workaround!

I am not a font expert, but it looks as if your specific font has broken kerning – that is, it is reporting textwidth as if there is kerning around T – but doesn’t actually do it.

Typographically, that second T in TARATA looks … really bad. Each “A” ought to be closer to the T in ATA… As they are in this forum text.

---

<div class="post-metadata">

**Author:** ![GildasP](https://avatars.discourse-cdn.com/v4/letter/g/ed655f/32.png) [@GildasP](https://discourse.processing.org/u/GildasP)\
**Post date:** [October 1, 2019, 1:17pm UTC](https://discourse.processing.org/t/textwidth-issues/14218/5 "2019-10-01T13:17:18Z")

</div>

Oh you’re right !  
I just tested with another font and had no problem at all…  
I should have consider it sooner : it’s just a font issue.  
Thanks for the observation.