Hi,
While doing language translation, some button texts/labels are out of alignment as below :
What is the easiest way to tackle this?
Do you want an adaptive label? Taking into account the entire page layout, a larger button might be the easiest.
this is just a sample, I've a lot of buttons and texts like this
so, changing the size of all those is not practical
Is there a way to dynamically reduce the font size, when it doesn't fit?
But if one component gets bigger, what about nearby components? Are you using flex container?
I don't want to change size of the component
only, the font size inside the component
Is there an expression to check, if the font size extends out of the width/length of component and reduce the font size accordingly
This seems like an interesting problem. As an experiment, I added the following expression to a fontSize style property on a standard button, and it worked:
max(8, min(14, 14 - max(0, len({this.props.text}) - 9)))
Result:
The font size will remain at 14 until the length of the text exceeds 9 characters. After that it will reduce by one for each additional character until the font gets down to size 8. It won't go below that. Perhaps something like this will work for you?
Uggh; you're correct. With translation, as far as the binding is concerned, the text hasn't changed. A scripted refresh wouldn't even make a difference.
I got it to work by simply wrapping the prop in translate()
Corrected expression:
max(8, min(14, 14 - max(0, len(translate({this.props.text})) - 9)))
This way it uses the string value based on current locale instead of the prop itself.
4 Likes
If we limited the text to Latin characters, it works well.
But in other languages, like Chinese, the length of translated text will be less, but the character needs a bigger font to look comfortable. This means that different languages may require different expression.
1 Like
Thank you, this is working fine
1 Like