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?
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/mathjax@2.7.9/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/mathjax@4.0.0-beta.4/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\]