Align shape objects and text to shapes

[*_Limey_*]

Hi folks,

I am very new to Illustrator but have been using Photoshop for the last 22 years. I have been scripting Photoshop (with help at times from the good people in communities like this) for about 8 years. I attempting to learn illustrator as means to an end but what I am doing involves everything to be handled by a script. I have most of the process already done but need to figure out how to align objects (shapes?) with objects and text with objects. Please excuse my ignorance when it comes to the exact vocabulary used to describe the componants of illustrator.

Below I have a visual representation of what I am trying to achieve. I have done some research and found a script that I hoped would work. However, the script throws an error. I'm not sure if it is due to the newer version of Illustrator or if I am doing something wrong. The original script by Peter Kahrel appears to no longer be available (broken link) but it is posted, Peter Kahrel's code by  jarosławz53072541  in Adobe's InDesign forum.

Breaking it down: I have 3 objects; a box, rectangle shape (A) that adjusts in length horizontally according to data being input and another shape above it (B). Above that is text, a number.

As the lower box (A) changes length, I would like the shape above it (B) to center align with right edge of the lower box. I then would like the text above to center align to the center of shape B.

In the event that the lower box expands  near the max width I need to align the right edge of the text with the right edge of the upper shape (B). This prevents the text going beyond the edge of the artboard which is a set width and can't be changed.

So, to summize; I need to be able to 

1) Horizontally center align a shape object with the right edge of another shape object.
2) Horizontally center align text with the right edge of a shape object.
3) Align the right edge of text with the left edge of a shape object.

I will be inserting the code into an existing script so any help with this in a clean and usable format that I, as a rookie can handle, would be greatfully appreciated.

Sincerely,

Limey

[femkeblanco · Accepted solution]

InDesign scripts won't work in illustrator.

Your objective is achievable, but there are many unknowns, not least how the items are to be targeted, whether the text frame is point text or area text and how this relates to the rest of your script. The snippets below target the items by name (the paths having been named A and B as per your image and the text frame arbitrarily named C) and point text is assumed. (Hopefully the reasoning is self-evident for you to reword into your script.)

var paths = app.activeDocument.pathItems;
var frames = app.activeDocument.textFrames;

// setting path A's width
var max = 100;  // max width (100 is an arbitrary number; this is for you to set)
if (paths["A"].width + paths["B"].width / 2 > max) {
    paths["A"].width = 100 - paths["B"].width / 2;
    var maxReached = true;
}

// setting path B's horizontal position
paths["B"].left = paths["A"].geometricBounds[2] - paths["B"].width / 2;

// moving frame C's horizontal position and justifying text
if (maxReached == true) {
    var dx = paths["B"].geometricBounds[2] - frames["C"].anchor[0];
    frames["C"].textRange.paragraphAttributes.justification = Justification.RIGHT;
}  else {
    var dx = (paths["B"].geometricBounds[2] - paths["B"].width / 2) - frames["C"].anchor[0];
    frames["C"].textRange.paragraphAttributes.justification = Justification.CENTER;
}
frames["C"].translate(dx);

[*_Limey_*]

Thank you femkeblanco! I'll let you know how it goes. I tried to respond with a longer message but it said I was spamming yet nothing appears to be being displayed. Trying again to at least acknowledge your reply.

Cheers,

Limey

[*_Limey_*]

Hi femkeblanco,

Just an update on how I'm doing with your code. I was able to align shape B with shape A perfectly!!

Unfortunately, the text is centering at exactly 50% of the length of shape A instead of being over the center of  B. It's as if the it's just dividing the length of A by 2 and that's where it's aligning to center. Any thoughts? I do see four places in the code snippets that show /2 calculations. Could one of them be doing it?

The other question is regarding the arbitrary var max = 100 value. Is that the maximum length in PIXELS that I want to set the before the IF statment switches to Right justifies?

Thanks,

Limey

[femkeblanco]

Values are in points (multiply by a conversion factor if you want to use mm or in).

The text frame shouldn't be related to path A. If you select your text frame and run this line

alert( app.selection[0].kind );

what does the message show (TextType.POINTTEXT, TextType.AREATEXT or undefined)?

[*_Limey_*]

Thanks femkeblanko! It works great. The problem was my fault. I had entered the path name for A when I should have used B in this line of code. It was just doing what I was telling it to and halving the with of A instead of B.

var dx = (paths["B"].geometricBounds[2] - paths["B"].width / 2) - frames["C"].anchor[0];

 Once I corrected it, the text is aligning as it shouldas long as A is less than "var = max".

When A is greater than max, the alignment of C to B is correct but it is dramatically shortning the length of A although everything is staying aligned, albeit in the wrong place. This may be something I have done (again) and I am going to examine the code carefuly to make sure I have followed your lead.

Thank you for your responce. I tried to get back to you but had issues.

I have really gone through the code but I'm not seeing the error that is causing A to always shring to the same shorter length when A goes beyond max. for me, "A" always shortens to where it's right edge is at 126.99px.

I know that value doesn't mean much to you but the fact that it always resizes to exactly the same place, no matter the value of max or the actual size of "A" requested might be significant.

I am having issues communicating. I write a reply and hit send but nothing happens. Then if I hit it again the chat says I am spamming.

Almost there!

Thanks,

Limey

[femkeblanco]

What I assumed (and what the snippet does) is that if A's width plus half B's width exceed the max, then A's width will be reduced to the max minus half B's width.

[*_Limey_*]

Sorry for the misunderstanding and if I was not clear. A should always remain accurate to the length required by the data input. 

It can expand to 100 parcent as the shape is expanding within a preselected maximum limit. The maximum number of pixels it can expant is 100 % of it's range. There is aways enought room for B to remain centered above the right edge of A. There is not however enough room for C, the text to stay centered when A is near 100%. Therefore, var max = (the distance A can expand towards 100% before C has to be right justified to prevent "going out og bounds".

Below, you can see where I placed the var max limit. When the right edge of A reaches that, C should right justify rather than center over B. There need not be a change to A or B. I hope this clears things up. 

Thank you SO much for your help.

Limey

 

[femkeblanco · Accepted solution]

In which case, you can remove the statement resetting A's width and you can simplify the conditional to (if A's width > max). 

// var max = ...;
if (paths["A"].width > max) {
    var maxReached = true;
}

I don't think text width can be calculated, so max cannot be automatically calculated.  You will have to eyeball it. 

[*_Limey_*]

Thank you again femkeblanko for your help. It works like a dream now. I set max by eye and therefore keep the text within the document. I am also going to do the same for the left side in the event that A is very short and the text is too close to the left edge of the document. I'll align the text left. I'm going to work on that on my own as it will be good practice. With what I've learned from you now I should be able to do it.

I can't thank you enough!

Limey