Double brackets in MathJax

Question

How can I achieve stretchy double brackets in MathJax using TeX? For example,

The TeX package stmaryrd has this but MathJax doesn't support the import of arbitrary packages.

I'd like the double brackets to look good at all sizes.

Bonus: Is this possible in AsciiMath?

Restraint

Answer 1

The MathJax TeX fonts don't include the characters needed for these brackets. But you can get a similar effect using something like \left[\!\!\left[x^2\over 2\right]\!\!\right] or \left[\!\left[x+1\right]\!\right] or even [\![x+1]\!]. Unfortunately, the number of backspaces (\!) that you need depends on the content, so it is not easy to automate this. This is also dependent on the font in use, so if you are doing this on your own web site and using HTML-CSS (as opposed to SVG or CommonHTML output), you might want to disable the use of local STIX fonts, since the spacing would be different for that.

Alternatively, you could configure your page to use the STIX-Web fonts, which do include the needed characters (though not everyone likes the look of them), but you would also have to add the proper names and characters to the TeX delimiters list. Something like

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {fonts: ['STIX-web']},
  SVG: {font: 'STIX-Web'},
  TeX: {Augment: {
    Definitions: {
      delimiter: {
        '\\llbracket': '27E6',
        '\\rrbracket': '27E7
      }
    }
  }}
});
</script>

added just before the script that loads MathJax.js itself should do it. Note that this works for HTML-CSS and SVG output, but not CommonHTML output, since the latter only uses the MathJax TeX fonts at the moment.

---

Edit (21 November 2023)

Here is a working example. Note that it takes a few moments for the stretched brackets to appear. This is because the data for them is in a separate font that needs to be downloaded, and the data for them is also in a separate file, and that takes time as well. So you will see them at their normal size for a moment and then a bit later they will stretch. Once those files have been cached by the browser, they should work faster.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {fonts: ['STIX-Web']},
  SVG: {font: 'STIX-Web'},
  TeX: {Augment: {
    Definitions: {
      delimiter: {
        '\\llbracket': '27E6',
        '\\rrbracket': '27E7'
      }
    }
  }}
});
</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

\[\llbracket\Bigl\llbracket\biggl\llbracket\Biggl\llbracket\,\Biggr\rrbracket\biggr\rrbracket\Bigr\rrbracket\rrbracket\]

\[\left\llbracket\,\vcenter{\Rule{1em}{5em}{0em}}\,\right\rrbracket\]

---

Here is a configuration that works for version 4:

<script>
MathJax = {
  startup: {
    ready() {
      MathJax.startup.defaultReady();
      const {Token} = MathJax._.input.tex.Token;
      const {MapHandler} = MathJax._.input.tex.MapHandler;
      const delimiter = MapHandler.getMap('delimiter');
      delimiter.add('\\llbracket', new Token('\\llbracket', '\u27E6'));
      delimiter.add('\\rrbracket', new Token('\\rrbracket', '\u27E7'));
    }
  }
}
</script>
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/[email protected]/tex-chtml.js"></script>

\[\llbracket\Bigl\llbracket\biggl\llbracket\Biggl\llbracket\,\Biggr\rrbracket\biggr\rrbracket\Bigr\rrbracket\rrbracket\]

\[\left\llbracket\,\vcenter{\Rule{1em}{5em}{0em}}\,\right\rrbracket\]

Frogfish

This does not seem to work anymore in MathJax version 3. At least setting the delimiter as above results in an error for me. Any idea if this is possible within version 3? – Loralorain

@MaxMaier, the STIX fonts are not yet available in v3, and the default fonts don't include larger sizes of U+27E6 or U+27E7, or the pieces necessary to make multi-character stretchy assemblies for these characters. So ever if you could configure v3 to allow these as delimiters, it would not do much good at the moment. But you can see this issue tracker for how to do it in v3. – Frogfish

thanks for pointing this out! I will keep track of changes of the issue tracker. Already excited when the STIX v3 fonts will land into MathJax :) – Loralorain

Thanks for this! Should this work with the explicit sizing commands for delimiters? For example, \Biggl\llbracket a doesn't produce any change for me. – Khadijahkhai

@Blair, are you using MathJax v2 or v3? This is a v2 configuration, which will have no effect on v3, and v3 doesn't have the STIX2 font, and the default MathJax font doesn't have the needed characters to make this stretchy. Note that v4 is out in beta release, with support for 11 fonts, including STIX2, so it would be possible to configure v4 to support \llbracket and \rrbracket. And yes, it should work with \Biggl and the related macros. – Frogfish

I think I am using V2. Are you saying that \Bigg should be working then? – Khadijahkhai

@Blair, yes, then it should work for \Biggl. – Frogfish

OK, well then I don't understand. This is the command that makes me think I am using MathJax 2: <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>. – Khadijahkhai

I was not able to get \\llbracket working with 4.0.0-beta either. Would the same configuration above still apply? – Khadijahkhai

@Balir, no that is v2 configuration. I will have to work out a v4 version. – Frogfish

@Khadijahkhai the v2 configuration I gave above works for me. I've added a live example to my answer, so see if that works for you. Read the note above it about timing, however. – Frogfish

@Blair, I also added a v4 configuration that does the trick. – Frogfish

@DavideCervone, thank you so much for this :-). It is working for me now, in both v2 and v4. I don't understand what was wrong at my end. The only difference appears to be my use of cdnjs.couldflare: when I use cdn.jsdelivr from your examples I get the desired behaviour. – Khadijahkhai