Perspective - Font Scaling with SVG?

Hello all, I got thinking about font scaling in Perspective again. I was wondering is there a way for the font be put into SVG form such that it will scale like SVG? Would this be a solution to scaling issues with font? Anyway, I know there is interest in a solution (or maybe I just really want a solution :laughing:). Any thoughts, ideas, successes, or developments with font scaling in Perspective?


Note, this a continuation of the following:

I performed a really simple test with text as an SVG:

Text_Test

So far, with a basic test there is some upside:

  1. If we set the aspect ratio to xMidYMid the text never looks funny and it will scale up and or down based on the bounds of the SVG (vertical and horizontal, whichever is limiting).
  2. The text of the SVG is bindable.

Some thoughts:

  1. Could there be a feature to create an SVG for text? Something like what the piping tool can do.
  2. Could a dedicated component be created that converts text to SVG?
  3. The "viewBox" of the imported SVG does allow for a way to shorten or lengthen how much text can be shown.
  4. Could a generic SVG be created that would allow for multiline text?
  5. Is there a way we can mimic font size for text in the SVG?

It also opens up other interesting functionality.

Or even fancier!

Yep, just add the fontSize value to the style object.

Since all of this is done in the designer, all of it is able to be bound.
svgtext

Here I created a second text path and I'm using the following expression binding to switch between the two. Wouldn't really recommend doing this with text, but just because it was fun and it can be done.

if((toMillis(now(75)) % 75) >= 37,'#testPath','#testPath2')
4 Likes

What? Why not? I've converted all of my hmi's labels to wiggle like this, I think the operators are going to love it :slight_smile:

13 Likes

You could change all of your labels, so that if the text gets too long, it just bends and goes vertical, like we used to in school when we ran out of space on the line. Who needs line breaks. :rofl:

12 Likes

Regarding the actual topic though, I would be concerned that all of the text on the page will be slightly different sizes due to them scaling differently, as the SVG containers themselves quite likely will not match their default size. If they don't match their default size, then scaling will be applied to the SVG text right off the bat. At least when using Vmin and Vmax, sizing is determined by the page size which is common for all components.

1 Like

like so, though, sclaing font really isnt all that great tbh, if you suddenly are on a small device you wont be able to read anything... so make sure you give a min size

I recently updated the solution in my other topic to use rem and 2 orientation media queries Perspective dynamic font sizing - #23 by nminchin

1 Like

This is some great input!

I guess there are a few viable methods to dealing with Font Scaling:

A. Avoid Font Scaling - For example reformatting screens instead of scaling font.
B. Embrace Font Scaling - For example, having a formula to scale font
AB. A mixture of avoiding and embracing - For example reformatting and scaling


Method A:

@victordcq makes some valid points about font getting to small. Generally I have dealt with this on mobile devices with the pinch-zoom. However, it is understandable that this is undesirable. It does pose a good question: Is font scaling worth it (should we avoid it)? Also note however minimum font size for scaling can still lead to scroll bars on text.


Method B:

I had the same concern. From wishful thinking, I wish there was a way to somehow embed the label component in an svg, the thought is the following:

  • You could still use CSS functions for the primary scaling
  • The SVG could then be used for scaling if it tries to overflow (go out of the bounds).

I think doing scaling with both of these combined could work well.

Very interesting, I hadn't thought about drastically different screen resolutions (landscape widescreen versus portrait widescreen). The idea to use media queries for different calculations is pretty cool.


Lastly, as a matter of thinking I tend to lean towards Method B (Embracing Font Scaling). I'm not even sure why. Perhaps since we are using vector based graphics. Isn't one of the big upsides of vector graphics the scalability? If our graphics scale, shouldn't the text scale with it? Also, it seems that people don't have complaints about the way Vision scales graphics and fonts. Is there really no way of providing the same type of scaling response in Perspective?

Of course, I'm posing lots of these questions and thoughts from a conceptual point of view (not necessarily limiting thoughts to the bounds of items like CSS, SVG, and other items). I'm hoping some coordination and brainstorming might drive new ways of thinking and solutions.

1 Like

Oh they do, particularly graphics and component scaling. Java Swing, is notoriously bad at scaling and that is something that needs to be considered when designing a Vision project for multiple resolutions, screen scales, and/or screen sizes.

They are fundamentally different technologies. In perspective the users browser has control of the rendering and interpretation of styles, and so things can look drastically different from browser to browser.

In vision, the inner workings of the rendering are well known making it easier for people to manipulate. Also, since the client is always the same there is no guessing as to how things will appear. Designer to client is nearly WYSIWYG.

2 Likes

CSS can't know things like container sizes reliably because of how rendering order and style cascading works in the browser, fundamentally. So you would have to have JS running on the page to dynamically report the actual container size in order to run an actual dynamic font size calculation the way Vision does. But we don't allow you to write arbitrary JS in Perspective, because we didn't want folks to have to become web developers.

@PGriffith, thank you for the clarification on how Vision dynamically sizes text.

This has been a really good conversation. It appears at this point text scaling utilizing Perspective is still a challenge and there is no definitive "the way" for doing it. Some approaches for text scaling include:

A. Avoiding Text Scaling Method - Deal with the issue of scaling text by avoiding the need to scale text (for example reformatting screens instead of scaling font)

B. Embrace Text Scaling Method:

  • There are various methods people have tried for scaling text (see conversations linked which include items like CSS calculations, media queries, etc.). Each method however does seem to have some limitations.
  • Scaling by embedding text in an SVG is a way for scaling but, once again, it does have its' own set of challenges for implementation.

Thanks all for the brainstorm and discussion. Please feel free to add ideas, successes, and or implementations as you seem fit.