Dynamic font size based on the size of the widget

Apps & Services HABPanel
,
2

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.

I am now using

<div>
  <ds-widget-clock show-digital digital-format="'HH:mm'" style="color: lightgray; font-size: {{ (ngModel.sizeY * 1.5 > ngModel.sizeX) ? (ngModel.sizeX * 55/1.5) : (ngModel.sizeY * 55) }}px; font-weight: {{ ((ngModel.sizeX > 6) && (ngModel.sizeY > 4)) ? '250pt' : 'bold' }};"></ds-widget-clock>
</div>
<div>
  <ds-widget-clock show-digital digital-format="'EEE dd. MMM'" style="color: gray; font-size: {{ (ngModel.sizeY * 1.5 > ngModel.sizeX) ? (ngModel.sizeX * 20/1.5) : (ngModel.sizeY * 20) }}px;"></ds-widget-clock>
</div>

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.

1 Like