# How to adjust a font to fit inside a speech bubble?

I'm creating a game that contains a speech bubble for dialog. The idea of this function is to allow one call to set new text in a speech bubble. The speech bubble will adjust in size of the new font texture.

The difficulty is getting the math to work. I get the font texture's size, the balloon sprite size, and then get the difference. If the difference is negative, I would think this means the font size is smaller so I need to readjust the speech bubble to fit the font (cell padding is excluded for now). If the difference is larger (font is greater than speech bubble), I would need to increase the speech bubble's size to fit it.

Part of my trouble too is SFML (API) has no SetSize function for the sprite, so I'm relying on setting the scale instead - which is a bit more confusing to me. SFML did have a SetSize function in a earlier version, but it's not in v2.1.

SFML SetScale() Reference: http://www.sfml-dev.org/documentation/2.1/classsf_1_1Transformable.php#a4c48a87f1626047e448f9c1a68ff167e

Within this code, I'm asking how to calculate this correctly.

/* Perform black magic here on scaling the correct size.

I need to adjust the floating point #
based on the new speech balloon's width and height. This portion is not working correctly.
I get vScale.x = 3.6718750, vScale.y = 2.4765625, so it blows the image high.
*/
vScale.x = (float)bal_w_prev / (float)bal_w;
vScale.y = (float)bal_h_prev / (float)bal_h;


I took the advice to switch the values (bal_w_prev and bal_w) to its opposite (bal_w to bal_w_prev), and it does seem to work, but the speech bubble's width is half way to where it needs to be. The font size is implicitly included because SFML uses fonts as textures. Does the font's texture size need to be in this algorithm above as well?

Full code (if needed):

/*****************************************************************
* Sets text for an existing speech bubble.
*
* @param sb - The speech balloon object.
* @param strText - The text to insert into the speech balloon.
* @param x - The x position.
* @param y - The y position.
* @param scale - Not used for now - originally to scale by 0.0-2.0.
****************************************************************/
void sb_set(struct X2D_SPEECH_BALLOON *sb, const char *strText,
const float x, const float y, const float scale)
{
float balloon_x_center, balloon_y_center;
sfVector2f vScale;
unsigned int font_w, font_h,
bal_w, bal_h, bal_w_prev, bal_h_prev, diff_w, diff_h;

/* Set font */
fnt_setText(&sb->font, strText);

/* Set position */
sb_setPos(sb, x, y);

/* Get font's size */
font_w = sfTexture_getSize(sfFont_getTexture(sb->font.font, sb->font.size)).x;
font_h = sfTexture_getSize(sfFont_getTexture(sb->font.font, sb->font.size)).y;

/* Get the balloon size */
bal_w = sfTexture_getSize(sb->sprBalloon.texture).x;
bal_h = sfTexture_getSize(sb->sprBalloon.texture).y;
bal_w_prev = bal_w;  /* Save original width */
bal_h_prev = bal_h;  /* Save original height */

/* Get the difference */
diff_w = bal_w - font_w;
diff_h = bal_h - font_h;

/* Check if font size is greater than the balloon sprite size */

/* Speech bubble's width is less than the font's width. */
if (diff_w < 0)
{
bal_w += diff_w;
}

/* Speech bubble's height is less than the font's height. */
if (diff_h < 0)
{
bal_h += diff_h;
}

/* The speech balloon's width is greater than the font's size. */
if (diff_w >= 0)
{
bal_w -= diff_w;
}

/* The speech ballon's height is greater than the font's size. */
if (diff_h >= 0)
{
bal_h -= diff_h;
}

/* Perform black magic here on scaling the correct size.

I need to adjust the floating point # (0.0 - 2.0)
based on the new speech balloon's width and height. This portion is not working correctly.
I get vScale.x = 3.6718750, vScale.y = 2.4765625, so it blows the image high.
*/
vScale.x = (float)bal_w_prev / (float)bal_w;
vScale.y = (float)bal_h_prev / (float)bal_h;

/* Set the scale */
sfSprite_setScale(sb->sprBalloon.sprite, vScale);

sb->sprBalloon.width = sfTexture_getSize(sb->sprBalloon.texture).x;
sb->sprBalloon.height = sfTexture_getSize(sb->sprBalloon.texture).y;
}

• It's a little unclear what you are after. Do you want an algorithm to adjust the size of the balloon to fit a known text size? Or do you want one to adjust the text size to fit a known balloon size? Please clarify; further, questions asking for "general advice" on your code aren't considered on-topic here, and if you are going to ask for help debugging your code you're going to need to explain more about what you've tried, what your debugger is telling you, what results you are getting (screenshots would be great) and what results you'd like to get (mock-ups would be great). – user1430 Jan 31 '14 at 23:44
• Please edit your question for clarification taking the above advice into consideration. – user1430 Jan 31 '14 at 23:45
• Yes, games consist of many subjects, but debugging your code for you isn't a on-topic here, regardless of whether or not the code in question is game-related. That is why I put the question on hold so that you can address those issues with it (and since you have edited it, it's now in the re-open queue). – user1430 Feb 1 '14 at 0:06

Im not going to check your code but i will give you a basic idea of how i would do this. To calculate the size of the balloon, u first need to calculate the required size to fit the text. To do this u also need to know how many chars u want to fit into the bubble.

From here, u can calculate the size of the rectangle u need for the text.

• Rectangle heigth = (amount_of_lines * font_heigth ) + ((amount_of_lines-1) * height_line_spacing)
• Rectangle width = (number_of_chars / amount_of_lines ) * font_width

From the original speech bubble u need to know the textarea size to calcualte the required scaling - scale = required_size / original_size

### Example:

• text_length = 100 chars
• lines = 5
• font_width = 10px
• font_height = 20px
• spacing_height = 10px (space between 2 lines)

Original bubble image size (red rectangle)

• height = 300px
• width = 500px

Original bubble image textarea size (green rectangle)

• height = 200px
• width = 400px

### Step 1: calculate required text space

• height = (5 * 20px) + ((5-1) * 10px) = 100px + 40px = 140px
• width = 100 / 5 * 10px = 200px

### Step 2 : calculate scaling

• Height scale = required_height / original_height = 140 / 200 = 0.7 = 70%
• Width scale = required_width / original_width = 200 / 400 = 0.5 = 50%

Dont Forget: using 2 different scaling will change the width/height ratio of the original size, resulting in a stretched image. to prevent this u should scale both dimension use the smallest scale.

• Thanks for your time writing this. I'm focusing on width at the moment. I took the advice to switch the values (bal_w_prev and bal_w) to its opposite (bal_w to bal_w_prev), (thus required_width / original_width), and it does seem to work, but the speech bubble is half the width of what it needs to be. The font size is implicitly included because SFML uses fonts as textures. This is however leading me closer. – Phil Feb 1 '14 at 0:17
• I added a image. Are u sure u are using the green dimensions to calculate the scaling instead of the red ones? – JarFlux Feb 1 '14 at 0:36
• Hi. I managed to make my own solution just through debugging, trial and error. This was a helpful summary as well. Thanks for the help. – Phil Feb 1 '14 at 7:05