FANDOM


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[1], 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[2]:

Comparison of an expression with a white background in different containers
White container Black container Green container
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
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
White container Black container Green container
\pagecolor[RGB]{0, 128, 0}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\pagecolor[RGB]{0, 128, 0}x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\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
White Black Green
\pagecolor[RGB]{255, 255, 255}{\color[RGB]{255, 255, 255} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} } \pagecolor[RGB]{0, 0, 0}{\color[RGB]{0, 0, 0} x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} } \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:

Template:Math-colors Some article
{{#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
| expression = x = \frac{-b \pm \sqrt{b^2 - 4ac} }{2a}
| bgColor = 255, 0, 0
| textColor = 0, 255, 255
}}

References

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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.