How can I interactively change a font's "line-height" for an entire Story?

Authoring Twine
1

Tweego v2.1.1
SugarCube v2.36.1

How can I interactively change a font’s “line-height” for an entire Story?

I can change “line-height” for the current passage using a function and the selector “.passage” but other selectors, including “html” “#passages” and “#story”, don’t affect the visible “line-height”. Other font modifications do work for both “.passage” and “html”.

:: Start
!! Start

How can I interactively change a font's line-height for an entire story?

A function to change line-height works fine for the selector ".passage" but does nothing when selecting "html". Unfortunately, ".passage" applies only to the current passage. Other types of font modifications work for both ".passage" and "html". The selectors "#passages" and "#story" also are non-responsive.

This was tested using Tweego v2.1.1 and SugarCube 2.36.1 under Windows 10 22H2 with Firefox v108.0.1 and Edge v108.0.1462.54.

Go to [[Another Passage]]
Go to [[Start]]. (Erase current ".passage" font settings.)
----
Modifying ".passage" font settings:

family = <<link "Ariel">><<set fontFamily(".passage","Ariel")>> <</link>>
family = <<link "Courier">><<set fontFamily(".passage","Courier")>> <</link>>
<<link "Shrink">><<set fontSize(".passage",-2)>> <</link>> Font size <<link "Expand">> <<set fontSize(".passage",2)>><</link>>
<<link "Shrink">> <<set lineHeight(".passage",-4)>> <</link>> .passage line-height <<link "Expand">> <<set lineHeight(".passage",4)>> <</link>> (works fine)
----
Modifying "html" font settings:

family = <<link "Ariel">><<set fontFamily("html","Ariel")>> <</link>>
family = <<link "Courier">><<set fontFamily("html","Courier")>> <</link>>
<<link "Shrink">><<set fontSize("html",-2)>> <</link>> Font size <<link "Expand">> <<set fontSize("html",2)>><</link>>
<<link "Shrink">> <<set lineHeight("html",-4)>> <</link>> html line-height <<link "Expand">> <<set lineHeight("html",4)>> <</link>> (does not work)
----
----
Modifying "#passages" font settings:
<<link "Shrink">> <<set lineHeight("#passages",-4)>> <</link>>"#passages" line-height <<link "Expand">> <<set lineHeight("#passages",4)>> <</link>> (does not work)
----
Modifying "#story" font settings:
<<link "Shrink">> <<set lineHeight("#story",-4)>> <</link>> "#story" line-height <<link "Expand">> <<set lineHeight("#story",4)>> <</link>> (does not work)
----
Environment:

''Story Compiler:'' <<= $('tw-storydata').attr('creator') + " v" + $('tw-storydata').attr('creator-version')>>
''Story Format:'' <<= $('tw-storydata').attr('format') + " v" + $('tw-storydata').attr('format-version')>>
''Your Reader (Browser):'' <<= navigator.userAgent>>
----

:: StoryInit

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

:: StoryTitle
test font changes

:: Story Stylesheet [stylesheet]

/* use default font configuration */


:: Story JavaScript [script]

// change line-height for specified selector

window.lineHeight = function(sel,value) {
	$(sel).css("line-height", (parseInt($(sel).css("line-height")) + value) + "px");
}

// change font-size for specified selector

window.fontSize = function(sel,value) {
	$(sel).css("font-size", (parseInt($(sel).css("font-size")) + value) + "px");
}

// change font-family  for specified selector
window.fontFamily = function(sel,fam) {
	$(sel).css("font-family", fam);
}


:: Another Passage
!! This is Another Passage
go back to [[Start]]

line-height doesn't change for the text below
----
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
----
2

If you are creating settings, you could consider using the Settings API.
I’ve had an issue creating a setting for line-height while targeting lineHeight (working for one passage only then resetting), but found a solution when creating a new class to add to the html to change the line height.

So with the Setting API, I have this in the JavaScript:

var settingLineHeightNames = ["75%","100%", "125%", "150%"];
var settingLineHeightHandler = function () {
	var $html = $("html");
	$html.removeClass("ln75 ln125 ln150");
	switch (settings.lineheight) {
	case "75%":
		$html.addClass("ln75");
		break;	
	case "125%":
		$html.addClass("ln125");
		break;	
	case "150%":
		$html.addClass("ln150");
		break;	
}};
Setting.addList("lineheight", {
	label    : `<b>Change Line Height.</b>`,
	default  :	"100%",
	list     : settingLineHeightNames,
	onInit   : settingLineHeightHandler,
	onChange : settingLineHeightHandler
});

and this in the CSS

html.ln75 .passage {line-height: 1.2;}
html.ln125 .passage {line-height: 2.0;}
html.ln150 .passage {line-height: 2.4;}
3

SugarCube’s default style has a line-height: 1.75; on .passage, so anything you set on ancestor elements will be ignored. If you put .passage { line-height: inherit; } in your story stylesheet, then you should be able to dynamically set it on body or whatever…

4

Thanks! That fixed it.

@manonamora Thanks for the suggestion, but it’s a little more complex than I’m prepared for :slight_smile: