hey all,
I am currently working on Fluxx, a game with lots of cards that have much text on it (card name, title, subtitle, description that can sometimes be quite long).
Of course this needs to be translatable, so I want to overlay the card images with translated text for all this information (instead of having translations only in card tooltips that are not easy to use on tablets and mobile).
These text blocks all have different font sizes ranging from 18px to 4px depending on the card type, location and type of text.
This is all working and looking perfectly on my computer, iPad and Android mobile phones.
But on iPhone (my daughter's iPhone 8, only test device I have), this text gets scaled up automatically, becoming way too big for the card size.
I have been reading up on this and it seems to be related to some behavior from mobile Safari trying to make website text readable for the user by default.
Tried several workarounds proposed in threads all over the place:
? wrapping the text in <span>, <p> elements because those were mentioned to be excluded from the behavior (but doesn't work)
? using css -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; to prevent iPhone from scaling the text (doesn't seem to make any difference)
But I can't seem to find a correct or recent description of how exactly this font size boost on iPhone is working or how it can be prevented correctly.
By the way, I have actually checked a recent game with translated card text (Abyss) on that iPhone, and noticed that also there the Lord's name text gets scaled a lot bigger than on other devices. But it doesn't hurt so much there because it still fits inside the card.
Does anybody have any experience or more explanation about this?
Or preferably just a very simple known workaround or fix
Thx
I am currently working on Fluxx, a game with lots of cards that have much text on it (card name, title, subtitle, description that can sometimes be quite long).
Of course this needs to be translatable, so I want to overlay the card images with translated text for all this information (instead of having translations only in card tooltips that are not easy to use on tablets and mobile).
These text blocks all have different font sizes ranging from 18px to 4px depending on the card type, location and type of text.
This is all working and looking perfectly on my computer, iPad and Android mobile phones.
But on iPhone (my daughter's iPhone 8, only test device I have), this text gets scaled up automatically, becoming way too big for the card size.
I have been reading up on this and it seems to be related to some behavior from mobile Safari trying to make website text readable for the user by default.
Tried several workarounds proposed in threads all over the place:
? wrapping the text in <span>, <p> elements because those were mentioned to be excluded from the behavior (but doesn't work)
? using css -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; to prevent iPhone from scaling the text (doesn't seem to make any difference)
But I can't seem to find a correct or recent description of how exactly this font size boost on iPhone is working or how it can be prevented correctly.
By the way, I have actually checked a recent game with translated card text (Abyss) on that iPhone, and noticed that also there the Lord's name text gets scaled a lot bigger than on other devices. But it doesn't hurt so much there because it still fits inside the card.
Does anybody have any experience or more explanation about this?
Or preferably just a very simple known workaround or fix
Thx
