Adaptive text size (Harlowe)

+1 vote
asked Sep 11 by DrSurname (350 points)
edited Sep 11 by DrSurname
Hi! I noticed that when I shrink down the original game window, the text is too big to fit in one line, so it looks very unnatural.

So I was wondering if there was a way to change the text size depending on the window size, or, at least remove the blank spaces on the left and right sides.

I tried using font-size: vw; but then the number of lines in the paragraph does not change at all and the text ends up being far too small to read.

1 Answer

0 votes
answered Sep 11 by greyelf (37,190 points)

notes:

  • You need to state the name and full version number of the story format you are using, as answers can be different for each one.
  • You used the harlowe tag to indicate you are using that story format but didn't also supply a tag to indicate which series of Harlowe you are using, I will assume that you are using v1.2.4 as that is the current default for the Twine 2.1.3 application.
  • I would also suggest not adding the story format name to the title of your question, as it just makes it longer than needed without adding any real benefit.
  • All CSS used to solve your issue needs to be placed within your story's Story Stylesheet area.
  • Media queries need to be placed later in the stylesheet than the CSS it is overriding.

There are two parts to the solution of your issue.

1. The CSS required to change the size and layout of the central section of your story.

a. The blank margins to four sides of the central area where the contents of the current Passage is displayed are a generated by the CSS being used to center that area. The CSS used to generate those margins is as follows:

tw-story {
	width: 60%;
	margin: 5% auto;
}

... you can alter these width and margins to suit your needs.

b. The default font information used by Harlowe 1.x is assigned to two elements:

html {
	font: 100% Georgia, serif;
}
tw-story {
	font-size: 1.5em;
}

 ... and I suggest (at less) targeting the same two element with any overriding font information you plan to use.

2. Using Responsive Web Design - Media Queries (@media rules) to alter your layout based on the different target screen sizes.
Only you know how you want your layout to look depending on the size of the screen being used to view your story, and which size screens you want that layout to change on. So the following CSS only shows you how to construct a very basic rule targeting the tw-story element when the width of the screen is less than 500px wide, it is not a suggestion on what values to use.

@media only screen and (max-width: 500px) {
	tw-story {
		font-size: 3em;
		width: 80%;
	}
}

 

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...