truncated italic text in UIButton?

Question

I found a strange behaviour when dealing with UIButton with big font size :

My iPad application need to present those kind of UIButton and I found that when I apply italic property on those big font sized UIButton, the text looks truncated like below : screenshot

this is strange as my UIButton is correctly centered and big enough. sizeToFit doesn't help. I tried to put log to know more, and it appears that the inside size of the UILabel of the button is too tiny :

NSLog(@"Button width : %.1f, text width : %.1f", button.frame.size.width, button.titleLabel.frame.size.width);
[button.titleLabel sizeToFit];
NSLog(@"Button width : %.1f, text width : %.1f", button.frame.size.width, button.titleLabel.frame.size.width);

which gives me :

Button width : 710.3, text width : 518.0

Button width : 710.3, text width : 518.0

it is doing the same think directly in IB, when applying more than 150 px font size on an italic styled UIButton. is there a way to fix it or is it an SDK bug ?

why not just increase the size of the textlabel or add a custom label as a subview of the button? — Nitin Alabur, Mar 26 '12 at 17:26
it doesn't work. the only thing I found to work is to add a blank space at the end, but it's strange to have to do that — Diwann, Mar 26 '12 at 21:13
See my answer here: http://stackoverflow.com/questions/6624447/uibutton-italic-font-clipping/21419202#21419202 — Tomasz Zabłocki, Jan 28 '14 at 23:37

score 1 · Answer 1 · answered May 25 '12 at 11:26

You can try out setting the title of the button like the following

[button setTitle:@"2 " forState:UIControlStateNormal/Highlighted/Selected];

or do the same using the .xib file associated with your ViewController. After that, you have to set the edge insets of the title of the button, which can be done from the corresponding .xib file, or do the following:

[button setTitleEdgeInsets:UIEdgeInsetsMake(0,spacingFromLeft, 0, 0)];

The second step will ensure that the text, in this case, the string "2" remains aligned towards the center. Thus, in the leftSpacing parameter of the method UIEdgeInsetsMake(), you can set the width according to your requirements to get it aligned to the center.

I was also having the same problem and adopted this solution, which may not be the best or correct approach, but it certainly worked for me.

A simpler approach could be `setTitle:@" 2 "` :) – Mick F Dec 30 '15 at 16:41 — Mick F, Dec 30 '15 at 16:41

score 0 · Answer 2 · answered Mar 26 '12 at 22:00

I think its a combination of the large font size (relative to the button/label size). When you add a space, its actually increasing the size of the UILabel.

Try [button.titleLabel adjustsFontSizeToFitWidth]. This will definitely reduce the font size (if its too large for the given frame size), but will make sure that nothing from the character gets chopped off.

truncated italic text in UIButton?

2 Answers2