I am building a multi language website on ExtJS, where I have covered all the technical aspects of the multi language aspect.
How would deal with different string lengths? Lets say I design a 160px space for an specific label. That label is 120px long on Spanish, so everything ok with that; but that same label is 200px on Finnish; what would you do? trim that string? expand the original 160px space? What if we are talking about a form with several columns?
1
There is no catch-all solution. The first step is to switch to a different unit. px
is useless for text, because some users might have set a minimum font size in their browsers. The only way to adapt your layout to that is to use em
for width
and height
.
And string length is not the only problem. Line height can be an issue too. Many non-Latin scripts need more vertical space.
You cannot resolve this just with code. You have to talk with the translators, and every translation must be tested visually.
I am working on a translation software with ten thousands of users. I talk with translators and developers every day, and I have never seen a layout that fits for all languages from the start. 🙂
BTW, I think this question would fit better on ux.stackexchange.com.