search

GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.47k stars 287 forks source link

simulate translated text size expansion? #583

Closed hchiam closed 1 year ago

hchiam commented 1 year ago

When text gets translated from English to European languages, the text tends to get longer, and can cause layout bugs, especially if the layout wasn't initially designed with i18n in mind. The expansion isn't linear and is typically worse for shorter English texts (here's the reference expansion size table). It'd be nice if VisBug could also simulate this effect on layout.

How about we add the ability to simulate translated text size by adding characters? Here's a script that lets you toggle the extra characters on/off (hit Ctrl to toggle), as well as choose whether to include spaces randomly sprinkled in to simulate text wrap (hit p to toggle):

translation-text-size-expansion-simulator.js

And if you want to re-run the script by simply clicking on a bookmark, here's a bookmarklet version of that code:

translation-text-size-expansion-simulator.md

Demo:

https://drive.google.com/file/d/1k1ono_vgUAgwJu3IiAHhhlUfn6IAOgF_/view?usp=sharing

argyleink commented 1 year ago

oh interesting, this is in the "chaos plugin" category to me, where VisBug can help simulate real world chaos so you can test and harden you UI design! i've been testing similarly except I use Google Translate to actually test different languages.

i could see this being a plugin tho yeah, make it a swift task to add some text noise: /text-expand or something.

hchiam commented 1 year ago

oh interesting, this is in the "chaos plugin" category to me, where VisBug can help simulate real world chaos so you can test and harden you UI design! i've been testing similarly except I use Google Translate to actually test different languages.

i could see this being a plugin tho yeah, make it a swift task to add some text noise: /text-expand or something.

true, i can see how actual translation is better than simulated translation, especially if you know what languages you're targetting, and other situations devs might find themselves in. in other cases, this plugin might come in handy as a quick test and to conservatively estimate wider translation size expansions.

thanks! i'll set up the plugin later