Making all (more) text on TextButtons fit

Useful Tools and Components
1

I believe the drawButtonText in the JUCE LookAndFeel is faulty. Well for medium to large buttons it works great, but for small buttons if you have to much text, the drawFittedText used cannot do its work, as several hard coded values for margins are used, see below;

    const int yIndent = jmin (**4**, button.proportionOfHeight (0.3f));
    const int cornerSize = jmin (button.getHeight(), button.getWidth()) / 2;

    const int fontHeight = roundToInt (font.getHeight() * 0.6f);
    const int leftIndent  = jmin (fontHeight, **2** + cornerSize / (button.isConnectedOnLeft() 
                                  ? **4** : **2**));
    const int rightIndent = jmin (fontHeight, **2** + cornerSize / (button.isConnectedOnRight() 
                                  ? **4** : **2**));
    const int textWidth = button.getWidth() - leftIndent - rightIndent;

    if (textWidth > 0)
        g.drawFittedText (button.getButtonText(),
                          leftIndent, yIndent, textWidth, button.getHeight() - yIndent * 2,
                          justification::centred, 2);

So I rewrote the LookAndFeel drawButtonText function so it makes “longer” text fit and sharing it here in case somebody find it useful. See below pictures for before and after.

button-text-not-ftting button-text-not-ftting

class myLookAndFeel : public LookAndFeel_V4 {
public:

    void drawButtonText (Graphics& g, TextButton& button,
		bool /*shouldDrawButtonAsHighlighted*/, bool /*shouldDrawButtonAsDown*/)
	{
		Font font (getTextButtonFont (button, button.getHeight ()));
		g.setFont (font);
		g.setColour (button.findColour (button.getToggleState () ? TextButton::textColourOnId
			: TextButton::textColourOffId)
			.withMultipliedAlpha (button.isEnabled () ? 1.0f : 0.5f));

		const int yIndent = button.proportionOfHeight (0.1f);
		const int cornerSize = jmin (button.getHeight (), button.getWidth ()) / 2;

		const int leftIndent = cornerSize / (button.isConnectedOnLeft () ? 
                               yIndent * 2 : yIndent);
		const int rightIndent = cornerSize / (button.isConnectedOnRight () ? 
                                yIndent * 2 : yIndent);
		const int textWidth = button.getWidth () - leftIndent - rightIndent;

		if (textWidth > 0)
			g.drawFittedText (button.getButtonText (),
				leftIndent, yIndent, textWidth, button.getHeight () - yIndent * 2,
				Justification::centred, 2);
	}
}
1 Like