Multi-line NSAttributedString with truncated text - ios

I need a UILabel subcass with multiline attributed text with support for links, bold styles, etc. I also need tail truncation with an ellipsis. None of the open source code that supports attributed text inside UILabels (TTTAttributedLabel, OHAttributedLabel, TTStyledTextLabel) seem to support tail truncation for multi-line text. Is there an easy way to get this?

Maybe I'm missing something, but whats wrong with? :
NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:#"test"];
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
style.lineBreakMode = NSLineBreakByTruncatingTail;
[text addAttribute:NSParagraphStyleAttributeName
value:style
range:NSMakeRange(0, text.length)];
label.attributedText = text;
This works perfectly and will add a ellipsis to the end.

Hi I am the developer of OHAttributedLabel.
There is no easy way to achieve this (as explained in the associated issue I opened on the github repository of my project), because CoreText does not offer such feature.
The only way to do this would be to implement the text layout yourself using CoreText objects (CTLine, etc) instead of using the CTFrameSetter that does this for you (but w/o managing line truncation). The idea would be to build all the CTLines to lay them out (depending on the glyphs in your NSAttributedString it contains and the word wrapping policy) one after the other and manage the ellipsis at the end yourself.
I would really appreciate if someone propose a solution to do this propery as it seems a bit of work to do and you have to manage a range of special/unusual cases too (emoji cases, fonts with odd metrics and unusual glyphs, vertical alignment, take into account the size of the ellipsis itself at the end to know when to stop).
So feel free to dig around and try to implement the framing of the lines yourself it would be really appreciated!

Based on what I found here and over at https://groups.google.com/forum/?fromgroups=#!topic/cocoa-unbound/Qin6gjYj7XU, I came up with the following which works very well.
- (void)drawString:(CFAttributedStringRef)attString inRect:(CGRect)frameRect inContext: (CGContextRef)context
{
CGContextSaveGState(context);
// Flip the coordinate system
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGFloat height = self.frame.size.height;
frameRect.origin.y = (height - frameRect.origin.y) - frameRect.size.height ;
// Create a path to render text in
// don't set any line break modes, etc, just let the frame draw as many full lines as will fit
CGMutablePathRef framePath = CGPathCreateMutable();
CGPathAddRect(framePath, nil, frameRect);
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attString);
CFRange fullStringRange = CFRangeMake(0, CFAttributedStringGetLength(attString));
CTFrameRef aFrame = CTFramesetterCreateFrame(framesetter, fullStringRange, framePath, NULL);
CFRelease(framePath);
CFArrayRef lines = CTFrameGetLines(aFrame);
CFIndex count = CFArrayGetCount(lines);
CGPoint *origins = malloc(sizeof(CGPoint)*count);
CTFrameGetLineOrigins(aFrame, CFRangeMake(0, count), origins);
// note that we only enumerate to count-1 in here-- we draw the last line separately
for (CFIndex i = 0; i < count-1; i++)
{
// draw each line in the correct position as-is
CGContextSetTextPosition(context, origins[i].x + frameRect.origin.x, origins[i].y + frameRect.origin.y);
CTLineRef line = (CTLineRef)CFArrayGetValueAtIndex(lines, i);
CTLineDraw(line, context);
}
// truncate the last line before drawing it
if (count) {
CGPoint lastOrigin = origins[count-1];
CTLineRef lastLine = CFArrayGetValueAtIndex(lines, count-1);
// truncation token is a CTLineRef itself
CFRange effectiveRange;
CFDictionaryRef stringAttrs = CFAttributedStringGetAttributes(attString, 0, &effectiveRange);
CFAttributedStringRef truncationString = CFAttributedStringCreate(NULL, CFSTR("\u2026"), stringAttrs);
CTLineRef truncationToken = CTLineCreateWithAttributedString(truncationString);
CFRelease(truncationString);
// now create the truncated line -- need to grab extra characters from the source string,
// or else the system will see the line as already fitting within the given width and
// will not truncate it.
// range to cover everything from the start of lastLine to the end of the string
CFRange rng = CFRangeMake(CTLineGetStringRange(lastLine).location, 0);
rng.length = CFAttributedStringGetLength(attString) - rng.location;
// substring with that range
CFAttributedStringRef longString = CFAttributedStringCreateWithSubstring(NULL, attString, rng);
// line for that string
CTLineRef longLine = CTLineCreateWithAttributedString(longString);
CFRelease(longString);
CTLineRef truncated = CTLineCreateTruncatedLine(longLine, frameRect.size.width, kCTLineTruncationEnd, truncationToken);
CFRelease(longLine);
CFRelease(truncationToken);
// if 'truncated' is NULL, then no truncation was required to fit it
if (truncated == NULL)
truncated = (CTLineRef)CFRetain(lastLine);
// draw it at the same offset as the non-truncated version
CGContextSetTextPosition(context, lastOrigin.x + frameRect.origin.x, lastOrigin.y + frameRect.origin.y);
CTLineDraw(truncated, context);
CFRelease(truncated);
}
free(origins);
CGContextRestoreGState(context);
}

