remove word-break: break-all

[NaridaL]

Otherwise leads to weird display like

[Lattyware]

Hrm, the downside is that doing this results in issues where the card can end up scrolling horizontally, which is really annoying and looks terrible.

I think the correct answer here is to replace it with overflow-wrap: anywhere, which will break the line early in cases like this (so it'd break at the dash here) rather than breaking the word, but will still break the word if an entire line is filled with a word without any break points, to avoid horizontal scrolling, which feels like a better compromise.

[NaridaL]

That's a good point. It would be perfect if the font-size was also reduced so that vertical scrolling was avoided too. Unfortunately there doesn't seem to be a way to do that with css only. Maybe a heuristic, which reduces the font-size for black cards whose string length is above a certain value, would be easier to implement and be good enough in most cases.

(The stereotype is true, cards in german are way longer 😋 )

[Lattyware]

Yeah, if you've looked at the CSS you've presumably seen how much I have to hack around to get the cards to lay out as they do. If you want to get text scaling dynamically you have to move to fully dynamic full-js or SVG solutions, which all have a ton of drawbacks in terms of accessibility and how well they work on mobile.

A heuristic seems like a fair approach though, and would certainly help a little. I'll take a look at doing something like that when I get a chance.

Oh, and a little counter-intuitively, setting the card size to the smallest in settings completely removes the "card" structure, which means they can be of an unlimited size, so that might actually be preferable if your cards are all very long, I guess, although less aesthetically pleasing.

[NaridaL]

Ah yes, "Fortune Cookies against Humanity".