Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drop cap with NSAttributedString

I would like to do a drop cap first character in a UILabel using the attributedText NSAttributedString property only. Like this:


(source: interpretationbydesign.com)

I have experimented with adjusting the base line for the range of the first character to a negative value, and it works for aligning the top of the first char with the top of the rest of the first line. But I have not found any way to make the other lines flow to the right of the drop capped character.

Can this be solved using NSAttributedString only, or do I have to split the string and render it myself using Core Text?

like image 996
PeyloW Avatar asked Jan 08 '13 12:01

PeyloW


People also ask

What is drop cap with example?

A drop cap (dropped capital) is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of a drop cap is usually two or more lines. The following illustration shows your options for positioning a drop cap.

How do I make a drop cap in CSS?

The same drop cap effect can be accomplished with CSS using the ::first-letter pseudo element and the new initial-letter property.

How often should you use drop cap?

1. Drop caps should be used only for the beginning of entire sections of type such as chapters or major changes of topic. Don't use them for every paragraph—we already have a way of indicating new paragraphs using skipped lines or indents. The drop cap should be reserved to introduce a whole section of paragraphs.

What are the two types of drop cap?

There are two types of drop cap: Dropped: Wraps text around the drop cap. In Margin: Isolates drop cap into the left margin.


2 Answers

As everyone else mentioned, it's not possible to do this with only NSAttributedString. Nikolai has the right approach, using CTFrameSetters. However it is possible to tell the framesetter to render text in a specific area (i.e. defined by a CGPath).

You'll have to create 2 framesetters, one for the drop cap and the other for the rest of the text.

Then, you grab the frame of the drop cap and build a CGPathRef that runs around the space of the frame of the drop cap.

Then, you render both framesetters into your view.

I've created a sample project with an object called DropCapView which is a subclass of UIView. This view renders the first character and wraps the remaining text around it.

It looks like this:

dropcap on ios

There are quite a few steps, so I've added a link to a github project hosting the example. There are comments in the project that will help you along.

DropCap project on GitHub

You'll have to play around with the shape of the textBox element (i.e. the CGPathRef) for padding around the edges of the view, and to tighten it up to the drop cap letter as well.

Here are the guts of the drawing method:

