Monday, June 13, 2011

CoreText Tutorial for iOS - Part 1

Well I have been working on this really cool library which is more like css library for iPhone textfields and labels. And it will very very simple to use ! I promise where you don't have to juggle around a lot to figure out how to use it. I am dealing with CoreText  Framework majorly. So I thought it will be cool to release some of the code snippets and finally I will release whole code for people to use.
Oh and I just watched GhostTown movie.. it was really very funny !  Good real humor :)

Ok, Lets begin . Shall we?

1. Add the CoreText framework in your iOS project. This will work only for above iOS 3.2

You can check post if needed : How to add frameworks in your project in XCode 4 ?

2.  Reference Doc, in case you feel like goofing around docs before you read the whole doc or you wanna refer them later on because you wanna do something cool yourself.

You can refer to Apple reference Document about CoreText : LINK
In order access that  link you might need to log in with your apple ID. I am not sure though. Anyways,there is also Apple Sample Code with name CoreText in sample code section available but it might be too much for beginners to dig in it.

3. You will have to write this code in UIView subclass in drawRect method for it to really work. Don't put  it in ViewController.

    /*We are going to create a text label with multiple colors in it*/
    //Create our context
    CGContextRef context = UIGraphicsGetCurrentContext();

    //Flip the context so that the text will appear right , 
    //otherwise it appears upside down and its mirror image.
    CGAffineTransform flipTransform = CGAffineTransformMake( 1, 0, 0, -1, 0, self.frame.size.height);
    CGContextConcatCTM(context, flipTransform);

    //This is the string we want to write on our screen and we also need to get the string length
    NSString *test = @"We hold this truth to be self-evident, that everyone is created equal.And everybody deserves a second chance.";
    NSInteger _stringLength=[test length];

    //Convert NSString to CFStringRef
    // Initialize an attributed string.
    //Copy the CFStringRef to CFMutableAttributedStringRef
    CFStringRef string =  (CFStringRef) test;
    CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
    CFAttributedStringReplaceString (attrString,CFRangeMake(0, 0), string);

     Note: we could have created CFAttributedStringRef which is non mutable, then we would have to give all its
     attributes right when we create it. We can change them if we use mutable form of CFAttributeString.

    //Lets choose the colors we want to have in our string
    CGColorRef _orange=[UIColor orangeColor].CGColor;
    CGColorRef _green=[UIColor greenColor].CGColor;
    CGColorRef _red=[UIColor redColor].CGColor;
    CGColorRef _blue=[UIColor blueColor].CGColor;    

    //Lets have our string with first 20 letters as orange
    //next 20 letters as green
    //next 20 as red
    //last remaining as blue
    CFAttributedStringSetAttribute(attrString, CFRangeMake(0, 20),kCTForegroundColorAttributeName, _orange);
    CFAttributedStringSetAttribute(attrString, CFRangeMake(20, 20),kCTForegroundColorAttributeName, _green);
    CFAttributedStringSetAttribute(attrString, CFRangeMake(40, 20),kCTForegroundColorAttributeName, _red);    
    CFAttributedStringSetAttribute(attrString, CFRangeMake(60, _stringLength-61),kCTForegroundColorAttributeName, _blue);    

    //Now lets make the font more bigger than normal
    //I dont know whats the default size but its very small like 10.0f may be
    //So you set attribute called kCTFontAttributeName
    CTFontRef font = CTFontCreateWithName((CFStringRef)@"Helvetica", 16.0f, nil);
    CFAttributedStringSetAttribute(attrString,CFRangeMake(0, _stringLength-1),kCTFontAttributeName,font);

    /* Note: Like kCTForegroundColorAttributeName , kCTFontAttributeName we have many more attributes of CFAttributeString which can be set by us and making out string look really cool. We will check them out later on. */

    // Initialize a rectangular path.
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect bounds = CGRectMake(10.0, 10.0, 200.0, 200.0);
    CGPathAddRect(path, NULL, bounds);
    // Create the framesetter with the attributed string.
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
    // Create the frame and draw it into the graphics context
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0, 0), path, NULL);
    CTFrameDraw(frame, context);

So finally this is what the text looks like as shown in the image.


  1. HI, is there a way to display fractions (e.g. 1/3, 2/5, 89/100, ...etc) and mathematical symbols (e.g. square roots?) Thanks!

  2. Interesting topic.. Let me write some lib about it and post it :)

  3. I am interested in language translation apps. I have written some multiple language apps, but ran into a problem - that maybe a challenge to you :) If my app has one side in English and a flip to Greek/Arabic/Hebrew, it would be great to be able to flip the keyboard at the same time. I don't think you can do this now, unless there is a way to create a custom keyboard....

    What do you think?