Heres a Swift 5 version of #Toydor's answer:
let attributedString = NSMutableAttributedString(string: "my String")
let style: NSMutableParagraphStyle = NSMutableParagraphStyle()
style.lineBreakMode = .byTruncatingTail
attributedString.addAttribute(NSAttributedString.Key.paragraphStyle,
value: style,
range: NSMakeRange(0, attributedString.length))

I haven't tried this in all cases, but something like this could work for truncation:
NSAttributedString *string = self.attributedString;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CFAttributedStringRef attributedString = (__bridge CFTypeRef)string;
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attributedString);
CGPathRef path = CGPathCreateWithRect(self.bounds, NULL);
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);
BOOL needsTruncation = CTFrameGetVisibleStringRange(frame).length < string.length;
CFArrayRef lines = CTFrameGetLines(frame);
NSUInteger lineCount = CFArrayGetCount(lines);
CGPoint *origins = malloc(sizeof(CGPoint) * lineCount);
CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), origins);
for (NSUInteger i = 0; i < lineCount; i++) {
CTLineRef line = CFArrayGetValueAtIndex(lines, i);
CGPoint point = origins[i];
CGContextSetTextPosition(context, point.x, point.y);
BOOL truncate = (needsTruncation && (i == lineCount - 1));
if (!truncate) {
CTLineDraw(line, context);
}
else {
NSDictionary *attributes = [string attributesAtIndex:string.length-1 effectiveRange:NULL];
NSAttributedString *token = [[NSAttributedString alloc] initWithString:#"\u2026" attributes:attributes];
CFAttributedStringRef tokenRef = (__bridge CFAttributedStringRef)token;
CTLineRef truncationToken = CTLineCreateWithAttributedString(tokenRef);
double width = CTLineGetTypographicBounds(line, NULL, NULL, NULL) - CTLineGetTrailingWhitespaceWidth(line);
CTLineRef truncatedLine = CTLineCreateTruncatedLine(line, width-1, kCTLineTruncationEnd, truncationToken);
if (truncatedLine) { CTLineDraw(truncatedLine, context); }
else { CTLineDraw(line, context); }
if (truncationToken) { CFRelease(truncationToken); }
if (truncatedLine) { CFRelease(truncatedLine); }
}
}
free(origins);
CGPathRelease(path);
CFRelease(frame);
CFRelease(framesetter);

Multi Line Vertical Glyph With Truncated. Swift3 and Swift4 version.
Add: Xcode9.1 Swift4 Compatibility. ( use block "#if swift(>=4.0)" )
class MultiLineVerticalGlyphWithTruncated: UIView, SimpleVerticalGlyphViewProtocol {
var text:String!
var font:UIFont!
var isVertical:Bool!
func setupProperties(text: String?, font:UIFont?, isVertical:Bool) {
self.text = text ?? ""
self.font = font ?? UIFont.systemFont(ofSize: UIFont.systemFontSize)
self.isVertical = isVertical
}
override func draw(_ rect: CGRect) {
if self.text == nil {
return
}
// Create NSMutableAttributedString
let attributed = NSMutableAttributedString(string: text) // if no ruby
//let attributed = text.attributedStringWithRuby() // if with ruby, Please create custom method
#if swift(>=4.0)
attributed.addAttributes([
NSAttributedStringKey.font: font,
NSAttributedStringKey.verticalGlyphForm: isVertical,
],
range: NSMakeRange(0, attributed.length))
#else
attributed.addAttributes([
kCTFontAttributeName as String: font,
kCTVerticalFormsAttributeName as String: isVertical,
],
range: NSMakeRange(0, attributed.length))
#endif
drawContext(attributed, textDrawRect: rect, isVertical: isVertical)
}
}
protocol SimpleVerticalGlyphViewProtocol {
}
extension SimpleVerticalGlyphViewProtocol {
func drawContext(_ attributed:NSMutableAttributedString, textDrawRect:CGRect, isVertical:Bool) {
guard let context = UIGraphicsGetCurrentContext() else { return }
var path:CGPath
if isVertical {
context.rotate(by: .pi / 2)
context.scaleBy(x: 1.0, y: -1.0)
path = CGPath(rect: CGRect(x: textDrawRect.origin.y, y: textDrawRect.origin.x, width: textDrawRect.height, height: textDrawRect.width), transform: nil)
}
else {
context.textMatrix = CGAffineTransform.identity
context.translateBy(x: 0, y: textDrawRect.height)
context.scaleBy(x: 1.0, y: -1.0)
path = CGPath(rect: textDrawRect, transform: nil)
}
let framesetter = CTFramesetterCreateWithAttributedString(attributed)
let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attributed.length), path, nil)
// Check need for truncate tail
if (CTFrameGetVisibleStringRange(frame).length as Int) < attributed.length {
// Required truncate
let linesNS: NSArray = CTFrameGetLines(frame)
let linesAO: [AnyObject] = linesNS as [AnyObject]
var lines: [CTLine] = linesAO as! [CTLine]
let boundingBoxOfPath = path.boundingBoxOfPath
let lastCTLine = lines.removeLast()
let truncateString:CFAttributedString = CFAttributedStringCreate(nil, "\u{2026}" as CFString, CTFrameGetFrameAttributes(frame))
let truncateToken:CTLine = CTLineCreateWithAttributedString(truncateString)
let lineWidth = CTLineGetTypographicBounds(lastCTLine, nil, nil, nil)
let tokenWidth = CTLineGetTypographicBounds(truncateToken, nil, nil, nil)
let widthTruncationBegins = lineWidth - tokenWidth
if let truncatedLine = CTLineCreateTruncatedLine(lastCTLine, widthTruncationBegins, .end, truncateToken) {
lines.append(truncatedLine)
}
var lineOrigins = Array<CGPoint>(repeating: CGPoint.zero, count: lines.count)
CTFrameGetLineOrigins(frame, CFRange(location: 0, length: lines.count), &lineOrigins)
for (index, line) in lines.enumerated() {
context.textPosition = CGPoint(x: lineOrigins[index].x + boundingBoxOfPath.origin.x, y:lineOrigins[index].y + boundingBoxOfPath.origin.y)
CTLineDraw(line, context)
}
}
else {
// Not required truncate
CTFrameDraw(frame, context)
}
}
}
How to use
class ViewController: UIViewController {
#IBOutlet weak var multiLineVerticalGlyphWithTruncated: MultiLineVerticalGlyphWithTruncated! // UIView
let font:UIFont = UIFont(name: "HiraMinProN-W3", size: 17.0) ?? UIFont.systemFont(ofSize: 17.0)
override func viewDidLoad() {
super.viewDidLoad()
let text = "iOS 11 sets a new standard for what is already the world’s most advanced mobile operating system. It makes iPhone better than before. It makes iPad more capable than ever. And now it opens up both to amazing possibilities for augmented reality in games and apps. With iOS 11, iPhone and iPad are the most powerful, personal, and intelligent devices they’ve ever been."
// If check for Japanese
// let text = "すでに世界で最も先進的なモバイルオペレーティングシステムであるiOSに、iOS 11が新たな基準を打ち立てます。iPhoneは今まで以上に優れたものになり、iPadはかつてないほどの能力を手に入れます。さらにこれからはどちらのデバイスにも、ゲームやアプリケーションの拡張現実のための驚くような可能性が広がります。iOS 11を搭載するiPhoneとiPadは、間違いなくこれまでで最もパワフルで、最もパーソナルで、最も賢いデバイスです。"
// if not vertical text, isVertical = false
multiLineVerticalGlyphWithTruncated.setupProperties(text: text, font: font, isVertical: true)
}
}

