Harlowe CSS style: smart font size for mobile vs desktop?

mrtony

On iPhone Safari, Harlowe's CSS is rendering the text too small to comfortably read and navigate. On passages that have multiple links close to each other, the small font makes it difficult to select the desired option by touch without accidentally touching the wrong link.

I've noticed some Twine authors working around this by double-spacing a list of link options at the bottom of the passage instead of single-spacing, and trying not to have links too close to each other within a paragraph...

Any tips or ideas on how to make a Harlowe Twine story detect the browser or screen size and adjust the CSS accordingly? I'd like for it to remain as-is for desktop/tablet browsers but use a larger default font size for mobile browsers with smaller screens.

Lily

Are you delineating size with "pt" or "%"?

mrtony

Neither. I'm not specifying font size at all in my Twine code. The default font size looks fine in a desktop browser but it's too small in iPhone Safari.

greyelf

You can use CSS media at-rules to selectively change the font-size based on the width/height of the web-browser's viewport / screen dimensions but as DavidMarchand found out the font-size you select may be overridden by the mobile web-browser.

You should read the Font changes size depending on how much text the passage is displaying thread and Issue 48 on the Harlowe project website.

mrtony

Thanks for the links. I'm not sure those two threads reached a satisfying conclusion... I'll try taking a stab at CSS coding with the @media rules. If any other Twine authors or programmers have already figured out an elegant way to make Twine Harlowe more legible on iPhone without changing the desktop rendering (which I think looks fine), I'm all ears.

mrtony

I'm wondering if this is part of the problem:

https://developers.google.com/speed/docs/insights/ConfigureViewport

Twine isn't including this "viewport" meta tag in the HTML header:

<meta name=viewport content="width=device-width, initial-scale=1">

Since Harlowe Twine doesn't currently provide a way to add header meta tags, I'm manually inserting it into the exported HTML and testing out some things now. I think it's still going to require changing/overriding Twine's default font sizing rules. Googling around for "current best practices web font size" on whether and when to use px vs pt vs em vs rem vs % is enough to drive anyone to insanity...

TheMadExile

mrtony wrote: »

Twine isn't including this "viewport" meta tag in the HTML header:

[…]

[…] Twine's default font sizing rules […]

Clarification. Harlowe (as of: ≤1.2.2) does not include the <meta> tag. Twine 2 has nothing to do with it—or Harlowe's default font sizes.

Twine is simply the IDE/compiler. The story formats define what features you do, or do not, get with their use.

In this particular case, some story formats include the specific <meta name="viewport" …> tag that you're referring to and some do not.

Muskox

My goal was to make my Twine projects look good anywhere. It took me a few hours of testing, but I'll share what worked for me (Safari desktop, Microsoft Edge, iPhone, Amazon Fire, and a Tracfone).

In the Twine Story Stylesheet, add:

tw-sidebar {display: none;}

This hides the "go back" arrow, which IMHO just junks things up.

The rest you have to do in the final HTML document:

Near the beginning of the HTML document, directly after the <meta charset="utf-8">
add:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This keeps the browser from scaling everything down into a tiny looking font size.

Then, the slightly tricky part. Find the section in the HTML document that starts off with:

{display:-webkit and ends with display:block}

Replace the entire section (including the parts listed above) with:

{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:6.0in;font-size:1.5em;margin:5%}@media screen and (max-width: 1024px){tw-story{font-size:1.2em;max-width:6.0in}@media screen and (max-width: 896px){tw-story{font-size:1.05em;max-width:6.0in}@media screen and (max-width: 768px){tw-story{font-size:.9em;max-width:5.0in}tw-passage{display:block}


That's it! (At least it worked for me)