Global Lua Modules/Math-colors

## Math-colors

This module makes it painless to create a math expression with a custom background color, text color, or both—all without sacrificing readability on mobile devices.

## Rationale

### Introduction

The `<math>` tag accepts a subset of AMS-LaTeX markup, and transforms it into a PNG image on the server. Unfortunately, these PNGs use binary transparency, which means that the anti-aliasing around letters and numbers is *opaque* and based on the *provided background color*. If the background color of your expression does not match the background color of its container, people will see a "halo" effect:

Comparison of an expression with a white background in different containers

# x

−
b
±

b

2

−
4
a
c

2
a

{\displaystyle x = \frac{-b \pm \sqrt{b^{2} - 4ac}}{2a}}

# x

−
b
±

b

2

−
4
a
c

2
a

{\displaystyle x = \frac{-b \pm \sqrt{b^{2} - 4ac}}{2a}}

# x

−
b
±

b

2

−
4
a
c

2
a

{\displaystyle x = \frac{-b \pm \sqrt{b^{2} - 4ac}}{2a}}

### Changing the background color

By adding the code `\pagecolor[RGB]{*red*, *green*, *blue*}` to the beginning of an expression, you can change its background color—provided *`red`*, *`green`*, and *`blue`* are all integers from 0 through 255. If no background color is given, white (`255, 255, 255`) is used instead. Note that the "halo" effect can still happen if you aren't careful:

Comparison of an expression with a green background in different containers

R
G
B
]

0
,
128
,
0

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{0, 128, 0}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}}

R
G
B
]

0
,
128
,
0

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{0, 128, 0}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}}

R
G
B
]

0
,
128
,
0

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{0, 128, 0}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}}

### Changing the text color

Being able to change an expression's background color is nice, but not very useful unless you can also change its text color. Fortunately, the syntax `{\color[RGB]{*red*, *green*, *blue*} *expression*}` lets you do just that! In this case, *`red`*, *`green`*, and *`blue`* are identical to their `\pagecolor` counterparts, while *`expression`* is the text you want colored. If no text color is given, black (`0, 0, 0`) is used instead.

Combining the `\pagecolor` and `\color` commands is totally possible, and looks something like this:

```
\pagecolor[RGB]{*red*, *green*, *blue*}{\color[RGB]{*red*, *green*, *blue*} *expression*}

```

Note that **nothing will be rendered** if the background color and text color are identical:

Comparison of an expression with the same background and text colors

R
G
B
]

255
,
255
,
255

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{255, 255, 255}{\color[RGB]{255, 255, 255} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} }}

R
G
B
]

0
,
0
,
0

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{0, 0, 0}{\color[RGB]{0, 0, 0} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} }}

R
G
B
]

0
,
128
,
0

# x

−
b
±

b
2

−
4
a
c

2
a

{\displaystyle \pagecolor[RGB]{0, 128, 0}{\color[RGB]{0, 128, 0} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} }}

### Portability

In addition to Oasis and Monobook, Fandom wikis have a mobile skin called "Mercury", which does a number of things differently in order to stay fast. One of the most important changes is the removal of nearly all CSS; style sheets like MediaWiki:Common.css are not loaded on Mercury, and inline CSS is actively stripped out before it reaches the user. What this means for the `<math>` tag is that **you can't change the container's background color** on mobile devices—it will always be white there. In turn, that means that using a custom background color in your expression will always cause the "halo" effect on Mercury.

This doesn't mean that you should eschew color altogether, though! You can use the `hidden` class, which makes its content invisible on the Mercury skin, to create a second version of your expression that works on mobile:

```
<span class="hidden" style="display: inline;"><math>\pagecolor[RGB]{*red*, *green*, *blue*}{\color[RGB]{*red*, *green*, *blue*} *expression*}</math></span><span style="display: none;"><math>*expression*</math></span>

```

This creates two `<span>` elements, which are inline by default, just like the `<math>` tag. The first one contains our colored expression, and has the `hidden` class to make it invisible for mobile users. It also has the style `display: inline;`, to ensure that it's visible outside of Mercury. Our second `<span>` contains the plain, mobile-only expression. It has the style `display: none;` to ensure that it's *only* visible on mobile devices.

### Simplicity

Of course, it's a pain to write all of that out by hand. This module makes your life easier by abstracting away those hard parts, leaving behind a clear interface for colored expressions. If you need the extra power, you can even load it from inside another module!

## Installation

If you want to use Math-colors inside of another module, then you can `require()` it without any hassle:

```
local mathColors = require("Dev:Math-colors")

-- use mathColors here...

```

However, you'll have to do a bit more work if you want it in an article. First, create a page on your wiki called "Module:Math-colors", and add the following text:

```
return require("Dev:Math-colors")

```

Then you can `#invoke` it like so:

```
{{#invoke:Math-colors|main|<!-- Parameters go here -->}}

```

This syntax is a pain to write, and can be a little intimidating—especially to newcomers. If you plan on using Math-colors a lot, you should store it in a template:

```
{{#invoke:Math-colors|main}}

```
```
{{Math-colors|<!-- Parameters go here -->}}

```

## Usage

### `mathColors.render()`

```
local mathColors = require("Dev:Math-colors")

local myMath = mathColors.render({
    expression = "x = \\frac{-b \\pm \\sqrt{b^2 - 4ac} }{2a}",
    bgColor = "255, 0, 0",
    textColor = "0, 255, 255"
})

```

### `mathColors.main()`

```
{{#invoke:Math-colors|main
}}

```

## References

1. ↑ Help:Math
2. ↑ https://www.w3.org/Conferences/WWW4/Papers/53/gq-trans.html