Drawing text with accented characters (i.e. French Text) - ios

Question

I want to draw text on an image. I've tried using CGContextShowTextAtPoint and NSString drawAtPoint, but they both fail to show text with accented characters (i.e. if the text is in French). Basically I want to be able to show unicode characters. Any hints/solutions?
My solution with Core-Graphics (UIImage category method):
- (UIImage *)overlayText:(NSString *)overlayText withFontName:(NSString *)fontName andFontSize:(CGFloat)fontSize {
// Refererence:
// http://iphonesdksnippets.com/post/2009/05/05/Add-text-to-image-%28UIImage%29.aspx
int w = self.size.width;
int h = self.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextDrawImage(context, CGRectMake(0, 0, w, h), self.CGImage);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1);
char *charText = (char *)[overlayText cStringUsingEncoding:NSASCIIStringEncoding];
char *charFontName = (char *)[fontName cStringUsingEncoding:NSASCIIStringEncoding];
CGContextSelectFont(context, charFontName, fontSize, kCGEncodingMacRoman);
CGContextSetTextDrawingMode(context, kCGTextFill);
CGContextSetRGBFillColor(context, 255, 255, 255, 1);
// rotate text
// CGContextSetTextMatrix(context, CGAffineTransformMakeRotation(-M_PI / 4));
CGFloat textWidth = [overlayText calculateCGTextWidthWithFont:charFontName size:fontSize];
CGFloat xTextPosition = MAX(10.0, w - textWidth - 10.0); // 10.0 inset
CGFloat yTextPosition = 10.0;
CGContextShowTextAtPoint(context, xTextPosition, yTextPosition, charText, strlen(charText));
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return [UIImage imageWithCGImage:imageMasked];
}
My solution with NSString (UIImage category method):
- (UIImage *)overlayText:(NSString *)overlayText withFontName:(NSString *)fontName andFontSize:(CGFloat)fontSize {
UIFont *font = [UIFont fontWithName:fontName size:fontSize];
char *charFontName = (char *)[fontName cStringUsingEncoding:NSASCIIStringEncoding];
CGFloat textWidth = [overlayText calculateCGTextWidthWithFont:charFontName size:fontSize];
CGFloat xTextPosition = MAX(10.0, self.size.width - textWidth - 10.0); // 10.0 margin/inset
CGFloat yTextPosition = self.size.height - fontSize - 10.0; // 10.0 margin/inset
UIGraphicsBeginImageContext(self.size);
[self drawInRect:CGRectMake(0, 0, self.size.width, self.size.height)];
[[UIColor whiteColor] set];
[overlayText drawAtPoint:CGPointMake(xTextPosition, yTextPosition) withFont:font];
UIImage *overlayTextImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return overlayTextImage;
}
My solution with Core-Text (UIImage category method):
- (UIImage *)overlayText:(NSString *)overlayText withFontName:(NSString *)fontName andFontSize:(CGFloat)fontSize {
char *charFontName = (char *)[fontName cStringUsingEncoding:NSASCIIStringEncoding];
CGFloat textWidth = [overlayText calculateCGTextWidthWithFont:charFontName size:fontSize];
CGFloat xTextPosition = 10.0; // MAX(10.0, self.size.width - textWidth - 10.0); // 10.0 margin/inset
CGFloat yTextPosition = self.size.height - fontSize - 10.0; // 10.0 margin/inset
UIGraphicsBeginImageContext(self.size);
[self drawInRect:CGRectMake(0, 0, self.size.width, self.size.height)];
// flip the coordinate system
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// create an attributed string
CFMutableAttributedStringRef attributedOverlayText = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
if (overlayText != nil)
CFAttributedStringReplaceString(attributedOverlayText, CFRangeMake(0, 0), (CFStringRef)overlayText);
CFAttributedStringSetAttribute(attributedOverlayText, CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText)), kCTForegroundColorAttributeName, [[UIColor whiteColor] CGColor]);
CTFontRef ctFont = CTFontCreateWithName((CFStringRef)fontName, fontSize, NULL);
CFAttributedStringSetAttribute(attributedOverlayText, CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText)), kCTFontAttributeName, ctFont);
CFRelease(ctFont);
// draw attributed string using CTLineDraw
CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attributedOverlayText);
CGContextSetTextPosition(context, xTextPosition, yTextPosition);
CTLineDraw(line, context);
UIImage *overlayTextImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return overlayTextImage;
}