You may be able to use follow code to have a more simple solution.
// last line.
if (_limitToNumberOfLines && count == _numberOfLines-1)
{
// check if we reach end of text.
if (lineRange.location + lineRange.length < [_text length])
{
CFDictionaryRef dict = ( CFDictionaryRef)attributes;
CFAttributedStringRef truncatedString = CFAttributedStringCreate(NULL, CFSTR("\u2026"), dict);
CTLineRef token = CTLineCreateWithAttributedString(truncatedString);
// not possible to display all text, add tail ellipsis.
CTLineRef truncatedLine = CTLineCreateTruncatedLine(line, self.bounds.size.width - 20, kCTLineTruncationEnd, token);
CFRelease(line); line = nil;
line = truncatedLine;
}
}
I'm using MTLabel in my project and it's a really nice solution for my project.

I integrated wbyoung's solution into OHAttributedLabel drawTextInRect: method if anyone is interested:
- (void)drawTextInRect:(CGRect)aRect
{
if (_attributedText)
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
// flipping the context to draw core text
// no need to flip our typographical bounds from now on
CGContextConcatCTM(ctx, CGAffineTransformScale(CGAffineTransformMakeTranslation(0, self.bounds.size.height), 1.f, -1.f));
if (self.shadowColor)
{
CGContextSetShadowWithColor(ctx, self.shadowOffset, 0.0, self.shadowColor.CGColor);
}
[self recomputeLinksInTextIfNeeded];
NSAttributedString* attributedStringToDisplay = _attributedTextWithLinks;
if (self.highlighted && self.highlightedTextColor != nil)
{
NSMutableAttributedString* mutAS = [attributedStringToDisplay mutableCopy];
[mutAS setTextColor:self.highlightedTextColor];
attributedStringToDisplay = mutAS;
(void)MRC_AUTORELEASE(mutAS);
}
if (textFrame == NULL)
{
CFAttributedStringRef cfAttrStrWithLinks = (BRIDGE_CAST CFAttributedStringRef)attributedStringToDisplay;
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(cfAttrStrWithLinks);
drawingRect = self.bounds;
if (self.centerVertically || self.extendBottomToFit)
{
CGSize sz = CTFramesetterSuggestFrameSizeWithConstraints(framesetter,CFRangeMake(0,0),NULL,CGSizeMake(drawingRect.size.width,CGFLOAT_MAX),NULL);
if (self.extendBottomToFit)
{
CGFloat delta = MAX(0.f , ceilf(sz.height - drawingRect.size.height))+ 10 /* Security margin */;
drawingRect.origin.y -= delta;
drawingRect.size.height += delta;
}
if (self.centerVertically) {
drawingRect.origin.y -= (drawingRect.size.height - sz.height)/2;
}
}
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, drawingRect);
CFRange fullStringRange = CFRangeMake(0, CFAttributedStringGetLength(cfAttrStrWithLinks));
textFrame = CTFramesetterCreateFrame(framesetter,fullStringRange, path, NULL);
CGPathRelease(path);
CFRelease(framesetter);
}
// draw highlights for activeLink
if (_activeLink)
{
[self drawActiveLinkHighlightForRect:drawingRect];
}
BOOL hasLinkFillColorSelector = [self.delegate respondsToSelector:#selector(attributedLabel:fillColorForLink:underlineStyle:)];
if (hasLinkFillColorSelector) {
[self drawInactiveLinkHighlightForRect:drawingRect];
}
if (self.truncLastLine) {
CFArrayRef lines = CTFrameGetLines(textFrame);
CFIndex count = MIN(CFArrayGetCount(lines),floor(self.size.height/self.font.lineHeight));
CGPoint *origins = malloc(sizeof(CGPoint)*count);
CTFrameGetLineOrigins(textFrame, CFRangeMake(0, count), origins);
// note that we only enumerate to count-1 in here-- we draw the last line separately
for (CFIndex i = 0; i < count-1; i++)
{
// draw each line in the correct position as-is
CGContextSetTextPosition(ctx, origins[i].x + drawingRect.origin.x, origins[i].y + drawingRect.origin.y);
CTLineRef line = (CTLineRef)CFArrayGetValueAtIndex(lines, i);
CTLineDraw(line, ctx);
}
// truncate the last line before drawing it
if (count) {
CGPoint lastOrigin = origins[count-1];
CTLineRef lastLine = CFArrayGetValueAtIndex(lines, count-1);
// truncation token is a CTLineRef itself
CFRange effectiveRange;
CFDictionaryRef stringAttrs = CFAttributedStringGetAttributes((BRIDGE_CAST CFAttributedStringRef)_attributedTextWithLinks, 0, &effectiveRange);
CFAttributedStringRef truncationString = CFAttributedStringCreate(NULL, CFSTR("\u2026"), stringAttrs);
CTLineRef truncationToken = CTLineCreateWithAttributedString(truncationString);
CFRelease(truncationString);
// now create the truncated line -- need to grab extra characters from the source string,
// or else the system will see the line as already fitting within the given width and
// will not truncate it.
// range to cover everything from the start of lastLine to the end of the string
CFRange rng = CFRangeMake(CTLineGetStringRange(lastLine).location, 0);
rng.length = CFAttributedStringGetLength((BRIDGE_CAST CFAttributedStringRef)_attributedTextWithLinks) - rng.location;
// substring with that range
CFAttributedStringRef longString = CFAttributedStringCreateWithSubstring(NULL, (BRIDGE_CAST CFAttributedStringRef)_attributedTextWithLinks, rng);
// line for that string
CTLineRef longLine = CTLineCreateWithAttributedString(longString);
CFRelease(longString);
CTLineRef truncated = CTLineCreateTruncatedLine(longLine, drawingRect.size.width, kCTLineTruncationEnd, truncationToken);
CFRelease(longLine);
CFRelease(truncationToken);
// if 'truncated' is NULL, then no truncation was required to fit it
if (truncated == NULL){
truncated = (CTLineRef)CFRetain(lastLine);
}
// draw it at the same offset as the non-truncated version
CGContextSetTextPosition(ctx, lastOrigin.x + drawingRect.origin.x, lastOrigin.y + drawingRect.origin.y);
CTLineDraw(truncated, ctx);
CFRelease(truncated);
}
free(origins);
}
else{
CTFrameDraw(textFrame, ctx);
}
CGContextRestoreGState(ctx);
} else {
[super drawTextInRect:aRect];
}
}

