Word Wrapping formula.

Newbie & Debugging Questions
#1

So, I’m writing a word wrapping function for my text renderer in openGL, which, already works. Just my problem now is to get word wrapping working :S

So, here’s the formula:

for (int a = 0; a < text.length(); a ++){
			float frame = (float)((textValues[a] - 32) * charWidth) / fontWidth;
			float charWidthf = (float) charWidth / fontWidth;
			
			int yy = y + ((a / boundWidth) * charHeight) + 1;
			int xx = (x + (charWidth * (a)));
			
			//...OpenGL part
		}

charWidth and charHeight in this case are 5 and 7. fontWidth is the size of the image, which is the charWidth multiplied by 95, as we use 95 ASCII characters.

Now, yy works. It pushes the text downwards the further you get along with the text according to the boundWidth, which is how many chars are allowed horizontally before it needs to be pushed down for wrapping. The problem here is xx, which keeps going right regardless of the push of the wrap.

So, what I need is a mathematical formula so that xx will go back to the starting x position everytime it’s wrapped.

Sorry if this a hard question, I’m terrible at explaining this stuff.

#2

If you’re rendering one character at a time, why not just increment “xx” by the character width for each char, and whenever you’re going to go past the right-hand side, simply reset xx to the starting value and increment yy by the font height? This doesn’t break on word boundaries of course, but you don’t appear to be doing that anyway.

#3

Word wrapping generally depends on things like whitespace, word breaks (i.e. punctuation), and so forth. So it’s not so much a “mathematical formula” you need, as a way to check characters and respond accordingly.

TWL is pretty solid with word wrapping. LibGDX also has some word wrapping code that might help. Both are open source so you can see how they did it.

If you just want to wrap text to a given width, with no regard to whitespace or word breaks, something really basic might look like:

startX = 50, startY = 50; //start position
x = startX;
y = startY;
for each glyph {
     if (x + glyph.width > maxWidth || glyph.chr == '\n') {
          //bump down a line
          x = startX;
          y += lineHeight + lineSpacing;
     }
     glyph.draw(x, y);
     x += glyph.width; //also increase by xadvance, kerning info, etc.
}

Also IMO you shouldn’t hard-code things like having 95 ASCII characters unless you are under some very serious constraints (i.e. Java4K). You’ll regret it later, when you realize how restricted your hard-coded system is. For the sake of flexibility and easier rendering, just use a Glyph object that has its own x/y position in the glyph page, its own width/height, kerning info, etc.

#4

I hard coded 95 to a static integer so it’s easy to recognize and change later, but the reason I did so is because I will only use the ASCII values 32-127, ever. lol. The first 31 are irrelevant to what I need. But I understand what you mean. Thank you.

I’ll be extending my text splicing method so that it sees full words and makes sure they are split too, instead of the \n thing. I’m not really a fan of having to keep track of that kind of stuff.

Thank you both for input :slight_smile: