HI guys! I’m doing an emotions wheel app for Connection codes coaches on zoom! Everything was working fine until I applied a function for different languages in the emotions wheel! When I click on a different language, all the text inside the wheel goes crazy and no matter what I do, nothing seems to fix it! I’d love to be able to manipulate the text that appears in the wheel according to its language but I can’t! I’m so frustarted! Hopefully someone can help me!
Here’s the project!: https://cew-zoom-app.glitch.me
The code: Glitch :･ﾟ✧
can you walk us through how the language changer is meant to work and how the text “goes crazy”?
Yeah so basically, the emotions are placed inside the wheel in 8 different segments and I adjusted their position on css to have them all fit their given section in English but when I switch to Spanish or German all the emotions words go out of place. I tried having some js code combined with html and then with css to update it dynamically but nothing seemed to work. I’m about to try just doing all of it inside js! But that’s basically what’s happening.
ok I think I have this tracked down. you have them positioned using transform: translate(xxx%, yyy%). according to the spec of transform, “Percentages … refer to the size of bounding box.”
which for each word changes when the text changes:
Joy <— that wide
Alegria <— way wider
so that’s why all the positioning goes—apt the way you put it—crazy.
I’d suggest you convert these positions maybe to pixels, so that at least it doesn’t change around based on how long the word is. e.g. “Joy” is 34.4167px measured on my computer, so translate(280%, 140%) converts to translate(96px, 48px). or something…
3 Likes
That’s genius! I’ll try it as soon as I have time to get my hands on it again and get back to you! Thank youuuuuu!
Hi wh0!!! I just tried using the pixels method you gave me and it worked! Thank you so much!
2 Likes