I am using the Extpfeil extension in Mathjax to produce arrows in my html page. In particular I am using:
\Newextarrow{\cs}{lspace,rspace}{unicode-char}
This works great for some arrows (for example, see answer by Davide), but as the documentation states:
Note that MathJax knows how to stretch only a limited number of
characters, so you may not actually get a stretchy character this way.
Unfortunately, I really need to use one of these non-supported characters (specifically, 0x21CC), and it would be very nice if I could get it to stretch. Is there a way I can manually specify an amount to stretch the arrows in a nice way? For context, I'm trying to make chemical reaction diagrams like this:
The overset and underset variables may be a few characters long, so the stretching is necessary.
The ability of MathJax to stretch a character depends on the availability of the appropriate glyphs within the font that it is using. The MathJax TeX font (the usual web-based font) doesn't have the necessary glyphs to stretch U+21CC; however, the STIX fonts do, and as of version 2.3, MathJax includes web versions of the STIX fonts. So if you are authoring your own pages and can specify the font, you could get U+21CC to stretch. But if you are using a site like StackExchange, where you can't control the font, you are limited to the font in use.
To do this, add
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "STIX",
availableFonts: ["STIX"],
webFont: "STIX-Web"
},
SVG: {
font: "STIX-Web"
},
TeX: {
extensions: ["extpfeil.js"]
}
});
</script>
just before the script that loads MathJax.js. Then in the body of your page use
<div style="display:none">
$$\Newextarrow{\rightleftharpoons}{5,5}{0x21CC}$$
</div>
to define the arrow (somewhere early on before it is used. Then use
\rightleftharpoons[xyz]{abcdefg}
to put "abcdefg" over the arrow and "xyz" below it, and have it stretch. It looks like the vertical positioning of the under-text is not great (it is a bit too low), but the arrow stretches!
Here is an example:
Related
I'm generating some simple svg for data visualization and as part of that I need
to render several lines of text. I'm using the simple text/textspan. However when
determining when to break the line, I need to know the width of the string. Note that I am not using javascript, these are static svg diagrams. My manual mockups work fine on all three platforms(Mac/Windows 10/Linux) in several different browser. I've been searching, but all attempts to find anything about string widths involves dynamic SVG and javascript. Is there any data anywhere on the character widths of the default fonts? I'm using rather simple svg. I'm using the default transform and coordinate space as well. Or do I have to write a javascript test page to return the widths?
Thanks.
The standard font is determined by settings of the renderer. Browsers will use the same font they use for HTML content, set by the user and depending on fonts installed on their system. That means text size will differ for each end user.
There is no way around measuring the text after rendering.
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.
I cannot use mathjax in MarkDown page as described here and here. I would like to know how to do that?
I can use mathjax in html files now.
It seems that mathjax cannot render the $$ displayformula?
You actually do have MathJax working with the first page that you cite (the other link seems to be broken). If you notice the first equation, it has been typeset by MathJax (note that its contextual menu is MathJax's). The problem is that Markdown is turning your underscores into <em> tags, and that means MathJax won't process those equations (MathJax doesn't process math that contains HTML tags).
One solution is to put spaces around your underscores, so that Markdown will ignore them.
Another would be to use backticks (`) around the math to turn it into "verbatim" mode, so Markdown won't modify its contents. That may cause the math to be enclosed in <code> tags, which MathJax will ignore. So you would need to modify your configuration to include
tex2jax: {
skipTags: ["script","noscript","style","textarea","pre"]
}
(the default has "code" in that list) so that MathJax will process the contents of <code> tags.
Addition:
Your theme styles code blocks with white text on black backgrounds, so you may want to add some additional CSS to set that back. You may be able to do that somewhere in your theme controls, but you could also add
styles: {
code: {
"font-family": "inherit",
"color": "inherit!important",
"background": "inherit!important"
}
}
to your MathJax configuration, and it will set the styles for you. Note that this will also modify how any backticked material will show up. If you want to have it only affect MathJax output, that would take more work.
Env: MathJax 1.1
We modified the styles element in default.js to modify some of the display settings. As you see below, the font-size has been set to 50% which causes MathJax to render properly in Firefox (with 50%) but a much higher font size in Chrome.
If we remove the font-size, it appears properly in Chrome but shows up smaller in Firefox.
What would be the right way to manage the font-size, so that it appears properly on all browsers?
What would be the preferred mechanism to add custom changes to MathJax (such as the one given below), so that we don't break much on a future upgrade.
//
// This allows you to change the CSS that controls the menu
// appearance. See the extensions/MathMenu.js file for details
// of the default settings.
//
styles : {
".MathJax" : {
"font-family" : "Arial",
"font-size": "50%"
}
}
See my post on the MathJax users forum for details.
The font size is set dynamically by MathJax to try to match the surrounding text properly, so you should not be setting the font-size for MathJax explicitly. If that isn't happening properly, I would like to see the situation where it fails so that the font-size- matching can be improved. It may be that other CSS on the page is interfering with that, so I would need to see a complete page where the problem exists.
You should set the "scale" parameter in the HTML-CSS section of your configuration rather than using CSS directly if you want to change the size of the mathematics relative to the surrounding text. You should not set font-size directly, as this will almost surely cause MathJax to fail.
I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?
I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.
Inkscape is creating a structure like this:
<flowRoot
xml:space="preserve"
id="flowRoot3089"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(19.71875,334.88681)">
<flowRegion id="flowRegion3091">
<rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
</flowRegion>
<flowPara id="flowPara3123">Item 1</flowPara>
<flowPara id="flowPara3137">Item 2</flowPara>
<flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>
However, this is not acceptable to Batik for some reason.
Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.
The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.
Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.
The solution is to manually edit your flowRect attributes after tweaking them with inkscape.
Batik also seems to do better if you use the standard svg output rather than inkscape svg output.
This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.
If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.
I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.
Alternatively, foreignObject will allow you to include html:
<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
Doesn't seem to work in Opera or IE, though.