How to change a Text layer's font size so that the text fits the frame

bvrlt

Hello,

I'm new to Sketch plugin development, and I'm a bit stuck now on doing the following:

I have a text layer with some text in it. My plugin will change the text (localize it), but the new text might be longer. I don't want the layer to grow (it would throw out my layout), but I would like to shrink the font size so that the text fits within the layer.

Is this something possible with the Sketch API? I have not been able to find any way to do this directly, nor any way to measure text size. Would anyone have some pointers?

Thanks!
Bruno

bvrlt

I found a way of doing that:

With a text layer whose text alignment setting is "Wrap text to width and height of the text layer", the following code will decrease the font size until the text fits the layer bounds:

var maxTextFragmentY = function(textLayer) {
  return  Math.max(...textLayer.fragments.map(f => f.rect.y + f.rect.height))
}

var shrinkFontSizeToFitLayer = function(textLayer) {
    while(maxTextFragmentY(textLayer) > textLayer.frame.height) {
      console.log(textLayer.style.fontSize)

      textLayer.style.fontSize -= 1
    }
}

I hope this can help someone else!