Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Add workaround for setting a custom lineSpacing and maxNumberOfLines to ASTextNode docs #92

Merged
merged 3 commits into from
May 3, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 80 additions & 4 deletions docs/_docs/text-node.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ _node.attributedText = string;
</pre>

<pre lang="swift" class = "swiftCode hidden">
let attrs = [NSFontAttributeName: UIFont(name: "HelveticaNeue", size: 12.0)]
let attrs = [NSFontAttributeName: UIFont(name: "HelveticaNeue", size: 12.0)]
let string = NSAttributedString(string: "Hey, here's some text.", attributes: attrs)

node = ASTextNode()
Expand All @@ -47,7 +47,7 @@ In any case where you need your text node to fit into a space that is smaller th
<pre lang="objc" class="objcCode">
_textNode = [[ASTextNode alloc] init];
_textNode.attributedText = string;
_textNode.truncationAttributedText = [[NSAttributedString alloc]
_textNode.truncationAttributedText = [[NSAttributedString alloc]
initWithString:@"¶¶¶"];
</pre>

Expand All @@ -59,7 +59,7 @@ textNode.truncationAttributedText = NSAttributedString(string: "¶¶¶")
</div>
</div>

This results in something like:
This results in something like:

<img width = "300" src = "/static/images/textNodeTruncation.png"/>

Expand Down Expand Up @@ -131,7 +131,7 @@ Conforming to `ASTextNodeDelegate` allows your class to react to various events
<pre lang="swift" class = "swiftCode hidden">
func textNode(_ textNode: ASTextNode, tappedLinkAttribute attribute: String, value: Any, at point: CGPoint, textRange: NSRange) {
guard let url = value as? URL else { return }

// the link was tapped, open it
UIApplication.shared.openURL(url)
}
Expand All @@ -148,3 +148,79 @@ In a similar way, you can react to long presses and highlighting with the follow
`– textNode:shouldLongPressLinkAttribute:value:atPoint:`


### Incorrect maximum number of lines with line spacing

Using a `NSParagraphStyle` with a non-default `lineSpacing` can cause problems if multiline text with a maximum number of lines is wanted. For example see the following code:

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
// ...
NSString *someLongString = @"...";

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = 10.0;

UIFont *font = [UIFont fontWithName:@"SomeFontName" size:15];

NSDictionary *attributes = @{
NSFontAttributeName : font,
NSParagraphStyleAttributeName: paragraphStyle
};

ASTextNode *textNode = [[ASTextNode alloc] init];
textNode.maximumNumberOfLines = 4;
textNode.attributedText = [[NSAttributedString alloc] initWithString:someLongString
attributes:attributes];
// ...
</pre>

<pre lang="swift" class = "swiftCode hidden">
let someLongString = "..."

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 10.0

let font = UIFont(name: "SomeFontName", size: 15.0)

let attributes = [
NSFontAttributeName: font,
NSParagraphStyleAttributeName: paragraphStyle
]

let textNode = ASTextNode()
textNode.maximumNumberOfLines = 4
textNode.attributedText = NSAttributedString(string: someLongString, attributes: attributes)
</pre>
</div>
</div>

`ASTextNode` uses Text Kit internally to calculate the amount to shrink needed to result in the specified maximum number of lines. Unfortunately, in certain cases this will result in the text shrinking too much in the above example; Instead of 4 lines of text, 3 lines of text and a weird gap at the bottom will show up. To get around this issue for now, you have to set the `truncationMode` explicitly to `NSLineBreakByTruncatingTail` on the text node:

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
// ...
ASTextNode *textNode = [[ASTextNode alloc] init];
textNode.maximumNumberOfLines = 4;
textNode.truncationMode = NSLineBreakByTruncatingTail;
textNode.attributedText = [[NSAttributedString alloc] initWithString:someLongString
attributes:attributes];
// ...
</pre>

<pre lang="swift" class = "swiftCode hidden">
// ...
let textNode = ASTextNode()
textNode.maximumNumberOfLines = 4
textNode.truncationMode = NSLineBreakByTruncatingTail
textNode.attributedText = NSAttributedString(string: someLongString, attributes: attributes)
//...
</pre>
</div>
</div>
```