+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 (159k 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;
}

 

...