How to change font size and interline spacing?

Authoring Twine
1

TweeGo Version: 2.1.1+81d1d71
Story Format: SugarCube v2.31.1

Never mind. I found my mistake. See my own reply below.
Nope, still not right. sigh

What’s the best way to reduce the inter-line spacing of text and still be able to adjust both it and the font size while using SugarCube?

What I’d like to do is to minimize the blank space between lines of text but still allow people to adjust the size of the font to improve readability.

Below is my failing attempt to do this.

Specifying a line-height of 16px for paragraphs in Story Stylesheet does reduce the inter-line spacing to what I consider an appropriate distance. (See below.)

Unfortunately, the “fontSize” function used by @HiEv in https://qjzhvmqlzvoo5lqnrvuhmg-on.drv.tw/UInv/Sample_Code.html (that’s the URL where Google found it) changes only font-size and not line-height. As a result, when line-height has been specified in Story Stylesheet and a font is enlarged sufficiently, the characters in one line overlap the characters in adjacent lines. (It does work fine if line-height has not been specified.) I tried duplicating that functionality for line-height, but my code does nothing.

Below is a Story in Twee3 format (which I used with TweeGo) demonstrating my problem, using the fontSize and lineHeight functions that I defined. Obviously I really don’t understand what prefix I should be using to modify the line-height or even if I’m barking up the wrong tree.

Thanks for whatever help can be provided.

:: StoryInit

:: StoryData
{
        "ifid": "C31A5464-60FC-4937-A550-C7D75F7692AF"
}

:: StoryTitle
Test Font Resize

:: Story Stylesheet [stylesheet]

/* indent paragraphs (in conjunction with Config setting below) */
.passage>p { margin-left: 1.0em; margin-right: 1.0em;
	   line-height: 16.0px;
	   text-indent: 2.0em; }

:: Story JavaScript [script]

/* automatically indent paragraphs */
Config.cleanupWikifierOutput = true;

/* change font size */
window.fontSize = function(value) {
	$("#story").css("font-size", (parseInt($("#story").css("font-size")) + value) + "px");
}

/* doesn't change line height :( */
window.lineHeight = function(value) {
	$(".passage").css("line-height", (parseInt($(".passage").css("line-height")) + value) + "px");
}

:: Start
!! This is the Start (and only passage)

<<link "expand font">> <<set window.fontSize(8)>> <</link>> (big enough to overlap)

<<link "shrink font">> <<set window.fontSize(-8)>> <</link>>

Magna illud minim ius at, pro no numquam expetendis, an eam vidit denique. No numquam detraxit eos, inani detracto te quo, ad vim tritani accommodare. Utamur insolens qui no, cum at accusata delicatissimi, unum albucius ne eam.
2

Never mind. :frowning: I found my mistake. I’d been playing around with trying different prefixes and neglected to test the “obvious” one.

Nope. Still not right. It looked OK at first, but still overlaps at larger sizes. :frowning:

/* this does change line height, */
window.lineHeight = function(value) {
	$(".passage>p").css("line-height", (parseInt($(".passage>p").css("line-height")) + value) + "px");
}
3

Your line-height function works, you are just not calling it.

<<link "increase line-height">>
    <<set lineHeight(8)>>
<</link>>

<<link "decrease line-height">>
    <<set lineHeight(-8)>>
<</link>>

(You also do not have to write “window.”)

4

Your problem is that you have a fixed (px) line height, when you should actually be using a percentage (%) line height. Line heights of 150% or greater are recommended, since they help people with dyslexia read properly.

Simply change that one line to:

	line-height: 150%;

and you should be fine when changing the font size.

For more, see “Success Criterion 1.4.12 Text Spacing (Level AA)” from the Web Content Accessibility Guidelines (WCAG).

Anyways, that should be a better and simpler fix.

Enjoy! :slight_smile:

5

@HiEv,

Thanks, a lot!
Changing to 90% did what I want.

I’ll go read the Accessibility recommendations now.