Ran into this issue here in 2021.
I wrapped #Toydor's and #gypsyDev's answer into a UILabel extension so it can be applied where needed. Swift 5.
extension UILabel {
func ensureAttributedTextShowsTruncation() {
guard let text = attributedText else { return }
let attributedString = NSMutableAttributedString(attributedString: text)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail
attributedString.addAttribute(.paragraphStyle,
value: paragraphStyle,
range: NSRange(location: 0, length: attributedString.length))
attributedText = attributedString
}
}

I used as sample MTLabel. It allows to manage line height.
I needed the draw method exactly, so i just put away most stuff i did not need.
This method allows me to draw multilined text in rect with tail truncation.
CGRect CTLineGetTypographicBoundsAsRect(CTLineRef line, CGPoint lineOrigin)
{
CGFloat ascent = 0;
CGFloat descent = 0;
CGFloat leading = 0;
CGFloat width = CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
CGFloat height = ascent + descent;
return CGRectMake(lineOrigin.x,
lineOrigin.y - descent,
width,
height);
}
- (void)drawText:(NSString*) text InRect:(CGRect)rect withFont:(UIFont*)aFont inContext:(CGContextRef)context {
if (!text) {
return;
}
BOOL _limitToNumberOfLines = YES;
int _numberOfLines = 2;
float _lineHeight = 22;
//Create a CoreText font object with name and size from the UIKit one
CTFontRef font = CTFontCreateWithName((CFStringRef)aFont.fontName ,
aFont.pointSize,
NULL);
//Setup the attributes dictionary with font and color
NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
(id)font, (id)kCTFontAttributeName,
[UIColor lightGrayColor].CGColor, kCTForegroundColorAttributeName,
nil];
NSAttributedString *attributedString = [[[NSAttributedString alloc]
initWithString:text
attributes:attributes] autorelease];
CFRelease(font);
//Create a TypeSetter object with the attributed text created earlier on
CTTypesetterRef typeSetter = CTTypesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);
//Start drawing from the upper side of view (the context is flipped, so we need to grab the height to do so)
CGFloat y = self.bounds.origin.y + self.bounds.size.height - rect.origin.y - aFont.ascender;
BOOL shouldDrawAlong = YES;
int count = 0;
CFIndex currentIndex = 0;
float _textHeight = 0;
CGContextSaveGState(context);
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
//Start drawing lines until we run out of text
while (shouldDrawAlong) {
//Get CoreText to suggest a proper place to place the line break
CFIndex lineLength = CTTypesetterSuggestLineBreak(typeSetter,
currentIndex,
rect.size.width);
//Create a new line with from current index to line-break index
CFRange lineRange = CFRangeMake(currentIndex, lineLength);
CTLineRef line = CTTypesetterCreateLine(typeSetter, lineRange);
//Check to see if our index didn't exceed the text, and if should limit to number of lines
if (currentIndex + lineLength >= [text length])
{
shouldDrawAlong = NO;
}
else
{
if (!(_limitToNumberOfLines && count < _numberOfLines-1))
{
int i = 0;
if ([[[text substringWithRange:NSMakeRange(currentIndex, lineLength)] stringByAppendingString:#"…"] sizeWithFont:aFont].width > rect.size.width)
{
i--;
while ([[[text substringWithRange:NSMakeRange(currentIndex, lineLength + i)] stringByAppendingString:#"…"] sizeWithFont:aFont].width > rect.size.width)
{
i--;
}
}
else
{
i++;
while ([[[text substringWithRange:NSMakeRange(currentIndex, lineLength + i)] stringByAppendingString:#"…"] sizeWithFont:aFont].width < rect.size.width)
{
i++;
}
i--;
}
attributedString = [[[NSAttributedString alloc] initWithString:[[text substringWithRange:NSMakeRange(currentIndex, lineLength + i)] stringByAppendingString:#"…"] attributes:attributes] autorelease];
CFRelease(typeSetter);
typeSetter = CTTypesetterCreateWithAttributedString((CFAttributedStringRef)attributedString);
CFRelease(line);
CFRange lineRange = CFRangeMake(0, 0);
line = CTTypesetterCreateLine(typeSetter, lineRange);
shouldDrawAlong = NO;
}
}
CGFloat x = rect.origin.x;
//Setup the line position
CGContextSetTextPosition(context, x, y);
CTLineDraw(line, context);
count++;
CFRelease(line);
y -= _lineHeight;
currentIndex += lineLength;
_textHeight += _lineHeight;
}
CFRelease(typeSetter);
CGContextRestoreGState(context);
}

Related

The height of the weex <text> component is not accurate?

The current WeexSDK version 0.18.0,I use show similar effect on the simulator and the real machine and the text can't be fully displayed as shown below.
Also I've added the script to show how to calculate the height of the text component in source code is done. suggestSize.heightis always the height I want, but this code is only executed under iOS10. The value of totalHeight is always worse when I have more text lines than iOS10. How do I solve this?
The effect is as follows:
The source code:
- (CGSize)calculateTextHeightWithWidth:(CGFloat)aWidth
{
CGFloat totalHeight = 0;
CGSize suggestSize = CGSizeZero;
NSAttributedString * attributedStringCpy = [self ctAttributedString];
if (!attributedStringCpy) {
return CGSizeZero;
}
if (isnan(aWidth)) {
aWidth = CGFLOAT_MAX;
}
aWidth = [attributedStringCpy boundingRectWithSize:CGSizeMake(aWidth, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading context:nil].size.width;
/* Must get ceil of aWidth. Or core text may not return correct bounds.
Maybe aWidth without ceiling triggered some critical conditions. */
aWidth = ceil(aWidth);
CTFramesetterRef ctframesetterRef = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)(attributedStringCpy));
suggestSize = CTFramesetterSuggestFrameSizeWithConstraints(ctframesetterRef, CFRangeMake(0, 0), NULL, CGSizeMake(aWidth, MAXFLOAT), NULL);
if (_lines == 0) {
// If not line limit use suggestSize directly.
CFRelease(ctframesetterRef);
return CGSizeMake(aWidth, suggestSize.height);
}
CGMutablePathRef path = NULL;
path = CGPathCreateMutable();
// sufficient height to draw text
CGPathAddRect(path, NULL, CGRectMake(0, 0, aWidth, suggestSize.height * 10));
CTFrameRef frameRef = NULL;
frameRef = CTFramesetterCreateFrame(ctframesetterRef, CFRangeMake(0, attributedStringCpy.length), path, NULL);
CGPathRelease(path);
CFRelease(ctframesetterRef);
if (NULL == frameRef) {
//try to protect unexpected crash.
return suggestSize;
}
CFArrayRef lines = CTFrameGetLines(frameRef);
CFIndex lineCount = CFArrayGetCount(lines);
CGFloat ascent = 0;
CGFloat descent = 0;
CGFloat leading = 0;
// height = ascent + descent + lineCount*leading
// ignore linespaing
NSUInteger actualLineCount = 0;
for (CFIndex lineIndex = 0; (!_lines|| lineIndex < _lines) && lineIndex < lineCount; lineIndex ++)
{
CTLineRef lineRef = NULL;
lineRef = (CTLineRef)CFArrayGetValueAtIndex(lines, lineIndex);
CTLineGetTypographicBounds(lineRef, &ascent, &descent, &leading);
totalHeight += ascent + descent;
actualLineCount ++;
}
totalHeight = totalHeight + actualLineCount * leading;
CFRelease(frameRef);
if (WX_SYS_VERSION_LESS_THAN(#"10.0")) {
// there is something wrong with coreText drawing text height, trying to fix this with more efficent way.
if(actualLineCount && actualLineCount < lineCount) {
suggestSize.height = suggestSize.height * actualLineCount / lineCount;
}
return CGSizeMake(aWidth, suggestSize.height);
}
return CGSizeMake(aWidth, totalHeight);
}

CTFramesetterSuggestFrameSizeWithConstraints returns incorrect height when zoom out?

I'm work with EGOTextView.I set the textContentView for viewForZoomingInScrollView.when I zoom it out and typing.It sometimes returns a incorrect height. Here is what I am doing:
CTFramesetterRef framesetter = _framesetter;
CFAttributedStringRef attributedStringRef=(CFAttributedStringRef)self.attributedString;
_framesetter = CTFramesetterCreateWithAttributedString(attributedStringRef);
if (framesetter!=NULL) {
CFRelease(framesetter);
}
CGRect rect = self.textContextView.frame;
CGFloat height = [self heightForAttributedString:self.attributedString forWidth:rect.size.width];
rect.size.height = (height + self.font.lineHeight * 2) * pageScale;
//pageScale is the scale scrollview end zooming
- (CGFloat)boundingHeightForWidth:(CGFloat)width {
CGSize suggestedSize = CTFramesetterSuggestFrameSizeWithConstraints(_framesetter, CFRangeMake(0, 0), NULL, CGSizeMake(width , CGFLOAT_MAX), NULL);
return suggestedSize.height;
}
And I try this method too:
+(CGFloat)heightForAttributedString:(NSAttributedString *)attrString forWidth:(CGFloat)inWidth
{
CGFloat H = 0;
// Create the framesetter with the attributed string.
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString( (CFMutableAttributedStringRef) attrString);
CGRect box = CGRectMake(0,0, inWidth, CGFLOAT_MAX);
CFIndex startIndex = 0;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, box);
// Create a frame for this column and draw it.
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(startIndex, 0), path, NULL);
// Start the next frame at the first character not visible in this frame.
//CFRange frameRange = CTFrameGetVisibleStringRange(frame);
//startIndex += frameRange.length;
CFArrayRef lineArray = CTFrameGetLines(frame);
CFIndex j = 0, lineCount = CFArrayGetCount(lineArray);
CGFloat h, ascent, descent, leading;
for (j=0; j < lineCount; j++)
{
CTLineRef currentLine = (CTLineRef)CFArrayGetValueAtIndex(lineArray, j);
CTLineGetTypographicBounds(currentLine, &ascent, &descent, &leading);
h = ascent + descent + leading;
NSLog(#"%f", h);
H+=h;
}
CFRelease(frame);
CFRelease(path);
CFRelease(framesetter);
return H;
}
But it seems always return a wrong height when you typing text after zoom.
Is there any other/better way to figure out the correct height for my attributed string? Thanks!
I also run in this case, solved it and wrote a category, which works for me in all cases. See my answer in If you use zero as height, it does not restrict the height to any height. I wrote a category for this issue, which works for me in all cases. See iOS UITableView with dynamic text and images rendered together (NSAttributedString + images)

Layout text on the image with Core Text

guys.
I have do rich text eidtor some work with Core Text.I want to keep fixed line height and it truely can be done with the following code:
NSMutableAttributedString *_attributedText = [[NSMutableAttributedString alloc]initWithAttributedString:_attributedString] ;
CGFloat lineSpace=20;
CTParagraphStyleSetting lineSpaceStyle;
lineSpaceStyle.spec=kCTParagraphStyleSpecifierMaximumLineHeight;
lineSpaceStyle.valueSize=sizeof(lineSpace);
lineSpaceStyle.value=&lineSpace;
//CTLineBreakMode lineBreakMode = kCTLineBreakByCharWrapping;
CTParagraphStyleSetting settings[]={
lineSpaceStyle,
// {.spec = kCTParagraphStyleSpecifierLineBreakMode, .valueSize = sizeof(CTLineBreakMode), .value = (const void*)&lineBreakMode},
};
CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(settings, sizeof(settings));
[_attributedText addAttribute:(id)kCTParagraphStyleAttributeName value:(id)paragraphStyle range:NSMakeRange(0, _attributedText.mutableString.length)];
_attributedString = [_attributedText copy];
[_attributedText release];
_attributedText = nil;
CFRelease(paragraphStyle);
Then I want to insert an image into it.And I want type some text on the image with following code:
CTRunDelegateCallbacks callbacks = {
.version = kCTRunDelegateVersion1,
.dealloc = AttachmentRunDelegateDealloc,
.getAscent = AttachmentRunDelegateGetAscent,
.getDescent = AttachmentRunDelegateGetDescent,
.getWidth = AttachmentRunDelegateGetWidth
};
CTRunDelegateRef Rundelegate = CTRunDelegateCreate(&callbacks, [image retain]); //3
NSMutableDictionary *attrDictionaryDelegate = [NSMutableDictionary dictionaryWithDictionary:self.defaultAttributes];
[attrDictionaryDelegate setObject:image
forKey:EGOTextAttachmentAttributeName];
[attrDictionaryDelegate setObject:(id)Rundelegate
forKey:(NSString*)kCTRunDelegateAttributeName];
[attrDictionaryDelegate setObject:fulltext
forKey:EGOTextAttachmentOriginStringKey];
NSAttributedString *newString = [[NSAttributedString alloc] initWithString:EGOTextAttachmentPlaceholderString
attributes:attrDictionaryDelegate];
[attrString replaceCharactersInRange:[result resultByAdjustingRangesWithOffset:attrString.length-astring.length].range
withAttributedString:newString];
In another words,is there some ways to let the text layout on the image with Core Text ?????
Anyone????
Very Easy
keep fixed line height with CoreText,
let the text layout on the image by image.draw(in: frame) ,
maybe frame calculated with CoreText .
here is an example, put a background image below the first word in the line
// here is set up
guard let ctx = UIGraphicsGetCurrentContext(), let f = frameRef else{
return
}
let xHigh = bounds.size.height
ctx.textMatrix = CGAffineTransform.identity
ctx.translateBy(x: 0, y: xHigh)
ctx.scaleBy(x: 1.0, y: -1.0)
guard let lines = CTFrameGetLines(f) as? [CTLine] else{
return
}
// here is an image
let bgGrip = UIImage(named: "grip")
if let pieces = CTLineGetGlyphRuns(line) as? [CTRun]{
let pieceCnt = pieces.count
for i in 0..<pieceCnt{
var p = lineOrigin
if i == 0{
var frame = imageFrame
frame.origin.y = lineOrigin.y + lineAscent - imageHeight + TextContentConst.offsetP.y
bgGrip?.draw(in: frame)
p.x += offsetX
}
ctx.textPosition = p
CTRunDraw(pieces[i], ctx, CFRange(location: 0, length: 0))
}
}

CATextlayer change size of FONT to fit the frame

I have a CATextlayer of a certain size and NSAttributedString text of unknown length.
I need to adjust the font-size so the text fits the frame (not vice versa :)
Any ideas where to start? :)
[Edit] as nall points out, I can determine the string length, of course, it's some text entered by the user that I need to fit into a box of fixed size.
Working for Swift 5 clean solution.
1) Extend String
extension String {
func size(OfFont font: UIFont) -> CGSize {
return (self as NSString).size(withAttributes: [NSAttributedString.Key.font: font])
}
}
2) Subclass the CATextLayer
class DynamicTextLayer : CATextLayer {
var adjustsFontSizeToFitWidth = false
override func layoutSublayers() {
super.layoutSublayers()
if adjustsFontSizeToFitWidth {
fitToFrame()
}
}
func fitToFrame(){
// Calculates the string size.
var stringSize: CGSize {
get { return (string as? String)!.size(OfFont: UIFont(name: (font as! UIFont).fontName, size: fontSize)!) }
}
// Adds inset from the borders. Optional
let inset: CGFloat = 2
// Decreases the font size until criteria met
while frame.width < stringSize.width + inset {
fontSize -= 1
}
}
}
3) Now go to your code and instead of CATextLayer use DynamicTextLayer
textLayer = DynamicTextLayer()
textLayer?.alignmentMode = .center
textLayer?.fontSize = 40
textLayer?.string = "Example"
textLayer?.adjustsFontSizeToFitWidth = true
I achieved it by doing this:
float fontSize = InitialFontSize;
UIFont *myFont = [UIFont boldSystemFontOfSize:fontSize];
CGSize myFontSize = [YourTextHere sizeWithFont:myFont];
while (myFontSize.width >= MaximunWidth) {
fontSize -= 0.1f;
myFont = [UIFont boldSystemFontOfSize:fontSize];
myFontSize = [YourTextHere sizeWithFont:myFont];
}
CATextLayer *textLayer = [CATextLayer layer];
[textLayer setFrame:CGRectMake(MaximunWidth - myFontSize.width / 2, MaximunHeight - myFontSize.height / 2, myFontSize.width, myFontSize.height)];
[textLayer setFontSize:fontSize];
[textLayer setString:YourTextHere];
[textLayer setAlignmentMode:kCAAlignmentCenter];
I ended up doing this:
textlayer is a CATextlayer
theString is a NSMutableAttributedString
And yes, it's not very elegant and could definitely be improved ;)
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)theString);
CGRect columnRect = CGRectMake(0, 0 , 320, 150);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, columnRect);
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);
CFRange frameRange = CTFrameGetVisibleStringRange(frame);
int fontSize = 18;
while(theString.string.length > frameRange.length){
fontSize--;
CFStringRef fontName = (__bridge CFStringRef)[defs objectForKey:#"font"];
CTFontRef font = CTFontCreateWithName(fontName, fontSize, NULL);
[theString addAttribute:(NSString *)kCTFontAttributeName
value:(__bridge id)font
range:NSMakeRange(0, theString.string.length)];
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)theString);
CGRect columnRect = CGRectMake(0, 0 , 320, 150);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, columnRect);
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);
frameRange = CTFrameGetVisibleStringRange(frame);
textLayer.string = theString;
}
CATextLayer *textLayer;
[textLayer setWrapped: TRUE];
This will hopefully will work

