Skip to main content
A
Anonymous
January 4, 2018
Question

How to make text fit inside a paragraph bounding box

  • January 4, 2018
  • 2 replies
  • 4782 views

I have a JSON file like:

{
     "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui ante, euismod id quam eu."
}

The text object above contain 15 character. And, I have 6 different Photoshop file (.psd) with completely different template and design.

Each psd file have a paragraph text box of size say

1st => 600px X 600px

2nd => 500px X 500px

3rd => 400px X 400px

...

and so on. They all have different size of bounding box. (They don't have exact square size as mentioned above, in actual they are of sizes like 500px X 120px or 300px X 750px, They are of different sizes)

I am writing a script using JavaScript which take the text object from JSON and change the text content of these paragraph text box.

// Include the JSON Parser
#include json2js.js
var originalunit = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
// function to read json
function loadJson(relpath){
    var script = new File($.fileName);
    var jsonFile = new File(script.path + '/../json/' + relpath);
    jsonFile.open( 'r' );
    var str = jsonFile.read();
    jsonFile.close();
    return JSON.parse(str);
}
// Read the JSON
var json = loadJson( 'test.json' );
var docRef = app.activeDocument;
var layerRef = docRef.artLayers.getByName( 'text' );
layerRef.textItem.contents = json.text;
var textHeight = layerRef.bounds[2] - layerRef.bounds[0];
var boundHeight = layerRef.textItem.height;
var currentFontSize = layerRef.textItem.size;
currentFontSize = currentFontSize.toString().replace(" pt", "");
if(textHeight > boundHeight) {
    fitText(textHeight, boundHeight, currentFontSize, layerRef, json);
}
// function to fit text inside the  box
function fitText(textHeight, boundHeight, currentFontSize, layerRef, json){
    while(textHeight > boundHeight) {
         currentFontSize--;
         layerRef.textItem.size = currentFontSize;
         layerRef.textItem.contents = json.quotes;
         textHeight = layerRef.bounds[2] - layerRef.bounds[0];
     }
 }

I have set the font-size of text box, so that 15 character can perfectly fit in the box.

But the text object can change to any number of character, say 30, 50 or 70 character. Since, the size of the text box and the font size is fixed in the template,

How can I resize the font-size to automatically fit any number of character within the text box ?

Or, Is there any other approach to accomplish this ?

This topic has been closed for replies.

2 replies

KatrodiyaDhaval
KatrodiyaDhaval
Known Participant
April 26, 2018

hi i am using photoshop cc2018

& i have the same question : How can I resize the font-size to automatically fit any number of character within the text box ?

i have tried the above scripts, save them as script.jsx, load them to photoshop but non of them actually worked.

so can any body provide me the script that solve this problem!

Kukurykus
Kukurykus
Legend
January 4, 2018

That if you want to replace text and change size of new one to fit horizontally old text bounds:

s = (tI = (tL = (lyr = (aD = activeDocument).layers).getByName( t = 'text' )).textItem).size
aD.activeLayer = lyr.getByName(t), tW = (b = tL.bounds)[2] - b[0], tI.contents = 'new ' + t
tI.size = tW / ((b = aD.activeLayer.bounds)[2] - b[0]) * s

That to replace text, change size of new one to fit horizontally old text bounds,

and get resulted vertically centered to middle point of old one:

s = (tI = (tL = (lyr = (aD = activeDocument).layers).getByName(t = 'text' )).textItem).size
tW = (b1 = tL.bounds)[2] - b1[0], tI.contents = (trts = t + '\r' + t + ' ') + trts + t + ' ' + t
aD.activeLayer = (aL = lyr.getByName(t)), tI.size = tW / ((b2 = aL.bounds)[2] - b2[0]) * s
m2 = (b2 = aL.bounds)[1] + (b2[3] - b2[1]) / 2, m1= b1[1]+ (b1[3] - b1[1]) / 2, aL.translate(0, m1 - m2)

That to replace text, change size of new one to fit vertically old text bounds,

and get resulted horizontally centered to middle point of old one:

s = (tI = (tL = (lyr = (aD = activeDocument).layers).getByName(t = 'text' )).textItem).size
tW = (b1 = tL.bounds)[2] - b1[0], tI.contents = (trts = t + '\r' + t + ' ') + trts + t + ' ' + t
aD.activelayer=(aL=lyr.getByName(t)),tI.size=(b1[3]-b1[1])/((b2=tL.bounds)[3]-b2[1])*s
v2 = (b2 = aL.bounds)[1] + (b2[3] - b2[1]) / 2, v1= b1[1] + (b1[3] - b1[1]) / 2
h2 = b2[0] + (b2[2] - b2[0]) / 2, h1 = b1 + tW / 2, aL.translate(h1 - h2, v1 - v2)

Ps. I noticed interesting thing. When you use directely tI.content = 'text' only text in the layers changes.

But when you do txt = 'text', tI = txt then both text in layer and name of layer are changing (?!)

A
Anonymous
January 4, 2018

Hi, Kukurykus​

Thanks for the reply. But I didn't understand your code. May be because I am new to Photoshop scripting. Could you please add comments to your code ?

But here is want I am after,

There are 62 character in the box, with font size of 30 pt.

There are 99 characters with 27 pt.

Notice, how the font size is changed to fit the text content inside the box.

In the above image, there are 134 characters with 22 pt.

No matter how many character the text object in JSON have, the font size should be adjusted to fit the text content inside the box.

I am stucked from last 2 days. Please, help me.

Kukurykus

tales shifter
tales shifter
Participant
March 19, 2022

hey, Kukurykus i've tried the script you wrote in the 'edit:' but, even tho the sizes are being adapted, there is still a big gap between the paragraph size and the text.

i've tried to tweek it but i always seem to breake it, and i cant get to understand most of the code, can you coment on this code a little more or perhaps share a more accurate version? thanks in advance! you are great.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices