Jump to content

Problems with bottom alignment of table in text frame


Recommended Posts

Trying to bottom align content of a text frame. If the text box contain only variables and/or text resources it works fine using the frame controls - but I have a js created table inserted in the frame and that causes issues with vertical alignment. Top and Middle alignment works fine, but Bottom alignment does not work on Desktop or Producer (same result) - The content is moving, just not to the bottom :confused:.

 

Is there a way to make the table in the frame to bottom align? Project attached. Any help appreciated!!

Testbox_pti_1.zip

Link to comment
Share on other sites

I've run into this issue before as well. Maybe it has something to do with the 'table' markup tags, but vertical alignment doesn't seem to like it if a paragraph tag isn't the last line in the text flow. If you were to type a line underneath '«2_Colums table v2»' in the text editor, you'll notice that the line you entered is correctly aligned to the bottom of the text frame. Obviously the issue with this is that you don't want an additional line of text below the table.

 

That being said, you can still get it pretty close by inserting a new paragraph after the table with the font size set really small. Just add this to your table rule:

return myTable.MakeTags()[color="Red"] + '<p><span pointsize=0.1></span>'[/color];

I removed the "replace" in the return line because it was unnecessary – the tables are already left aligned. It's also worth noting that a pointsize of 0 is not valid.

 

I also noticed that you could probably simplify your code by creating some functions for some of the repetitive code in your table rule:

function GetTextWidth(field, font, fontSize) {
 var tm = new FusionProTextMeasure;
 tm.pointSize = (fontSize || 7) + " pt";
 tm.font = font || "Arial";
 tm.CalculateTextExtent(field);
 tm.useTags = false;
 return tm.textWidth;
}

function GetMaxWidth() {
 return Array.prototype.slice.call(arguments)
   .filter(function(s) { return s > 0 })
   .sort(function(a,b) { return a - b }).pop() || 0;
}

// Put Column A width values in array, sort and set highest as new variable
var maxAWidth = GetMaxWidth(
 GetTextWidth(Field("Company"), "Arial Bold", 7.3),
 GetTextWidth(Field("Adress 1")),
 GetTextWidth(Field("Adress 2")),
 GetTextWidth(Field("Adress 3")),
 GetTextWidth(Field("Country"))
);

var maxBWidth = GetMaxWidth(
 GetTextWidth(Field("Tel 1")),
 GetTextWidth(Field("Tel 2")),
 GetTextWidth(Field("Tel 3")),
 GetTextWidth(Field("Email")),
 GetTextWidth(Field("Web"))
);

// Set frame width total and column gutter
var frameWidth = 23669; // Total width of text frame (72x100 per inch)
var frameGutter = 750;  // Width of gutter between columns in frame (72x100 per inch)

var availableWidth = frameWidth - frameGutter - maxBWidth;
var leftCol = Math.min(maxAWidth, availableWidth);
var rightCol = maxBWidth + (availableWidth - leftCol);

// Create table
var myTable = new FPTable;
myTable.AddColumns(leftCol, frameGutter, rightCol);
var row = myTable.AddRow();
var cell = row.Cells[0];

// Declare TableMargin object to adjust margins
cell.Margins = { 'Top' : 0, 'Bottom': 0, 'Left': 0, 'Right': 0 };
row.CopyCells(0, 1, 2);

myTable.ShadingColor1 = "Yellow";
myTable.ShadingPct1 = 10;

row.SetContents(Resource("Resource1").content, '', Resource("Resource2").content);

return myTable.MakeTags() + '<p><span pointsize=0.1></span>';

Link to comment
Share on other sites

  • 3 years later...
I am using a one row table to try to align different fonts at various point sizes. Can anyone take a look at this and tell me how to accomplish this?

Please start a new thread for a new question. Also, a mock-up of what output you're trying to accomplish would be worth a thousand words.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...