How do f tags work?

This came up as a question in my game.

I've added this as a spoiler to the BBCode documentation, but just in case anyone else was curious (and doesn't want to go hunting for a spoiler in the documentation), I'll add it here too.

---

Take this example:

[f=font-eagle large text-decoration:overline filter:blur(1px)]Test[/f]

...which renders as:

Test

...by generating this HTML...
<span class="userColor gpFormat-font-eagle gpFormat-large" style="text-decoration:overline;filter:blur(1px)">Test</span>

We see the parameters of the f tag have changed both the class and style of this span.

Firstly, the parameters of the f tag are split by whitespace:
font-eagle
large
text-decoration:overline
filter:blur(1px)

userColor is always added as a class, which controls the automatic brightness inversion for dark mode.
Any of these without a colon (font-eagle and large) are prefixed with 'gpFormat-' and also added as classes.
Any of these which have a colon (text-decoration:overline and filter:blur(1px)) are added to the span's style attribute.

gpFormat-... classes are defined in Gamers' Planes CSS and are used for common use cases (e.g. the parchment style).

Styles can be used for more bespoke rendering. See https://www.w3schools.com/css/default.asp for a list of CSS properties.