Center two fonts of different sizes vertically in NSAttributedString

Question

I am using NSAttributedString to create a string with two different sizes. By default, its bottom alignment is as follows:

But I want to focus it vertically, for example:

To be clear, this is the only attribute string, not two or more. This is a simplified example to describe my question that I really would like to make more complex.

Answer 1

I would say that the easiest way to manipulate the NSBaselineOffsetAttributeName attribute for the text in question is:

NSBaselineOffsetAttributeName

The value of this attribute is an NSNumber object containing a floating point value indicating that the characters are offset from the baseline in points. The default value is 0.

To center, you need to understand the difference between the height of the large text and the height of the smaller text and reduce it in half, and then use this as a baseline setting.

Answer 2

Here is a working example for vertically aligning smaller text using NSBaselineOffsetAttributeName .

 NSString *bigString = @"BIG"; NSString *smallString = @"Small String"; NSString *fullString = [NSString stringWithFormat:@"%@ %@", bigString, smallString]; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:fullString]; NSRange bigStringRange = NSMakeRange(0, bigString.length); NSRange smallStringRange = NSMakeRange(bigStringRange.length, smallString.length); [string beginEditing]; //Set big string font and size [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:28.0] range:bigStringRange]; //set small string font and size [string addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:18.0] range:smallStringRange]; //Set small string baseline offset [string addAttribute:NSBaselineOffsetAttributeName value:[NSNumber numberWithFloat:3.0] //adjust this number till text appears to be centered range:smallStringRange]; [string endEditing]; 

Answer 3

Best solution computes NSBaselineOffsetAttributeName from font typography (short article https://www.raizlabs.com/dev/2015/08/advanced-ios-typography/ )

Set the attribute for the second part of the attribute string.

 secondPartAttributes[NSBaselineOffsetAttributeName] = @((firstFont.xHeight - secondFont.xHeight)/2); 

Answer 4

YasT answer in Swift:

Swift 3

 let bigString = "BIG" let smallString = "Small String" let fullString = "\(bigString) \(smallString)" let string = NSMutableAttributedString(string: fullString) let bigStringRange = NSRange(location: 0, length: bigString.utf16.count) let smallStringRange = NSRange(location: bigStringRange.length, length: smallString.utf16.count) let bigStringFontSize: CGFloat = 28 let smallStringFontSize: CGFloat = 18 string.beginEditing() string.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: bigStringFontSize), range: bigStringRange) string.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: smallStringFontSize), range: smallStringRange) string.addAttribute(NSBaselineOffsetAttributeName, value: (bigStringFontSize - smallStringFontSize) / 2, range: smallStringRange) string.endEditing() 

Swift 4

 let bigString = "BIG" let smallString = "Small String" let fullString = "\(bigString) \(smallString)" let string = NSMutableAttributedString(string: fullString) let bigStringRange = NSRange(location: 0, length: bigString.count) let smallStringRange = NSRange(location: bigStringRange.length, length: smallString.count) let bigStringFontSize: CGFloat = 28 let smallStringFontSize: CGFloat = 18 string.beginEditing() string.addAttribute(.font, value: UIFont.systemFont(ofSize: bigStringFontSize), range: bigStringRange) string.addAttribute(.font, value: UIFont.systemFont(ofSize: smallStringFontSize), range: smallStringRange) string.addAttribute(.baselineOffset, value: (bigStringFontSize - smallStringFontSize) / 2, range: smallStringRange) string.endEditing()