Automatic font scaling to avoid word splitting

[giovanni.prinetti]

Hi, I have an app where a text coming from a database is displayed in a square container, the text can be composed by one or more words

Sometime if one of the word is too long it slits between two line.

One example is “Torta Pasqualina” that appears in this way

Is there a way to automatically scale the font of the container to avoid the split?

In other situation the text can be too long and is truncated like n this example

“Pasta tutti i valori usata come esempio”
where the last word is missing

Is there a way to automatically scale the font of the container to keep all the words?

Thank you
Giovanni

[Dimos_Vamvourellis]

There is no direct way, but maybe you could make it work with if conditions and counting the number of letters in the word (in the function for the letter size), But you need to make a lot of tests to dial it.

[Mihaly_Toth]

I would suggest setting the font size in the specific font’s style tab. There you have the option to set the font size to a formula. Find it here:

Then go here:

And do the formula binding with a similar formula:

IF(systemVars.dimensions.viewport.width>320, theme.$textSize_title_M.fontSize, theme.$textSize_title_S.fontSize)

Now this formula sets the font size to title type S size if the viewport is not more than 320 px and to M size if the viewport is above 320 px. Of course you could set the size to static number that would represent the size in px.

See here:

Hope this helps.

[giovanni.prinetti]

Hi, try to follow this approach but with some problem.

I use the feture split to create a list with the single words

WordList

e.g “Orange Cake”

result in a list ["orange, “cake”]

Then I try to measure the length of each word to create a list of length and then find the largest one but I was not able to find the right way to do it.
.
I want to use the function lenght() but this is not applicable to a list but only to a single text and the alternative is to create a complex structure that iterate the operation for each element and find the maximum value but it is quite long to implement.

[giovanni.prinetti]

Hi,

this partially help, because it does not change the font size according to the word length but according to the viewport size.
The approach is correct but is still missing a preliminary logic

[Dimos_Vamvourellis]

To find the maximum price, you can use MAX, but i would suggest to use this for each text size separately, using the currently repeated text length, that way, each text will have a specific size depending on its length.

[Mihaly_Toth]

In this case you can use the

MAP(yourlistoftexts, LENGTH(item))

Formula to create a list of lengths.

[Mihaly_Toth]

I understand this totally and in this case you could change the condition to something like:

LENGTH(your text)>64

This however will still not solve the issue of weird splitting of the text.
Now, this could be solved with your approach of SPLIT(). After that just repeat the text component with the result of the SPLIT() formula and set the layout of the parent container to horizontal and tick the “wrap into new row”. Oh and you might need to check the margins.

So final thoughts and put it all together.

Simply repeat the text with the SPLIT() formula. Then set the in the styling the font size to an IF(). The you can have different conditions for example:
LENGTH(your text)>64
Or
COUNT(SPLIT())>4
Or any other that would fit your need…

Hope this covers all questions.

[giovanni.prinetti]

Hi,

I try to use this function but it seems I miss something.

first I create a list of text

yourlistoftexts

then I popultate the list

SPLIT(data.TextToBeSplit, " ")

and now the list is populated

[“firsttext”, “secondtext”,“thirdtest”]

now I try to apply the MAP and LENGTH command as you suggested

MAP(yourlistoftexts, LENGTH(item))

but this does not work since the command length return a number and the list is composed bbyt text

so I added the command STRING before LENGTH

MAP(yourlistoftexts, STRING(LENGTH(item)))

now the function works and the result is

[“10”,“11”,“10”]

but I need numbers to operate otherwise MAX function does not work so I create another list LenghtOfyourlistoftexts and I want to populate with the number correspondent to the text and I know that the function NUMBER do the work but I’m not able to find a way to convert one lits to another list iterating to all the item of the list.

I also attempted to use another approach creating a list with two object one text and the other one number but in this situation I was not able to use the function SPLIT in a list of objects

[Mihaly_Toth]

Okay. Let’s go back to the original question. How to scale text and avoid weird line breaks.

This is issue when you have long words. So we need to scale the text. This is why You need to find the MAX() of the word character lengths. If I understand correctly.

I think I got it working as expected. Let me show all the settings and else:

Container settings:

Inside this container we have one single text component on the layout tree. The settings for that text component layout are these:

I have a page variable name longText. That is the one which we use here. Now this is how I set the text properties tab:

To have easy access to the formula of the repeat here it is:

MAP(SPLIT(pageVars.longText, " "), {word: item})

And finally the most important part, the style tab:

The formula here is:

IF(MAX(MAP(SPLIT(pageVars.longText, " "), LENGTH(item)))>16, theme.$textSize_text_XS.fontSize, theme.$textSize_text_XL.fontSize)

The final result of this is shown here:

Without long word:

With a long word:

Now I really don’t think I can be more of a help here if this doesn’t solve Your issue.
Have a nice day.

*Don’t mind my grammar error. It is not shrinked, but “shrunk” Sorry for that…