Is There A Way to Toggle CSS Values in Sugarcube

AntonMuerte

I'm working on a piece at the moment, but the font is heavily serif (with decoration) and possibly a problem for people with visual impairments.  I'm just wondering if there is some way to toggle the value of the font to a sans serif version that might not cause them such a problem?

TheMadExile

Yes.  Just prefix the selectors of the styles that contain the font properties with something like this:


html.visually-impaired /* rest of the selector */ {
font: /* sans-serif font */;
}
html:not(.visually-impaired) /* rest of the selector */ {
font: /* serif font */;
}


Then you give players a way to set the class visually-impaired if they're visually impaired (or just hate your serif font) and the CSS will handle everything else.  To accomplish the setting of the class, you could use SugarCube's options system or simply give them a couple of <<click>> macros someplace (on the front page or wherever).  If you need help with that, let me know.

AntonMuerte

Sorry I haven't got back sooner, but I found out our boiler was spewing carbon monoxide all over the house! 

Am I right in assuming that the SugarCube theme selector would work here?  I've actually ditched the Niconne font as a lot of people hated it (although I personally feel it takes a little something away, but playability is the key), but I'd like to be able to do it in reverse for those that are a fan of eye strain lol.

TheMadExile

AntonMuerte wrote:

Am I right in assuming that the SugarCube theme selector would work here?

If you mean like in the visual options example on SugarCube's website (recently updated, link: example-visual-options.zip), then you could use something like that yes.  Though that's generally more for offering multiple thematic options.  If you just want to give players option of using the font or not, then you'd be better off simply doing something like the "widescreen" or "fade" options from the same example.  The actual CSS might look something like:


/* To affect all text. */
html.use-niconne body {
font-family: niconne; /* You know what you really need here. */
}

/* To affect only the passage text. */
html.use-niconne #passages {
font-family: niconne; /* You know what you really need here. */
}