- (void)drawRect:(CGRect)rect {
    //make sure that all the variables exist and are non-nil
    NSAssert(_text != nil, @"text is nil");
    NSAssert(_textColor != nil, @"textColor is nil");
    NSAssert(_fontName != nil, @"fontName is nil");
    NSAssert(_dropCapFontSize > 0, @"dropCapFontSize is <= 0");
    NSAssert(_textFontSize > 0, @"textFontSize is <=0");

    //convert the text aligment from NSTextAligment to CTTextAlignment
    CTTextAlignment ctTextAlignment = NSTextAlignmentToCTTextAlignment(_textAlignment);

    //create a paragraph style
    CTParagraphStyleSetting paragraphStyleSettings[] = { {
            .spec = kCTParagraphStyleSpecifierAlignment,
            .valueSize = sizeof ctTextAlignment,
            .value = &ctTextAlignment
        }
    };

    CFIndex settingCount = sizeof paragraphStyleSettings / sizeof *paragraphStyleSettings;
    CTParagraphStyleRef style = CTParagraphStyleCreate(paragraphStyleSettings, settingCount);

    //create two fonts, with the same name but differing font sizes
    CTFontRef dropCapFontRef = CTFontCreateWithName((__bridge CFStringRef)_fontName, _dropCapFontSize, NULL);
    CTFontRef textFontRef = CTFontCreateWithName((__bridge CFStringRef)_fontName, _textFontSize, NULL);

    //create a dictionary of style elements for the drop cap letter
    NSDictionary *dropCapDict = [NSDictionary dictionaryWithObjectsAndKeys:
                                (__bridge id)dropCapFontRef, kCTFontAttributeName,
                                _textColor.CGColor, kCTForegroundColorAttributeName,
                                style, kCTParagraphStyleAttributeName,
                                @(_dropCapKernValue) , kCTKernAttributeName,
                                nil];
    //convert it to a CFDictionaryRef
    CFDictionaryRef dropCapAttributes = (__bridge CFDictionaryRef)dropCapDict;

    //create a dictionary of style elements for the main text body
    NSDictionary *textDict = [NSDictionary dictionaryWithObjectsAndKeys:
                                 (__bridge id)textFontRef, kCTFontAttributeName,
                                 _textColor.CGColor, kCTForegroundColorAttributeName,
                                 style, kCTParagraphStyleAttributeName,
                                 nil];
    //convert it to a CFDictionaryRef
    CFDictionaryRef textAttributes = (__bridge CFDictionaryRef)textDict;

    //clean up, because the dictionaries now have copies
    CFRelease(dropCapFontRef);
    CFRelease(textFontRef);
    CFRelease(style);

    //create an attributed string for the dropcap
    CFAttributedStringRef dropCapString = CFAttributedStringCreate(kCFAllocatorDefault,
                                                                   (__bridge CFStringRef)[_text substringToIndex:1],
                                                                   dropCapAttributes);

    //create an attributed string for the text body
    CFAttributedStringRef textString = CFAttributedStringCreate(kCFAllocatorDefault,
                                                                (__bridge CFStringRef)[_text substringFromIndex:1],
                                                                   textAttributes);

    //create an frame setter for the dropcap
    CTFramesetterRef dropCapSetter = CTFramesetterCreateWithAttributedString(dropCapString);

    //create an frame setter for the dropcap
    CTFramesetterRef textSetter = CTFramesetterCreateWithAttributedString(textString);

    //clean up
    CFRelease(dropCapString);
    CFRelease(textString);

    //get the size of the drop cap letter
    CFRange range;
    CGSize maxSizeConstraint = CGSizeMake(200.0f, 200.0f);
    CGSize dropCapSize = CTFramesetterSuggestFrameSizeWithConstraints(dropCapSetter,
                                                                      CFRangeMake(0, 1),
                                                                      dropCapAttributes,
                                                                      maxSizeConstraint,
                                                                      &range);

    //create the path that the main body of text will be drawn into
    //i create the path based on the dropCapSize
    //adjusting to tighten things up (e.g. the *0.8,done by eye)
    //to get some padding around the edges of the screen
    //you could go to +5 (x) and self.frame.size.width -5 (same for height)
    CGMutablePathRef textBox = CGPathCreateMutable();
    CGPathMoveToPoint(textBox, nil, dropCapSize.width, 0);
    CGPathAddLineToPoint(textBox, nil, dropCapSize.width, dropCapSize.height * 0.8); 
    CGPathAddLineToPoint(textBox, nil, 0, dropCapSize.height * 0.8);
    CGPathAddLineToPoint(textBox, nil, 0, self.frame.size.height);
    CGPathAddLineToPoint(textBox, nil, self.frame.size.width, self.frame.size.height);
    CGPathAddLineToPoint(textBox, nil, self.frame.size.width, 0);
    CGPathCloseSubpath(textBox);

    //create a transform which will flip the CGContext into the same orientation as the UIView
    CGAffineTransform flipTransform = CGAffineTransformIdentity;
    flipTransform = CGAffineTransformTranslate(flipTransform,
                                               0,
                                               self.bounds.size.height);
    flipTransform = CGAffineTransformScale(flipTransform, 1, -1);

    //invert the path for the text box
    CGPathRef invertedTextBox = CGPathCreateCopyByTransformingPath(textBox,
                                                                   &flipTransform);
    CFRelease(textBox);

    //create the CTFrame that will hold the main body of text
    CTFrameRef textFrame = CTFramesetterCreateFrame(textSetter,
                                                    CFRangeMake(0, 0),
                                                    invertedTextBox,
                                                    NULL);
    CFRelease(invertedTextBox);
    CFRelease(textSetter);

    //create the drop cap text box
    //it is inverted already because we don't have to create an independent cgpathref (like above)
    CGPathRef dropCapTextBox = CGPathCreateWithRect(CGRectMake(_dropCapKernValue/2.0f,
                                                               0,
                                                               dropCapSize.width,
                                                               dropCapSize.height),
                                                    &flipTransform);
    CTFrameRef dropCapFrame = CTFramesetterCreateFrame(dropCapSetter,
                                                       CFRangeMake(0, 0),
                                                       dropCapTextBox,
                                                       NULL);
    CFRelease(dropCapTextBox);
    CFRelease(dropCapSetter);

    //draw the frames into our graphic context
    CGContextRef gc = UIGraphicsGetCurrentContext();
    CGContextSaveGState(gc); {
        CGContextConcatCTM(gc, flipTransform);
        CTFrameDraw(dropCapFrame, gc);
        CTFrameDraw(textFrame, gc);
    } CGContextRestoreGState(gc);
    CFRelease(dropCapFrame);
    CFRelease(textFrame);
}

P.S. this comes with some inspiration from: https://stackoverflow.com/a/9272955/1218605

like image 53
C4 - Travis Avatar answered Sep 27 '22 01:09

C4 - Travis


CoreText cannot do drop caps because it consists of lines made up of glyph runs. A drop cap would cover multiple lines which is not supported.

To achieve this effect you would have to draw the cap separately and then draw the rest of the text in a path that goes around it.

Long story short: not possible in UILabel, possible, but a fair bit of work with CoreText.

The steps to do it with CoreText are:

  • create a framesetter for the single character.
  • get its bounds
  • create a path that spares out the frame of the drop cap
  • create a framesetter for the remaining characters with this path
  • draw first glyph
  • draw rest
like image 27
Cocoanetics Avatar answered Sep 24 '22 01:09

Cocoanetics