Skip to content

Instantly share code, notes, and snippets.

@ldenoue
Last active October 1, 2022 09:25
Show Gist options
  • Save ldenoue/1568da06209780f7efc28967a9ecf4fa to your computer and use it in GitHub Desktop.
Save ldenoue/1568da06209780f7efc28967a9ecf4fa to your computer and use it in GitHub Desktop.
CATextLayer that scrolls text up as more text is added, constrained to n visible lines
override func viewDidLoad() {
super.viewDidLoad()
let text = """
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
"""
let fontSize = 88.0
let font = NSFont.systemFont(ofSize: fontSize)
let layer = makeScrollingTextLayer(text: text, width: 800, visibleLines: 3, font: font, timing: 0.2)
self.view.wantsLayer = true
self.view.layer?.addSublayer(layer)
}
// 3 layers: sub is the outer, mask is the inner, l is the main layer where text goes
// mask is used to hide letters from l as l's frame changes to accomodate more lines
// l's frame height gets increased so we always see the last n lines only
func makeScrollingTextLayer(text: String, width: CGFloat, visibleLines: Int, font: NSFont, timing: TimeInterval = 0.1) -> CALayer {
let l = CATextLayer()
l.isWrapped = true
l.backgroundColor = NSColor.clear.cgColor
l.foregroundColor = NSColor.white.cgColor
l.font = font
l.fontSize = font.pointSize
let attr = [NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: NSColor.white]
let attributedString = NSAttributedString(string: "1", attributes: attr)
let visibleHeight = self.frameSizeForTextLayer(width: width, string: attributedString).height * CGFloat(visibleLines)
l.string = ""
let sub = CALayer()
sub.backgroundColor = NSColor.init(red: 0, green: 0.0, blue: 0, alpha: 0.8).cgColor
sub.cornerRadius = 8.0
let paddingLeft = 16.0
let paddingTop = 8.0
sub.frame = NSRect(x: 16, y: 16, width: width + 2 * paddingLeft, height: visibleHeight + 2 * paddingTop)
self.view.frame = NSRect(x: 0, y: 0, width: sub.frame.maxX + 16, height: sub.frame.maxY + 16)
self.view.layer?.backgroundColor = NSColor.systemBlue.cgColor
l.frame = sub.bounds.insetBy(dx: paddingLeft, dy: paddingTop)
l.masksToBounds = true
sub.masksToBounds = true
// masking so when the inner layer's frame changes, it doesn't bleed outside of the padding around the outside layer
let mask = CALayer()
mask.frame = l.frame
mask.masksToBounds = true
mask.backgroundColor = NSColor.clear.cgColor
mask.addSublayer(l)
sub.addSublayer(mask)
let words = text.components(separatedBy: " ")
var total = ""
var idx = 0
Timer.scheduledTimer(withTimeInterval: timing, repeats: true) { _ in
total += words[idx] + " "
let attributedString = NSAttributedString(string: total, attributes: attr)
let height = self.frameSizeForTextLayer(width: l.bounds.width, string: attributedString).height
l.frame = NSRect(x: 0, y: 0, width: l.frame.width, height: height)
l.string = attributedString
idx = (idx + 1) % words.count
}
return sub
}
// adapted to Swift from https://rhult.github.io/articles/height-for-width-catextlayer/
func frameSizeForTextLayer(width: CGFloat, string: NSAttributedString) -> NSSize
{
let typesetter = CTTypesetterCreateWithAttributedString(string)
var offset = 0
var length = 0
var y = 0.0
while offset < string.length {
length = CTTypesetterSuggestLineBreak(typesetter, offset, width)
let line = CTTypesetterCreateLine(typesetter, CFRangeMake(offset, length))
var ascent: CGFloat = 0
var descent: CGFloat = 0
var leading: CGFloat = 0
CTLineGetTypographicBounds(line, &ascent, &descent, &leading);
offset += length
y += ascent + descent + leading;
}
return NSSize(width: width, height: ceil(y))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment