Currently I am using a template widget to display date and time in HABpanel. Since I use different devices I’d like to create one widget for all use cases. That means the font size should automatically adapt to the dimensions of the widget.
Recently I found a possible way to achieve this. I looked at Custom widget: Current Weather and there is something used that can also be applied in my example.
However the numbers used are trial and error and only working for this specific text, so the whole solution is not that nice. I’d like to have something that automatically adjusts the text size so it stays inside of the widget, regardless of the amount of letters etc.
I had a similar problem. There is not way with pure HTML / CSS to dynamically size text in the way needed. The most common way to do it is to use Javascript / JQuery. However adding Javascript can be very cumbersome with HabPanel – particularly as Items change state.
The solution I went with was to use inline SVG images as a background for the DIV where the text needed to be displayed. Because the images are generated in-line in CSS, you can write whatever text you like into the image. Dont have access to my code at the moment, but basically, something like this: