5 Replies Latest reply on Nov 14, 2015 5:19 AM by Printhouse

    Where exactly on canvas is textFrame's "top"?

    Printhouse Level 1

      I have a script putting some elements on screen — a rectangle and a couple of text items.


      While the top and left position of the rectangle falls exactly where it's supposed to, I can't quite figure out what top value of a textFrame item means. See the code and corresponding result — the text items' baselines are slightly below the top of the rectangle. Why and how can I precisely control the placement of text items, specifically the "top" value as it seems not to correspond to anything?


      // For loop
      // Box
      var dayBox = docRef.pathItems.rectangle( dayTop, dayLeft, dayWidth, dayHeight );
      dayBox.filled = false;
      dayBox.stroked = true;
      dayBox.strokeColor = newColor;
      dayBox.strokeWidth = sDay;
      // Text
      var dayNameText = docRef.textFrames.add();
      var k = new Date(year, m, d);
      var dayName = k.getDayNameShort(ypLang);
      dayNameText.contents = dayName;
      dayNameText.top = dayTop; // "top" of what?
      dayNameText.left = dayLeft;
      var dayNumberText = docRef.textFrames.add();
      dayNumberText.contents = d + 1;
      dayNumberText.top = dayTop; // ?
      dayNumberText.left = dayRight;


      Screen Shot 2015-11-09 at 10.47.03.png

        • 1. Re: Where exactly on canvas is textFrame's "top"?
          Vinicius Baptista Level 2

          Hello, Can you share your complete code? I need perform this script to try help you. Possibly the 'textFrame' behave differently than the rectangle in its coordinates.

          • 2. Re: Where exactly on canvas is textFrame's "top"?
            CarlosCanto Adobe Community Professional & MVP

            Try positioning your text frame after applying styles to it.

            • 3. Re: Where exactly on canvas is textFrame's "top"?
              Silly-V Adobe Community Professional

              Carlos is absolutely right in that your styles may be changing the top of the text after you've set the top of the text frame initially.


              For my own knowledge, I have made a simple test to try and analyze the "top" of area text.


              #target illustrator
              function test(){
                  if(app.documents.length == 0){
                      alert("Open a document firs");
                  } else if(app.documents[0].textFrames.length == 0){
                      alert("Make at least 1 text frame in the document.");
                  function marker(xy){
                      var clr = new CMYKColor();
                      clr.cyan = 0;
                      clr.magenta = 100;
                      clr.yellow = 100;
                      clr.black = 0;
                      var c = doc.pathItems.ellipse(xy[1] + 3, xy[0] - 3, 6, 6);
                      c.fillColor = clr;
                      c.filled = true;
                      c.stroked = false;
                  var doc = app.activeDocument;
                  doc.layers[0].visible = true;
                  doc.layers[0].locked = false;
                  var t = doc.textFrames[0];
                  marker([t.left, t.top]);


              Using a red circle to mark a coordinate, I have determined that the top/left coordinate of a text object honors the boundary box of the point-text aspect of a text item.

              Text top-left - Area Text.png
              In this image, the top/left of an Area Text is shown, and it's visibly above the bounding box.

              Text top-left - Point Text.png
              Now, when the text frame is converted to Point Text, using Illustrator CC, the bounding box for point text coincides with the location of the top/left marker. It is evident, that for point text, the UI-shown bounding box is determined somehow from the glyphs.


              Exploring further, it seems that the area of text which is highlighted when using text editing also honors the point-text bounding box.
              Text top-left - glyph highlight.png

              Text top-left - glyph new bounds.png
              When changing one of the glyphs, the letter "X", to a different font and bigger font size, the point-text bounds of the text frame are changed to accommodate the tallest letter.


              From this, it seems that when working off of the bounding box of area text, using areaTextItem.textPath to get the top/left would work.

              • 4. Re: Where exactly on canvas is textFrame's "top"?
                Printhouse Level 1

                Thanks! Obviously, it makes complete sense now. The style changes the appearance of text after it has been positioned — a silly mistake.

                While Carlos' was first, I marked Silly's fabulous answer as correct



                • 5. Re: Where exactly on canvas is textFrame's "top"?
                  Printhouse Level 1

                  And yes, areaText seems like the best candidate for positioning text in my case. Still, pity the .top coordinate seems unrelated to the font's metrics.