Answer 1

I problem with the above solution is that I'm essentially not getting the proper "width" for the text.
Here's the solution that worked for me (using Core Text):
- (UIImage *)overlayText:(NSString *)overlayText withFontName:(NSString *)fontName andFontSize:(CGFloat)fontSize {
// Develope's Note:
// Problem with implementing a solution using CG is that it doesn't support unicode character drawing i.e French
// Begin new image context
UIGraphicsBeginImageContext(self.size);
// Draw image
[self drawInRect:CGRectMake(0, 0, self.size.width, self.size.height)];
// Flip the coordinate system
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// Create an attributed string
CFMutableAttributedStringRef attributedOverlayText = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
if (overlayText != nil)
CFAttributedStringReplaceString(attributedOverlayText, CFRangeMake(0, 0), (__bridge CFStringRef)overlayText);
// Set text color
CFAttributedStringSetAttribute(attributedOverlayText,
CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText)),
kCTForegroundColorAttributeName,
[[UIColor whiteColor] CGColor]);
// Set text font
CTFontRef ctFont = CTFontCreateWithName((__bridge CFStringRef)fontName, fontSize, NULL);
CFAttributedStringSetAttribute(attributedOverlayText,
CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText)),
kCTFontAttributeName,
ctFont);
CFRelease(ctFont);
// Set text alignment (paragraph style)
CTTextAlignment alignment = kCTRightTextAlignment;
CTParagraphStyleSetting settings[] = {kCTParagraphStyleSpecifierAlignment, sizeof(alignment), &alignment};
CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(settings, sizeof(settings) / sizeof(settings[0]));
CFAttributedStringSetAttribute(attributedOverlayText,
CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText)),
kCTParagraphStyleAttributeName,
paragraphStyle);
CFRelease(paragraphStyle);
// Create framesetter with the attributed text
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attributedOverlayText);
CFRange stringRange = CFRangeMake(0, CFAttributedStringGetLength(attributedOverlayText));
CGSize fitRange = CTFramesetterSuggestFrameSizeWithConstraints(framesetter,
CFRangeMake(0, 0),
NULL,
CGSizeMake(self.size.width - (2 * 10.0), CGFLOAT_MAX),
NULL);
// Developer's Note:
// We can't use fontSize for the framesetter's height.
// We can't use fitRange.height in the bounding rectangle, because then we won't get the correct text alignment
// Calculate the width (and correspondingly the xTextPosition)
CGRect boundingRect = CGRectMake(10.0,
10.0,
self.size.width - (2 * 10.0),
fitRange.height);
CGMutablePathRef boundingPath = CGPathCreateMutable();
CGPathAddRect(boundingPath, NULL, boundingRect);
// Draw attributed text using CTFrameDraw
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, stringRange, boundingPath, NULL);
CTFrameDraw(frame, context);
CFRelease(framesetter);
// Draw boundary (debugging purposes only)
if (NO) {
// Inner boundary
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextSetLineWidth(context, 2.0);
CGContextStrokeRect(context, CGPathGetBoundingBox(boundingPath));
// Outer boundary
CGMutablePathRef controlBoundaryPath = CGPathCreateMutable();
CGPathAddRect(controlBoundaryPath, NULL, CGRectMake(0, 0, self.size.width, self.size.height));
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2.0);
CGContextStrokeRect(context, CGPathGetBoundingBox(controlBoundaryPath));
CFRelease(controlBoundaryPath);
}
// Draw attributed string using CTLineDraw
// (Doesn't work if we want to right align the text)
// CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attributedOverlayText);
// CGContextSetTextPosition(context, xTextPosition, yTextPosition);
// CTLineDraw(line, context);
UIImage *overlayTextImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return overlayTextImage;
}
Hope this helps someone.