I have started using perspective and feel like I am doing something wrong. I want to make my widgets very resizable as all sorts of devices will use the final product, but I don’t want to keep adding breakpoint containers. Why is there no parameter in each component that allows it to know its own state. For example, if the component has a basis of 20px, but is currently 30px, that information would be critical. Currently I have a label which says “New South Wales” and rather than wrap when the label gets too small, I would like it to switch to “NSW”. But I cannot work out how to do this without breakpoint containers, and this is frustrating because I don’t want two labels, I want one which modifies itself. It feels like all the pieces are here, I can add a binding to the label, but what would the input be?
Instead of changing text, what about changing font size? I use rem units for everything from font sizes to basis settings. You can use media queries to set the root font size based on the orientation and screen width.
Others have also used container query units, cqh or cqw
However, to answer your question about switching text based on viewport size, you can bind to the {page.props.dimensions.viewport.width} prop.
Alternatively…
Alternatively, asking Claude for general web techniques, it recommended two labels and 2 classes with media queries:
1. CSS-based solutions (most flexible)
/* Show full text by default, abbreviation on mobile */
.psc-text-full { display: inline; }
.psc-text-short { display: none; }
@media (max-width: 768px) {
.psc-text-full { display: none; }
.psc-text-short { display: inline; }
}
<span class="psc-text-full">New South Wales</span>
<span class="psc-text-short">NSW</span>
You could fairly easily template this up in a view template
For Ignition, you’ll need to make the settings important:
.psc-text-full { display: inline !important; }
.psc-text-short { display: none !important; }
@media (max-width: 768px) {
.psc-text-full { display: none !important; }
.psc-text-short { display: inline !important; }
}
TextLabel.zip (9.1 KB)
I’ll have a go at implementing that thank you, I just don’t have too much familiarity with CSS and was hoping it would be built in functionality. Cheers.
Perspective, for better and for worse, is a pretty thin layer over the underlying web primitives. That is, a Perspective Label is (basically) just a single span element at the end of the day. The more we diverge from the underlying web primitives:
- The worse performance gets
- The harder it gets to learn for people coming from a web background
- The harder it gets to do the kind of low level customization folks like Nick take advantage of
It would definitely be easier to get started if it were all built in...but as soon as you wanted to do something we don't provide out of the box, you'd be cursing our design choices. 
Even in web design this isn’t built into the standard tools, and you have to do things like that CSS media query trick. And I’d be surprised if you could find another SCADA platform that offers this out of the box