# Language Translation in Perspective - Button texts/Labels alignment issue **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [May 3, 2023, 4:11am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176 "2023-05-03T04:11:01Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Rohit\_Das](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@Rohit\_Das](https://forum.inductiveautomation.com/u/Rohit_Das)\ **Post date:** [May 3, 2023, 4:11am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/1 "2023-05-03T04:11:01Z")
Hi, While doing language translation, some button texts/labels are out of alignment as below : ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/97cd18f5d286cb1c1ea920488acc9374a6d43a8b.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/507d3eb317c22ba3b4b7ddb1c5b57e6f8ace4f55.png) What is the easiest way to tackle this? ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [May 3, 2023, 4:37am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/2 "2023-05-03T04:37:46Z")
Do you want an adaptive label? Taking into account the entire page layout, a larger button might be the easiest. ---
**Author:** ![Rohit\_Das](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@Rohit\_Das](https://forum.inductiveautomation.com/u/Rohit_Das)\ **Post date:** [May 3, 2023, 4:43am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/3 "2023-05-03T04:43:30Z")
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? ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [May 3, 2023, 5:54am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/4 "2023-05-03T05:54:15Z")
But if one component gets bigger, what about nearby components? Are you using flex container? ---
**Author:** ![Rohit\_Das](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@Rohit\_Das](https://forum.inductiveautomation.com/u/Rohit_Das)\ **Post date:** [May 3, 2023, 6:14am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/5 "2023-05-03T06:14:54Z")
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 ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [May 3, 2023, 6:22am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/6 "2023-05-03T06:22:26Z")
Sorry, I misunderstand. How about styles binding to the locale or users? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c80b90084ae9c15c4c74382fa63209c813d3ab1c.png) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 3, 2023, 6:34am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/8 "2023-05-03T06:34:03Z")
> [@Rohit\_Das](#): > > Is there an expression 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: ```auto max(8, min(14, 14 - max(0, len({this.props.text}) - 9))) ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b3b51ffca8bacf454e6a3bdaca4097a38142b839.png) **Result:** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5dc2df4c82ee7503bb1b2a6c24c99070e97eb9c.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65df13f73b133726b384715f5ea5a267036118ef.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da52ce1422b70a918d7ae68f64f145afc3044702.png) 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? ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [May 3, 2023, 6:47am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/9 "2023-05-03T06:47:29Z")
That won't work. The expression based on text before translate. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a52a42300b2d872d99416884be4bac749d4cfb7b.png) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 3, 2023, 7:14am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/10 "2023-05-03T07:14:25Z")
> [@nideyijuyidong](#): > > That won't work 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. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 3, 2023, 7:31am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/11 "2023-05-03T07:31:25Z")
I got it to work by simply wrapping the prop in `translate()` Corrected expression: ```auto 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. ---
**Author:** ![nideyijuyidong](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nideyijuyidong](https://forum.inductiveautomation.com/u/nideyijuyidong)\ **Post date:** [May 3, 2023, 8:18am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/12 "2023-05-03T08:18:35Z")
> [@justinedwards.jle](#): > > This way it uses the string value based on current locale instead of the prop itself. 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. ---
**Author:** ![Rohit\_Das](https://avatars.discourse-cdn.com/v4/letter/r/a6a055/32.png) [@Rohit\_Das](https://forum.inductiveautomation.com/u/Rohit_Das)\ **Post date:** [May 3, 2023, 8:39am UTC](https://forum.inductiveautomation.com/t/language-translation-in-perspective-button-texts-labels-alignment-issue/73176/13 "2023-05-03T08:39:12Z")
Thank you, this is working fine