Scaling Font size based on Container Size

Ignition Early Access
1

Hello Everyone,
I want to scale the font size based on container size.

In my case, I added the widgets to the dashboard component. In that widget view, only text labels appear. In some cases, I need to enlarge the widgets while adding them to the dashboard. At that time, I want to increase the font size based on the widget size.

When I tried with MediaQuery Style, it worked based on session size. But I need to scale the size based on the widget size.

2

No, there is no css alone that can get you to scale fontsize based on the parents container.

There are many js options… but you can’t use those in perspective…

There just one thing that might work in perspective, (That i can think of). That is for text to be but in an svg…
But getting the text to fit inside it is gonna be a lot of fiddling and not great if its dynamic text. But i suppose with a binding on the viewbox you could set the dimensions based on the elements texts length.
image

[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 40 20",
      "preserveAspectRatio": "none",
      "elements": [
        {
          "type": "text",
          "text": "hello",
          "x": 0,
          "y": 15
        }
      ]
    },
    "meta": {
      "name": "textsvg"
    },
    "position": {
      "x": 605.72,
      "y": 68.36000000000001,
      "width": 148,
      "height": 84
    },
    "custom": {}
  },
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 40 20",
      "preserveAspectRatio": "none",
      "elements": [
        {
          "type": "text",
          "text": "hello",
          "x": 0,
          "y": 15         
        }
      ]
    },
    "meta": {
      "name": "textsvg1"
    },
    "position": {
      "x": 614.87875,
      "y": 152.719375,
      "width": 65,
      "height": 38
    },
    "custom": {}
  }
]

edit:
yea that works, i guess… Is it worth the effort? i doubt it
image

3

Thank you for your great idea. It works well.

4

By the way, you can define your font size using CSS units.

I personally like vmin, but here’s an article

image
image1920Ă—1080 99.3 KB

1 Like
5

yeah the “v” units use viewport size, not the size of the parent, so they scale with the size of the window, not their container

2 Likes
6

Hi! you can use what generally speaking is a sort of consensus. Either 'em' or 'rem' if root font size is properly and responsively defined, or way better: calc(absolutefontsizeyoulike + viewportwidthgrowthfactor + viewportheightgrowthfactor). the space between the values and the sum symbol is important when using 'calc'. For example: fontSize: calc(10px + 0.1vw + 0.1vh) if used in native ignition, or font-size: calc(10px + 0.1vw + 0.1vh); if working with advanced stylesheet, css injection or css modified stylesheets for themes.