convert sketch line height into ios line 'height multiple' property - ios

My designer send me sketch file which says 'Line height: 22' for label. How can i achieve this in xcode interface builder.
Is there any way to define this line height using code or UI builder.

#bbjay did put me on the right track.
If you want to obtain the exact result of Sketch, the formula is:
paragraphStyle .lineSpacing = sketchLineHeight - font.lineHeight
Provided that the font was given sketchFontSize

I've found the following formula to work well for me.
It converts form Sketch line height to iOS line spacing:
lineSpacing = sketchLineHeight - sketchFontSize - (font.lineHeight - font.pointSize)
In code, for your case this would be:
let font = UIFont.systemFont(ofSize: 18) // or whatever font you use
textLabel.font = font
let attributedString = NSMutableAttributedString(string: "your text")
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 22 - 18 - (font.lineHeight - font.pointSize)
attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attributedString.length))
textLabel.attributedText = attributedString

Line height is coming from CSS, so your designer must have a web designer background. On the mobile platforms, we do not specify line height, but line spacing.
In general NSMutableParagraphStyle offers capabilities to modify multiline labels for iOS.
NSMutableParagraphStyle has a property called maximumLineHeight, but this will only set the maximum line height to a certain value, if the containment of the label would exceed a certain value.
To set this up in IB, you need to add the label, and change the Text property to Attributed. Than click on paragraph style icon, and set the line spacing for the label. Looking at the design, it is around 2 points of line spacing, what you need. You can either ask your designer to provide you with line spacing attribute or try to find the right line spacing value by randomly trying out different values.

In storyboard, use the Atributed style of UILabel. Below is example with 2.5 line height

Related

Label text clips at bottom when using CustomFont in iOS

I am using Custom Font in iOS application (Xamarin.Forms App). It is working fine but the text is clipped at the bottom of UILabel. It clearly cuts letter "g"
Custom Font: FuturaStd-Light.ttf
Actual Image In App:
Edited Image to ensure not height issue: Added Background color to Label to ensure it is not height issue.
I read here that to adjust ascender and descender property of Font. But still it doesn't help. Any help would be really appreciated.
Note: It is looking good if we remove custom font. The issue occurs only for the custom font that i am using.
you could try to use this:
NSMutableParagraphStyle paragraphStyle = new NSMutableParagraphStyle();
paragraphStyle.MinimumLineHeight = 24 + 1;//24 is your font size
NSMutableDictionary attributes = new NSMutableDictionary();//NSParagraphStyleAttributeName
attributes.SetValueForKey(paragraphStyle,new NSString("NSParagraphStyleAttributeName"));
label.AttributedText = new NSMutableAttributedString(label.Text,attributes);

How to decrease the lineSpacing?

I have an Attributed string and I want to decrease the standard line height of it. To do so, I need to set a negative lineSpacing to my NSMutableParagraphStyle. But it's illegal according to Apple's docs.
Fun fact is that the negative lineSpacing actually works, but causes an extra bottom spacing in the UILabel which depends on the number of lines.
Is it possible to decrease the line height without having side effects?
Use NSParagraphStyle.lineHightMultiple
https://developer.apple.com/documentation/uikit/nsparagraphstyle/1528614-lineheightmultiple
You can set the lineHeightMultiple to a value greater than 0 but less than 1 and it'll reduce line spacing.
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineHeightMultiple = 0.83 //Try different values here to see what looks best
let attrString = NSMutableAttributedString(string: "Your string")
attrString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, attrString.length))
You can also do this from storyboard:

Why does single line text have new line?

I have been using attributed text for UILabel of UITableViewCell.
Sometimes,even if text is single line but, text has new line.
My code is here
if notnullCheck(catchcopy){
//行間
let attributedText = NSMutableAttributedString(string: catchcopy!)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 5
attributedText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, attributedText.length))
self.catchcopyLabel.attributedText = attributedText
}
self.catchcopyLabel.sizeToFit()
The text height is 33 when multi line text is.
The text height is 14 when single line text is.
But sometimes, the text height is 19 when single line text is.
when line height is 19,the text has new line.
What is this problem?
The following text is debug log.
(98.0, 14.0)
勤務地表記確認
(230.0, 19.0)
ケイサイカキンなしんこうぃあ 02
Both texts are also single line.But height is not same.
Assuming you are using 'HiraKakuProN-W6' font and its size is 14.
It's not a matter of new line but of Japanese space character(全角スペース).
If you delete Japanese space character, you will get height of 14.
I have encountered this kind of strangeness since many years ago,
so I think it's BUG of HiraXXXXX-XX font.

Can't get UILabel's text to stay on multiple lines

I have a UILabel that should display text on multiple lines in case that it's too long to stay on a single line. This how I set its parameters in interface builder:
But even by doing so, the text still gets truncated:
This is how I set the text at runtime:
let text = "left button pressed 5 seconds ago, you may want to press another button now"
let attributedText = NSMutableAttributedString(string: text)
attributedText.addAttribute(NSFontAttributeName, value: UIFont.boldSystemFontOfSize(statusLabel.font.pointSize), range: (text as NSString).rangeOfString("left"))
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .ByWordWrapping
attributedText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, attributedText.length))
statusLabel.attributedText = attributedText
Like you see I even tried to add a paragraph style attribute to force the text to stay on multiple lines, but it doesn't work.
Check that you're setting the auto layout constraints so you have the top, leading and trailing spaces defined, but don't hookup a vertical height, the label will adjust itself based on the content.
Edit:

How to adjust font size of a label according to length of string and label size

I have a multi line label with a set size (300 x 300).
I want to adjust the label's font size programmatically according to how long the label's text is and how big the label is.
Here are 2 examples of the same sized labels with different length text strings
Refer to NSString.boundingRectWithSize:options:attributes:. Here you need to decrement the font size stepwise until the string will fit into the original frame.
var paragraph = NSMutableParagraphStyle()
let layout = [NSFontAttributeName:NSFont.systemFontOfSize(0), NSParagraphStyleAttributeName: paragraph, ]
paragraph.lineBreakMode = NSLineBreakMode.ByWordWrapping
var a = NSString(string: "My long text")
let rect = NSMakeSize(30, 20)
let bb = a.boundingRectWithSize(rect, options: NSStringDrawingOptions.UsesLineFragmentOrigin, attributes: layout)
Place the above in Playground and modify rect and the font to see what happens.
I know the Question is old but....
Just use the option AutoShrink and set the minimum font size/scale in the Attributes Inspector, it will scale the font as large as possible to fit the size of the label.

Resources