Widgets resized?

The typical design philosophy behind web pages is that the text remains at a constant readable level even if the container that text is in changes size; the exact opposite of what you want here. This is why text size has different options (e.g., no % unit) than other size units in CSS.

The newest snapshot versions have some recently added code that includes a screen object in the item expressions that will tell you several things including the width of the OH window, but that still doesn’t get you to the width of the text’s container. In practice, scaling text exactly with container size can only be accomplished with something beyond css (usually, extra javascript code).

You can get close by using the device object that’s available to you in the expression code. You can check whether a widget is currently being displayed on a desktop browser or a mobile browser with device.desktop. This, at least, let’s you define two different text sizes, one for desktop and one for mobile:

font-size: =(device.desktop)?(1.5vw):(some different size for mobile).

Again, with the new widget improvements in the latest snapshots, you can achieve full, proper scaling of text, but to do so, you have to embed the text in it’s own svg element like you did with the animation:

uid: demo:svg_text_scale
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-card
config:
  title: Scaling svg text
slots:
  default:
    - component: svg
      config:
        style:
          height: 20%
          width: 100%
        viewBox: 0 0 100 20
        xmlns: http://www.w3.org/2000/svg
      slots:
        default:
          - component: text
            config:
              text-anchor: middle
              x: 50
              y: 15
              content: Text here

text-scale
(Note: This won’t work in older versions because of the content config parameter, which is new.)

1 Like