Character names cut in italian

[Theovorn]

DIM Version

Versione 8.24.0.3444 (beta), pubblicata il 19/6/2024, 19:17:08

Browser Details

Opera GX and mobile app

OS Details

Windows 10 and Android

Describe the bug

Hunter and Vault names are cut in italian because their name is too long compared to english.

On mobile, depending on screen orientation:

• vertical cuts only Vault
• horizontal same cuts as on pc

Logs

[app] DIM v8.24.0.3444 (beta) - Please report any errors to https://www.github.com/DestinyItemManager/DIM/issues
console.ts:40 [d2-stores] Loaded cached profile from IndexedDB, using it until new data is available. It is 125.106s old.
console.ts:40 [dim sync] globalSettings Object
log.ts:59 [manifest] Load manifest: 4130.89208984375 ms
log.ts:59 [d2-stores] Process inventory: 162.135009765625 ms
log.ts:59 [d2-stores] Inventory state update: 18.986083984375 ms
console.ts:40 [d2-stores] Profile from Bungie.net is is 5.542s old, while the cached profile is 138.567s old. Using the new profile from Bungie.net.
log.ts:59 [d2-stores] Process inventory: 92.3359375 ms
log.ts:59 [d2-stores] Inventory state update: 33.18798828125 ms
16Third-party cookie will be blocked. Learn more in the Issues tab.
console.ts:40 [dim sync] Saving profile data to IDB
console.ts:40 [d2-stores] Profile from Bungie.net is is 0.239s old, while the cached profile is 226.909s old. Using the new profile from Bungie.net.
log.ts:59 [d2-stores] Process inventory: 94.419189453125 ms
log.ts:59 [d2-stores] Inventory state update: 32.858154296875 ms
react-dom.production.min.js:247 Unrecognized Content-Security-Policy directive 'prefetch-src'.
cl @ react-dom.production.min.js:247
Show 1 more frame
Show less
banner.js?style={%22a%22:{%22display%22:%22none%22},%20%22h2%22:{%22color%22:%22white%22}}:89 Unrecognized Content-Security-Policy directive 'prefetch-src'.
OpenCollectiveWidget.inject @ banner.js?style={%22a%22:{%22display%22:%22none%22},%20%22h2%22:{%22color%22:%22white%22}}:89
log.ts:11 [d2-stores] Profile from Bungie.net is is 1.05s old, while the cached profile is 444s old. Using the new profile from Bungie.net.
log.ts:59 [d2-stores] Process inventory: 85.43408203125 ms
log.ts:59 [d2-stores] Inventory state update: 43.555908203125 ms

[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.

[bhollis]

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