Character names cut in italian

[Theovorn]

Character names cut in italian

[bhollis]

Thanks for the research. Maybe for now we just need to bump the font size down to 18px for Italian.

[bhollis]

@liamdebeasi would you want to take a peek at this one? Adding the account-wide drop power definitely crowds out the vault label, but I wonder if we could use container queries or something to scale fonts to fit inside their space.

[liamdebeasi]

Sure! I'll take a look and send over some ideas for how we can solve this.

[liamdebeasi]

The text overflow here is a bit tricky due to the nameplate's sizing constraints. I don't know if we'll be able to devise a solution that ensures all characters are visible and legible while also keeping the nameplate dimensions the same.

You run into a couple potential issues by dynamically scaling the font size:

1. Nameplates could have different class font sizes with longer class names having smaller font sizes (See image below). This could make the design look a bit inconsistent.

This could be somewhat mitigated by reducing the class font size by a fixed amount on each nameplate to maintain consistency.

2. Really long class names could result in the text being so small it is no longer readable.

This could be somewhat mitigated by enforcing a minimum font size. Alternatively, if we instead reduced the class font size by a fixed amount then this would not be an issue.

---

Changing the font size from 20px to 18px for the class text is a quick fix. You could also maybe change the width of the nameplates on desktop. However, this likely will not resolve the issue for all scenarios. Additionally, this will almost certainly become an issue again when implementing font scaling features.

A different user interface may be necessary to properly solve this problem. For example, the nameplate may need to be larger overall to allow for both longer and larger text. Rough idea of what that could look like:

---

Other options I explored that did not work for various reasons

---

Scale both width and height

In order to preserve the proportions of the nameplate while showing all the text we'd need to scale both the width and the height. While this would ensure all text was visible the result looks a bit odd. Additionally, this may cause issues on smaller screens (such as small mobile phones) where it would be possible for the nameplate to extend beyond the bounds of the screen. As a result, I don't recommend this approach.

---

Wrap Text

Wrapping the text to the next line ensures that all the text is visible. However, the dimensions of the nameplate make this solution not practical. The class text would run into the player's title. We could change the height to accommodate, but then we run into the same problem as the previous approach.

---

Just scaling the width

This runs into the same issue as above where it would be possible for the nameplate to extend beyond the bounds of the screen. Additionally, the background image would not span the full width of the nameplate.