+1 vote
by (710 points)

Like with the language toogle switch, is to doable to do a font toggle, to change between ClearSans-Regular and OpenDyslexic on every passage? There's a part of my CSS.

 

.passage {
	color: white;
    padding-left: 0.5em;
    padding-right: 0.5em;
	background-color: #0C090A;
    font-family: ClearSans-Regular;
    font-size: 30px;
    border-style: solid;
    border-color: white;
}

 

1 Answer

+1 vote
by (158k points)
selected by
 
Best answer

If you look at the "Setting Theme" example of the Setting.addList() function in the Setting API documentation, you will learn how to add a List Based Setting option to your story.

You could then use CSS classes on the html element to control which font is currently being used.

.passage {
    font-family: ClearSans-Regular;
}

html.dyslexic .passage {
    font-family: OpenDyslexic;
}

 

by (710 points)
edited by

I did something wrong, since the menu dosent work in game, but I can't figure out what.

EDIT: Found the issue. Here are the right codes. It might be useful to somebody.

var settingFontNames = ["Clear Sans", "Open Dyslexic"];

var settingFontHandler = function () {
    var $html = $("html");

$html.removeClass("clearsans");

$html.removeClass("opendyslexic");

    switch (settings.Font) {
    case "Clear Sans":
$html.addClass("clearsans");
        break;
    case "Open Dyslexic":
$html.addClass("opendyslexic");
        break;
    }
};

Setting.addList("Font", {
    label    : "Font",
    list     : settingFontNames,
    onInit   : settingFontHandler,
    onChange : settingFontHandler,
    default  : "Clear Sans",
});
html.opendyslexic .passage {
    font-family: OpenDyslexic-Regular;
}

html.clearsans .passage {
        font-family: ClearSans-Regular;
}

 

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.
...