2

I have a UILabel that is a fixed size. Unfortunately on rare occasions, the text I need to fit into it doesn't fit! I have tried reducing the font size, but it needs to reduce so much that it looks terrible.

Is it possible to change the font width somehow? UIFont does not seem to have any properties to allow me to do this? Do I need to use a UIWebView and use CSS? I don't know much CSS, so any help is much appreciated if this is the best way to solve this.

Alternatively, any other ways to solve this?

Thanks Craig

3 Answers 3

2

The simplest way to shrink just the width of the text is to apply a transform to the label's layer:

label.layer.transform = CATransform3DMakeScale(desiredWidth/textWidth, 1.0, 1.0);
1

Do you mean you want to squeeze it horizontally while keeping the height? This is achievable, up to about 60% of the regular width. Beyond that it looks terrible.

Here is the drawRect for a UILabel subclass which squeezes independently on either axis if necessary.

// This drawRect for a UILabel subclass reproduces most common UILabel formatting, but does not do truncation, line breaks, or scaling to fit.
// Instead, it identifies cases where the label text is too large on either axis, and shrinks along that axis.
// For small adjustments, this can keep text readable.  In extreme cases, it will create an ugly opaque block.
- (void) drawRect:(CGRect)rect;
{
    CGRect bounds = [self bounds];
    NSString *text = [self text];
    UIFont *font = [self font];

    // Find the space needed for all the text.
    CGSize textSize = [text sizeWithFont:font];

    // topLeft is the point from which the text will be drawn.  It may have to move due to compensate for scaling, or due to the chosen alignment.
    CGPoint topLeft = bounds.origin;

    // Default to no scaling.
    CGFloat scaleX = 1.0;
    CGFloat scaleY = 1.0;

    // If the text is too wide for its space, reduce it.
    // Remove the second half of this AND statement to have text scale WIDER than normal to fill the space.  Useless in most cases, but can be amusing.
    if ((textSize.width>0) && (bounds.size.width/textSize.width<1))
    {
        scaleX = bounds.size.width/textSize.width;
        topLeft.x /= scaleX;
    }
    else
    {
        // Alignment only matters if the label text doesn't already fill the space available.
        switch ([self textAlignment])
        {
            case UITextAlignmentLeft :
            {
                topLeft.x = bounds.origin.x;
            }
                break;

            case UITextAlignmentCenter :
            {
                topLeft.x = bounds.origin.x+(bounds.size.width-textSize.width)/2;
            }
                break;

            case UITextAlignmentRight :
            {
                topLeft.x = bounds.origin.x+bounds.size.width-textSize.width;
            }
                break;
        }
    }

    // Also adjust the height if necessary.
    if ((textSize.height>0) && (bounds.size.height/textSize.height<1))
    {
        scaleY = bounds.size.height/textSize.height;
        topLeft.y /= scaleY;
    }
    else
    {
        // If the label does not fill the height, center it vertically.
        // A common feature request is for labels that do top or bottom alignment.  If this is needed, add a property for vertical alignment, and obey it here.
        topLeft.y = bounds.origin.y+(bounds.size.height-textSize.height)/2;
    }

    // Having calculated the transformations needed, apply them here.
    // All drawing that follows will be scaled.
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(context, scaleX, scaleY);

    // Begin drawing.
    // UILabels may have a shadow.
    if ([self shadowColor])
    {
        [[self shadowColor] set];
        CGPoint shadowTopLeft = CGPointMake(topLeft.x+[self shadowOffset].width/scaleX, topLeft.y+[self shadowOffset].height/scaleY);
        [text drawAtPoint:shadowTopLeft withFont:font];
    }

    // The text color may change with highlighting.
    UIColor *currentTextColor;
    if ((![self isHighlighted]) || (![self highlightedTextColor]))
        currentTextColor = [self textColor];
    else
        currentTextColor = [self highlightedTextColor];

    // Finally, draw the regular text.
    if (currentTextColor)
    {
        [currentTextColor set];
        [text drawAtPoint:topLeft withFont:font];
    }
}
1
  • Thanks Dondragmer, that's exactly what I need to do. I will give this a go. Apr 14, 2012 at 17:18
0

You can set the minimum font size of a UILabel to a smaller value, and check Autoshrink to let it automatically shrink. This parameter is available in Interface Builder.

The internal implementation will reduce kerning, which is the width of space between characters. It cannot actually reduce width though.

This is your better bet. If you are still unsatisfied with results. You may have to change your design.

3
  • Theoretically, you could replace your label with drawing in Quartz 2D, too, employing CGContextSetCharacterSpacing, but that's probably something the Craig isn't interested in pursuing (and aesthetically, if you could have negative spacing, I can't imagine that it would look good). I agree with you. Change the design. Or see if one of the other fonts is narrower.
    – Rob
    Apr 8, 2012 at 15:18
  • Hello, thanks for the input. As I said above, I'm already reducing the font, but I'm not happy with this solution. Apr 8, 2012 at 18:07
  • I'll check out the Quartz 2D options in the meantime. If it allows me to do what I need, then I will pursue it. Thanks Robert. Apr 8, 2012 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.