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.
Related
Mozilla has a plethora of browser extensions included at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples. One of them is "Brorderify", which has a content script that adds a border to page matches:
I have matches set to "matches": ["<all_urls>"], the border is added to most sites (google searches, twitch, ucla.edu) but not on all sites. I found that it does not work on youtube, or reddit. How are they blocking it?
I can see the content script when I open the debugger and there are no console errors.
Inspecting the body shows that their is a border, even though we can't see it.
Deleting the <ytd-app>...</ytd-app> tag will actually show the border.
How is the border covered or not displayed?
If you use the element selector and hover of the body tag, you'll see that the body tag is only showing a very small portion of the page. The other elements are overlayed on top of the body using absolute position. Youtube have some weird custom tags that sets it's style as absolute position over the body.
Looking at this ytd-app tag, on the right you can see the style is set at {position: absolute, top: 0, right: 0} which sets right on top of the body. There's some other tags that does the same at different positions...It's a huge mess.
If you set the boder on this tag, you will see a border on the right side but not all of it. There are other tags that is overlayed on top. Probably a tag overlayed absolute position for the side bar, another for the app bar and etc.
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.
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:
I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
Another question about SVG style transitions... :)
This time I'm trying to transition the font-size on a text element. It works fine until I increase the page zoom in Chrome. Once I do that it appears that at the start of the transition it sets the size down to the original zoom size before transitioning to the correct outcome size. The result is that I see the font-size flick smaller for a split second before growing larger.
With the default zoom the transition looks smooth. Other browsers don't seem to have this issue.
Wondering if I can try my luck again with some style-setting trick that will work more reliably across browsers...
This is happening because D3's style transitions use getComputedStyle to retrieve the starting value to be interpolated. See here for more information. When WebKit's full-page zoom is being used, this will return different starting values for the transition. This disparity is limited to certain cases including font-size, which is why you probably won't see it elsewhere.
In fact, after .style("font-size", A), retrieving via .style("font-size") isn't guaranteed to return the value A that was set when a full-page zoom is in use.
I have used the following workaround for this in the past:
.styleTween("font-size", function(d) {
return d3.interpolate(
this.style.getPropertyValue("font-size"),
d.size + "px"
);
});
This overrides D3's use of getComputedStyle and retrieves the current font-size style directly (and assumes there is a font-size already set e.g. in your .enter() selection).
Again, my word cloud experience came in handy. :)
Browser page zoom is buggy in conjunction with SVG. You can fix the zoom level with CSS, with something like * { zoom: 1; }, but that causes other inconveniences for users. You could attempt to workaround the bug in JavaScript, but I think that would be a lot of work.