Dynamically change view height with Core Text

I have a view in which I want to draw a text with Text Core (on the iPad). When text grown up I'd like to increase a height of the view, but I don't know how to calculate needed height of frame.
I use it to draw a text in drawRect method:
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)currentTexts);
CGMutablePathRef textPath = CGPathCreateMutable();
CGRect textRect = CGRectMake(PADDING, PADDING, self.frame.size.width - 2 * PADDING, self.frame.size.height - 2 * PADDING);
CGPathAddRect(textPath, NULL, textRect);
CTFrameRef textFrame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), textPath, NULL);
CTFrameDraw(textFrame, context);
CFRelease(textFrame);
CGPathRelease(textPath);
CFRelease(framesetter);
I tried to get a height of text using sizeWithFont and also that:
- (CGSize) measureFrame: (CTFrameRef) frame
{
CGPathRef framePath = CTFrameGetPath(frame);
CGRect frameRect = CGPathGetBoundingBox(framePath);
CFArrayRef lines = CTFrameGetLines(frame);
CFIndex numLines = CFArrayGetCount(lines);
CGFloat maxWidth = 0;
CGFloat textHeight = 0;
// Now run through each line determining the maximum width of all the lines.
// We special case the last line of text. While we've got it's descent handy,
// we'll use it to calculate the typographic height of the text as well.
CFIndex lastLineIndex = numLines - 1;
for(CFIndex index = 0; index < numLines; index++)
{
CGFloat ascent, descent, leading, width;
CTLineRef line = (CTLineRef) CFArrayGetValueAtIndex(lines, index);
width = CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
if(width > maxWidth)
{
maxWidth = width;
}
if(index == lastLineIndex)
{
// Get the origin of the last line. We add the descent to this
// (below) to get the bottom edge of the last line of text.
CGPoint lastLineOrigin;
CTFrameGetLineOrigins(frame, CFRangeMake(lastLineIndex, 1), &lastLineOrigin);
// The height needed to draw the text is from the bottom of the last line
// to the top of the frame.
textHeight = CGRectGetMaxY(frameRect) - lastLineOrigin.y + descent;
}
}
// For some text the exact typographic bounds is a fraction of a point too
// small to fit the text when it is put into a context. We go ahead and round
// the returned drawing area up to the nearest point. This takes care of the
// discrepencies.
return CGSizeMake(ceil(maxWidth), ceil(textHeight));
}
I use that to create an attrubuted string:
CTParagraphStyleSetting setting[1] = {
{kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(CGFloat), &minimumLineSpacing}
};
CTParagraphStyleRef paragraphStyle = CTParagraphStyleCreate(setting, 1);
NSDictionary *attr = [NSDictionary dictionaryWithObjectsAndKeys:
(id)textColor.CGColor, kCTForegroundColorAttributeName,
(id)currentFont, kCTFontAttributeName,
(id)paragraphStyle, kCTParagraphStyleAttributeName,
nil];
When I use sizeWithFont, at the begin everything is ok, but when text has more lines, the frame is bigger and bigger than a text and I want it to fit exactly the text. How can I make it?
To calculate the height of the text, have you tried using CTFramesetterSuggestFrameSizeWithConstraints ?
http://foobarpig.com/iphone/using-ctframesettersuggestframesizewithconstraints-and-sizewithfont-to-calculate-text-height.html

Resources