Vision Inline CSS Styling?

What inline CSS styling is supported in Vision for labels?
It doesn’t look like any of the responsive stuff works :frowning: I’ve never really paid much attention to this prior to Perspective, but I notice that you can use things like:
<p style="font-size:15px;font-style:italic;">
Using viewport units in font-size doesn’t seem to do anything though:
<p style="font-size:15vh;font-style:italic;">

Not entirely certain, but it may be that the components do not support relative sizing. Since, the components are not traditional HTML containers, and the HTML is used more as a way of styling the text inside of the component, I am not sure that the components are aware of the viewport.

However, did you try resizing the label to see if the font-size changes with the component height?

HTML 3.2, straight outta 1996 :slight_smile:

3 Likes

Haha, nice :slight_smile:

Wow, this brings me back… back when ‘fancy’ tessellated backgrounds were all the rage, and webpages were literally just boring text and maybe some inline images. And those embossed line separators :laughing:

Any idea if there is a line-height? I can’t seem to find anything; I’ve searched for ‘spacing’ and ‘height’ :thinking:

https://www.w3.org/TR/2018/SPSD-html32-20180315/

I’m also looking to adjust line height, have you found a solution?

Perspective allows line height adjustment (Style Reference - Ignition User Manual 8.0 - Ignition Documentation), does that mean we can use HTML / CSS in Vision to attain something similar? Or is that some custom property Ignition uses in Perspective, and not inherent in CSS / HTML?

Is something like this feasible? How to Add or Reduce Space Between Lines of Text Using Just HTML and CSS | by Tremaine Eto | The Startup | Medium.

I can’t say I really understand the relationship between CSS, HTML, and how Vision or Perspective interacts with either.

TL/DR:
No, vision has almost zero support for CSS, and some support for an antiquated HTML standard. Perspective has support for modern HTML/CSS but doesn't really come into play when working with Vision. They are very different technologies

Vision uses Java Swing, it is running in a client application rendering everything. You are limited to what the components support, which AFAIK is still HTML 3.2, and Not all components support that.

Perspective on the other hand is flat out HTML 5(I think)/CSS/JavaScript. You design a "Page" in the designer and through some magic on the gateway it is translated into the needed HTML (and required resources) and served to the browser which then renders it based on it's own implementation. The designer gives us access to the HTML through perspective containers and components, and also some access to the CSS with style properties and style classes. More advanced CSS can be done with theme files. Currently we have no control over the JavaScript, (at least outside of module development).

That's not to say what you're attempting to do isn't possible, it may very well be. In fact, Vision is quite flexible and if your willing to put in the time you could create your own component and add the capability.

.