NSString drawInRect overlaps all characters

Question

I am attempting to fill some text with a gradient-fill, where by I set the text drawing mode to clipping, and then paint a gradient-fill. The problem is, whenever I set the text drawing mode to clip, every character of the text string is placed on top of each other, rather than being painted in a sequence to form a word - it is most bizarre!

My code looks like this:

CGRect r = CGRectInset(self.frame, 55, 8);      

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat components[8] = {44/255, 54/255, 66/255, 1.0
            ,75/255, 92/255, 111/255, 1.0};
CGFloat locations[2] = {0, 1};

// draw the text's gradient fill
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);

CGContextSetTextDrawingMode(context, kCGTextClip);


[monthString drawInRect:r withFont:f lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentCenter];

CGContextFillRect(context, CGRectMake(0, 0, 320, 20));

Answer 1

It appears that the UIKit NSString additions that let you do drawInRect:withFont: and the like don't play well with the kCGTextClip drawing mode. I've seen the same behavior, and in this answer I provide code to fill text with a gradient using pure Quartz drawing calls. The downside to this approach is that you are limited to the MacRoman text encoding, which lacks support for many Unicode symbols.