Blog 1

Random Talk on Random Thoughts

Display of Calligraphic Font by MathJax in Chromium

| Comments | ∞

Background

CSS style of this blog

I use Solarized theme with light background. IMHO, it is less tiring to look at a light background. I’ve chosen pink as the text colour.

Contents of this blog

Apart from technical stuff, I often post math containing calligraphic font, for example

  1. Injectivity of Stable Mappings
  2. Definition of Content 0 Sets
  3. Archimedean Sequence of Partitions of a Square
  4. Composition of Limits

I used Mozilla Firefox, and I didn’t see problem on the display of \mathcal.

Problem

Three months ago, I wrote something about Zorn’s Lemma and Hausdorff spaces. In the post Normal Compact $T_2$ Spaces, I observed that the math display was abnormal. Due to homework and exams, I delayed the investigation into this technical problem.

mathcal display error

Normally, the foreground colour of the math expression is the same as that of normal inline text. In the above figure, "$T_2$" is in pink. However, $U_y, V_y$ aren’t.

Discussion

Look into the code

It is normal for me to inspect the HTML elements.

Element inspected

HTML element inspected

Interpreted HTML in Chromium

HTML code in the inspector

The above math expression is in black rather than pink because it is rendered as a PNG image.

I confirmed this by looking at the list of loaded resources.

list of loaded PNG

Is this problem browser-specific?

I tried opening the blog article in Mozilla Firefox, and I didn’t see any problem.

</source> result in Firefox

Cause

Based on the above observations, I suspected that the presence of a calligraphic font triggered this fallback of fonts. In order to test this, I did an experiment on my local MathJax test page: I had a math expression containing \mathcal and one without. I put them in different order, and observed the difference in the loaded PNG.

Calligraphic font at the bottom

</source> Visual effect of \mathcal at the bottom

PNG list when \mathcal at last

Only the curly ‘C’ is loaded as PNG, while the rest aren’t.

Source code for the above sample page (b4cal.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Don't delete!</title>
</head>
<body>

<div class="myeqn">
\begin{align*}
  &\quad\; \abs{x + i \sqrt{1 - x^2} \cos{\theta}}\\
  =& \sqrt{x^2 + (1 - x^2) \cos^2{\theta}}\\
  \le& \sqrt{x^2 + (1 - x^2)}\\
  =& 1.
\end{align*}
</div>

<!-- Don't need to go to MathJax CDN Sample -->
<p>$\mathcal{C}$</p>

<script type="text/javascript">
(function() {
  function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
    done=false;
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState || this.readyState == 'loaded'
          || this.readyState == 'complete') ) {
      done=true;
      success();
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
      }
    };
    head.appendChild(script);
  }

  getScript("https://cdn.mathjax.org/mathjax/latest/MathJax.js?" +
    "config=TeX-AMS-MML_HTMLorMML" +
    ",https://vincenttam.github.io/javascripts/MathJaxLocal.js",
    function(){});

})();
</script>
</body>
</html>

Calligraphic font at the bottom

</source> Visual effect of \mathcal at the top

PNG list when \mathcal at first

Everything (after the curly ‘C’) are loaded as PNG.

Source code for the above sample page (cal1st.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Don't delete!</title>
</head>
<body>

<!-- Don't need to go to MathJax CDN Sample -->
<p>$\mathcal{C}$</p>

<div class="myeqn">
\begin{align*}
  &\quad\; \abs{x + i \sqrt{1 - x^2} \cos{\theta}}\\
  =& \sqrt{x^2 + (1 - x^2) \cos^2{\theta}}\\
  \le& \sqrt{x^2 + (1 - x^2)}\\
  =& 1.
\end{align*}
</div>

<script type="text/javascript">
(function() {
  function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
    done=false;
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState || this.readyState == 'loaded'
          || this.readyState == 'complete') ) {
      done=true;
      success();
      script.onload = script.onreadystatechange = null;
      head.removeChild(script);
      }
    };
    head.appendChild(script);
  }

  getScript("https://cdn.mathjax.org/mathjax/latest/MathJax.js?" +
    "config=TeX-AMS-MML_HTMLorMML" +
    ",https://vincenttam.github.io/javascripts/MathJaxLocal.js",
    function(){});

})();
</script>
</body>
</html>

Therefore, my claim is verified. Unluckily, I failed to find any solution to this problem on Google.

Reasons for not finding a solution

  1. This problem doesn’t affect the content.
  2. This problem is browser-specific—it doesn’t appear in Mozilla Firefox.
  3. It is possible that this issue will be automatically fixed by a future upgrade, and a solution of this problem will be transient.

I’ve better solve math problems instead of technical ones since math is always true.

Some off-topic stuff

I started writing this post on Christmas Eve, and I finished it at Christmas.

Comments