How to make text fit inside a paragraph bounding box
Posted: Thu Jan 04, 2018 10:51 am
I have a JSON file like:
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.
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 do this efficiently ?
Code: Select all
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dui ante, euismod id quam eu. "
}
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.
Code: Select all
// Include the JSON Parser
#include json2js.js
// 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.quotes;
var textHeight = layerRef.bounds[3] - layerRef.bounds[1];
var boundHeight = layerRef.textItem.height;
var currentFontSize = layerRef.textItem.size;
currentFontSize = currentFontSize.toString().replace(" pt", "");
if(textHeight > boundHeight) {
fitText(textHeight, boundHeight, currentFontSize, layerRef);
}
//function to fit text inside the box
function fitText(textHeight, boundHeight, currentFontSize, layerRef){
while(textHeight > boundHeight) {
// Decrease Font size to make text fit inside bounding box
currentFontSize--;
layerRef.textItem.size = currentFontSize;
textHeight = layerRef.bounds[3] - layerRef.bounds[1];
}
}
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 do this efficiently ?