Large Text in Coordinate Container Overflow

Ignition
1

Hi,

I’m trying to place large letter in a coordinate container to use as a kind of watermark.

It seems as if this causes the container to overflow vertically at some point prior to actually exceeding the dimensions. If either the label is big or the text size is larger than some point, the coordinate container wants to scroll.

See below:

image
image716×635 23 KB

View definition:

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 600,
      "width": 600
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 507,
          "width": 581
        },
        "props": {
          "style": {
            "fontSize": 500,
            "textAlign": "center"
          },
          "text": "00"
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

How can I make a label display digits about as large as the parent container without causing overflow?

Regards,
Deon

2

Set the style.overflow on the coord container to hidden

3

I can’t do that. I want to be able to scroll when there are actually components outside the view. I just don’t want the label to cause the overflow prematurely

4

Make the coordinate container use relative sizing, and make your label 100% width?

5

Same result. It is like the text extends beyond the label dimensions. Same thing happens in width, but seemingly much earlier in height:

image

image

I tried the textOverflow:clip, but that had no effect.

Anything else I can try?

6

Oh, right. It’s the other problem. Fitting text to size inside a container is hard/impossible without Javascript:

What you can do inside Perspective easily is put your text into an SVG - then the SVG can scale the text for you.

7

This is happening because the actual text is taking up more space than you are allowing for. In your View, you are allowing a height of 0.875%, but the Label actually “requires” more than 800 pixels of height when the text is set to 600. You can adjust the dimensions all you want, but behind-the-scenes that Label is going to take up that much space.

Screen Shot 2021-03-03 at 10.43.22AM
Screen Shot 2021-03-03 at 10.43.22AM2280×1732 264 KB

8

Thanks, I’ll try the SVG.

Else I’ll just keep the label small enough to fit