Comrade:CriticalResist/sandboxTypeface picker documentation

There isn't much to change in this one, but regardless, the typeface implementation works on JS and a little bit of CSS. We shouldn't ever need anything other than sans serif, serif and accessibility/dyslexia-friendly fonts but here is the documentation anyway (especially if you are a translator).

JS code

The script is in common.js, under the " * Typeface picker: serif, sans serif, dyslexia friendly" comment.

There isn't anything to change or edit here except if you are a translator. The various font choices are defined in the array:

        var fonts = [
            { value: 'sans', label: 'Sans', className: 'font-sans' },
            { value: 'serif', label: 'Serif', className: 'font-serif' },
            { value: 'dyslexic', label: 'Accessibility', className: 'font-dyslexic' }
        ];

To translate them, only touch the "label" part - it will make it easier to keep things working over time. The label parameter is what shows up in the Settings menu.

You can also search for "heading.textContent = 'Typeface';" in that script and translate the word Typeface to your language.

We could technically add font choices with this array but that's not the point of this documentation.

CSS definitions

The JS code only creates the buttons in the settings menu and lets the user pick between typefaces. To actually change the typefaces, we need to head on to common.css.

There, look for the comment "Typefaces settings" in @media screen. You should see something like:

/*Typefaces settings - sans serif doesn't need styling, it defaults to Citizen normal font-family*/
:root.font-serif {
    --font-family-base: Georgia, Times, "Times New Roman", serif;
}
:root.font-dyslexic {
    --font-family-base: 'Comic Sans MS', 'Comic Sans', 'Signika', Arial, Verdana, sans-serif;
}

This is where we define which fonts will actually be loaded when we select a certain typeface. Sans-serif is not defined in the CSS because it's the default Citizen typeface, so there's no need to redefine it: instead, we just load the default Citizen typefaces as defined in the theme's own files.

As you can see, we select :root.font-serif, and font-serif is also defined in className in the JS.

We redefine the variable --font-family-base, which is what Citizen uses natively to determine which font to serve.

It is very difficult to load custom fonts on Mediawiki, so assume you can't do it. Normally you would just do @font-face in the CSS, but mediawiki doesn't like it. So, stick to fonts that we know Citizen uses, or fonts that are available by default on systems (Windows, Mac, Linux, Android).

The way fonting works in CSS is it will load them in the order specified until it finds one that works. In the code above, it will try to load Georgia first. If the user's system has no font named Georgia, then it will try to load Times. If Times doesn't exist, etc. The last one, 'serif', just means that if none of the named fonts are found, then the browser will tell the user's device "just load any serif font you have".

Styling the menu button itself

We can also style the menu button so that it displays a preview of the font that will be used. To do that, scroll down just a little more to the comment "Custom BUTTON styling". Under it, look for something like:

#serif-font-label{
	font-family:Georgia,serif;
}

serif-font-label is the ID of the button itself, and it is created automatically from the JS array's value parameter, as X-font-label where X is the value from the array.

You can give that button the same font-family choices as we did for :root.font-serif. Note however that we don't use the variable --font-family-base here for the button styling, but the font-family property.

And that's it! Make sure to test the buttons in various configurations (click back and forth, load a page, browse some pages) to make sure they load correctly.