Board Game Arena

So it appears the normal method of putting text into cards is to use divs so the text can then be properly translated. This is what I am currently doing but it causes issues for the display of cards with larger amounts of text. It also will cause issues I think when translating the cards for those languages that are very "long".

I was considering just putting the text in English on the actual cards and then displaying a tool tip with the cards text translated. Would this be a normal and good alternative?

Just curious before I invest a lot of effort down this road.

Thanks,
Eric

This is just my personal opinon: I generelly prefer original images, without strings overlays, with tooltips. This gives a better feel of the game. I admit that it can be tedious to check the tooltips all the time, if there is important text on the card and you don't speak the language.

So, if there are just short texts on the card and thus it can be considered as unlikely (it can never be garantueed as we do not know all the languages) that there is not enough space on the card for any translation then the solution with the translated texts directly put into the card images may be the better choice.

Unfortunalety I have discovered many problems with string length in games where translatable texts are put into card images (apparently strings in my language German tend to be longer then the original, so often it does not fit). As you apparently won't want to cut the text, it is displayed partly outside the card. This looks ugly and breaks the immersion.

I originally did as you suggested (English text in the image), but switched to string overlays based on initial feedback. Also I allow text to overflow, but made sure it looked ok in English.

I think translation is more important in some games and I figure at worst can be disabled if required. That said have not gotten community feedback yet so we’ll see.

I think for the game you are working on translations is important. Personally I would leave it as you currently have and adjust later based on feedback (if required).

This can really depend upon the cards, so it's more or less easy depending on the game.

Usually we advise the following:
- to choose the smallest font size that is big enough to be readable. Note that having different font sizes depending on cards may not be great.
- about the font choice itself: it's great if it's possible to stick to Roboto (BGA's default) or to the game cards actual font (if it's available and free of rights).

For the title sometimes we employed 2 methods:
- For some games, we allowed the card title to be on 2 lines, even if it overlaps the card's image a little bit.
- For other games, we used the "text-overflow: ellipsis;" CSS property to "cut" the card title in a proper way.

For the text content, it should not spill out of the card:
- the font size should be chosen so that in English the text fits
- text-overflow: ellipsis; should be used so that in languages taking more space than English, the text is cut properly. In that case, the translators can adapt the text for example by using abbreviations so that the text fits, or the player can refer to the tooltip displaying the full text when there is an ellipsis.

Finally, it could be possible to use a script such as textFit (https://github.com/STRML/textFit, demo codepen https://codepen.io/chriscoyier/pen/GGQKJE) but as it would display different cards with different font sizes it would probably not look very good, which is why we have preferred text-overflow: ellipsis; until now.