Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Font changes size depending on how much text the passage is displaying
I couldn’t find anything on the forum about this. I’m using Harlowe. I’m trying to make my stories look pretty in mobile devices but text is always too small, even when I override the… 6 screen sizes, I think, Harlowe CSS handles by default. The weird thing is, my CSS text resizing works when the passage has enough text in it.
Replicating it: So if you create a regular Harlowe story with a single passage reading (set: $step to "")(live: 0.1s)[(set: $step to $step + " step")$step] (this will make the word “step” to be repeated over and over) and run it on a small enough phone (mine is 382x679 px), the font will look really small and after the 25th iteration or so it’ll jump to a larger, more readable size. I can’t replicate this on desktop, no matter how small I make the window running the story.
Is there a way to correct this from my end?
Replicating it: So if you create a regular Harlowe story with a single passage reading (set: $step to "")(live: 0.1s)[(set: $step to $step + " step")$step] (this will make the word “step” to be repeated over and over) and run it on a small enough phone (mine is 382x679 px), the font will look really small and after the 25th iteration or so it’ll jump to a larger, more readable size. I can’t replicate this on desktop, no matter how small I make the window running the story.
Is there a way to correct this from my end?
Comments
That is because mobile web-browsers use different algorithms to determine layout and default font sizes.
The MDN text-size-adjust property page may explain the issue better than I can.
note: If you plan to use the text-size-adjust property (and the prefixed versions) remember to only use them within media queries and not within the main body or it may prevent text resizing totally. (eg. no zooming of text, only images.)
I don’t know about mobile display algorithms, but I can’t imagine one that makes text bigger when you exceed a certain number of characters. I’m puzzled.
What web browser are you using?
Pay a visit to w3schools.com and have a read of the css section.
I attached a single passage story that should reproduce the bug if you run it on mobile.
As the linked page explained, it is common for the viewport used by mobile web-browsers to be larger than the actual screen.
By default when using a desktop based web-browser if the contents exceeds the current viewport's dimensions then scroll-bars are added so that the extra content can be accessed.
I believe that when your content exceeds your mobile web-browser's viewport dimensions that instead of adding scroll-bars the font size is being increased, and the text-size-adjust property is meant to influence how that increase works.
Well, the point when font size increases looks too small to even get close to exceeding the browser’s viewport, but there might be elements I’m not seeing that influence that.
I’ll keep tweaking text-size-adjust and see if I find a setup that gives me a consistent font size on mobile.