How to add font attributes to a text layer

katyusha

I asked this in another post but decided that maybe I should create a separate thread to discuss the topic.
https://sketchplugins.com/d/1163-how-to-create-a-text-layer-and-change-font-family/2

Let's say I have a text layer and I'd like to manipulate the text inside with bolding, italics, and maybe an underline.

e.g. 'This is my string'

'Thi' is bold
's is' is bold and italic
' my st' is bold and underlined
'ring' is normal

I understand that currently, this is all handled in the attributedString.attributes array, so I started looking to see how I can add my own attributes and so far my research has led me to this class dump:
https://github.com/abynim/Sketch-Headers/blob/master/Headers/MSTextLayer.h

Which references a ton of great methods for MSTextLayer, specifically adding attributes. From there I continued to apple's documentation for addAttribute:
https://developer.apple.com/documentation/foundation/nsmutableattributedstring/1417080-addattribute?language=objc

But am now sort of stuck as to how I go about implementing this. My background is mainly in JS, so this bridged communication that's going on in Sketch plugin dev is still sort of new to me.

Can anyone point me into the right direction so I can go about using some of my newly found knowledge to accomplish the example above?

kevgski

You are pretty close. Here is the code that you are looking for and I’ll break down what’s going on below:

let sketch = require('sketch')
var document = sketch.getSelectedDocument()

var text = document.selectedLayers.layers[0]
// "this is my string"

let mstextlayer = text.sketchObject
let baseFont = mstextlayer.font()

let boldFont = NSFontManager.sharedFontManager().convertFont_toHaveTrait(baseFont, NSBoldFontMask)
let boldRange = NSMakeRange(1,2)

let italicBoldFont = NSFontManager.sharedFontManager().convertFont_toHaveTrait(baseFont, NSItalicFontMask|NSBoldFontMask)
let italicBoldRange = NSMakeRange(3,4)

let underlineBoldRange = NSMakeRange(7,6)

mstextlayer.addAttribute_value_forRange(NSFontAttributeName, boldFont, boldRange)
mstextlayer.addAttribute_value_forRange(NSFontAttributeName, italicBoldFont, italicBoldRange)
mstextlayer.addAttribute_value_forRange(NSUnderlineStyleAttributeName, NSUnderlineStyleSingle, underlineBoldRange)
mstextlayer.addAttribute_value_forRange(NSFontAttributeName, boldFont, underlineBoldRange)

Gets you something like this:

Explanation

Like you deduced, we will want to get down to the native sketch object, MSTextLayer (https://github.com/abynim/Sketch-Headers/blob/master/Headers/MSTextLayer.h). That object has a few useful methods:

- (void)addAttribute:(id)arg1 value:(id)arg2;
- (void)addAttributes:(id)arg1 forRange:(struct _NSRange)arg2;
- (void)setAttributes:(id)arg1 forRange:(struct _NSRange)arg2;
- (void)addAttribute:(id)arg1 value:(id)arg2 forRange:(struct _NSRange)arg3;

I’m not entirely sure how to use the first three* but I recognized the last method from NSMutableAttributedString (https://developer.apple.com/documentation/foundation/nsmutableattributedstring/1417080-addattribute?language=objc) since I’ve used it in the past. What this lets you do is specify a font attribute name (a NSAttributedStringKey), a value for that key, and a range.

To figure out the right key, value pairings you will want to look at the NSAttributedStringKey documentation (https://developer.apple.com/documentation/foundation/nsattributedstringkey?language=objc)

The attribute NSFontAttributeName takes a value type of NSFont. To mutate your currently selected font into the bold and italic variants you can do that through NSFontManager and its convertFont_toHaveTrait method.

*Perhaps someone else can comment how to use the first 3.

katyusha

kevgski

What a fantastic response, thank you so much for taking the time to write all of this up, I really appreciate it!

katyusha

kevgski Any thoughts on how to handle addAttribute_value_forRange during an iteration and if the process on this method is async?

kevgski

katyusha hmm not entirely sure what you mean. Do you have some example code?