Chrome not rendering math properly - web

I use Chrome, (Version 63.0.3239.84 (Official Build) (64-bit)), and lately I have been getting what I believe are math rendering errors like this:
What do I to remedy this? Thanks!

The source code probably reads $7.95 for equity trades and $1.... MathJax renders the data between the dollar signs.
I believe that you can display a literal dollar by putting it in a span element (<span>$</span>).

Related

MathML in Firefox OS

I am doing a small project where I write mathematical texts in HTML using MathML. When I test it on Firefox, the results are as expected, everything is displayed as expected.
However, in Firefox OS 2.0 (that I would expect to work in the same way), there are problems with characters like the real set (ℝ) or the star (⋆), which are displayed as gray blocks.
Is this a problem with Firefox OS or there are specific tags to be notified on the HTML that allow these symbols to be correctly interpreted? Or is there another way to represent this symbols?
What you are seen is the replacement character, often a black diamond with a white question mark, �, that in Firefox OS is a gray block.
Why you seen the replacement character only in Firefox OS? Because only Firefox OS hasn't the character that you need. As Jason Weathersby already mention, you should check https://bugzilla.mozilla.org/show_bug.cgi?id=775060.
Last year I worked with Firefox OS and MathML for Google Summer of Code, https://r-gaia-cs.github.io/gsoc2014/, and had to build my own image of Firefox OS to have properly fonts available. If you want to try build your own image of Firefox OS with fonts that support MathML, read http://ftb.rgaiacs.com/2015/03/16/math_at_firefox_os.html.
Gays blocks normally means that the font that you are using doesn't has the character.

Batik/Rhino JavaScript support?

Just want to get a sanity check on this before wasting too much time - does Batik actually have usable JavaScript support in its SVG display and rasteriser?
Problem: I've got code which generates SVG files, using a few thousand lines of fairly complex JavaScript. This works on Firefox, Chrome, Opera, Safari, and IE9. I've spent the morning trying to get Batik to display a sample SVG file (in Squiggle) and to rasterise it to png/pdf/etc. I've already fixed one problem (I had to move a text node into the DOM to get splitText to work), and the next problem is only a few lines down (nodeValue.trim() doesn't work on a text node).
Just about to give up and ignore Batik (v1.7, downloaded yesterday), unless someone has some positive experience of it?

How can you combine Mathjax with Mathplayer?

This site http://accessiblemath.dessci.com/2010/09/mathplayer-mathjax-more-accessible-math.html is telling me it's possible to combine Mathjax with Mathplayer to make mathematics display faster.
A great feature of MathJax is that it can turn the display of math
over to a native MathML renderer such as MathPlayer. This results in
much faster display of the math.
Is this a good idea and if so, how should one go about doing this?
You don't have to do anything. MathJax will recognize the presence of MathPlayer automatically and hand over rendering of any MathML. (MathJax will still convert TeX or AsciiMath to MathML first.)

Advanced CSS Circles

I'm trying to make 3 different circles to my website. I don't want to insert it as a graphic/image file. So I've been trying to achieve it using CSS3, but I can't really work my fingers around it.
What will it look like?
I have uploaded a picture of what I'm trying to achieve at: www.sp34k.com/etc/circles.jpg
I can't really show the code I've been trying to use to achieve this, as it all looks totally weird and nothing floats currectly.
What I've tried
What I've tried is to make 3 circles with position absolute and then use % (percentage) to determine the width of the colored parts, but I can't twist my mind around how it should be set up.
Any suggestions is appreciated,
Mike
Here is a simple try of me to achieve the effect you want:
DEMO
edit: css-only solution
It can be easily animated with javascript or keyframes. Arbitrary content would go into the inner div. To change the percentage, simply adjust the angle of the pseudo-elements.
With a little more effort this could be easily refined I guess;)
Note: the transform has the webkit-prefix, so it works only in chrome/safari - to see it in firefox or other browsers, you need to change the prefix.
P.S. I will animate it when I'm home from work.
Good one by Christoph but he is using SASS/SCSS which are comparatively slow then normal CSS because they have to be converted to CSS before browser render it so I have have a different Solution for you
try this fiddle

How to properly use decorative fonts on a web page

I'd like to try some decorative fonts for a web site, like this one (just as an example):
http://www.dafont.com/nymphette.font
As usual, for the web one must verify the format compatibility of the font and licensing - no problem with that. The question is relative to the proper integration in a page without side effects. As you can see in the character table, decorations are mapped to regular characters - e.g 'A'. Let's suppose I want to use the decoration mapped to A; if the web page is consumed on a browser which doesn't support external fonts, of when the font is not downloaded yet, the decoration would be rendered as 'A', and it's confusing; a browser with accessibility support would probably speak the letter out loud, etc...
How to avoid that?
Thanks.
PS Of course it appear simpler to use plain image decorations. My question is not related to solving a problem, rather to experiment with this approach and understand how workable is.
** Update: I clarify that I know how to embed fonts in CSS, and I'm already using some "regular" (alphabetic) fonts from Google. The difference between alphabetic fonts and decorative fonts is that clearly you encode readable text with the former ones; you can minimize inconveniences during the loading by specifying fallback such as "serif", etc... With decorative fonts, you're using characters to represent graphics, hence my doubts.
You can embed fonts in your CSS.
You might also want to look into the Google Font API if you want some Google fonts with no learning curve.

Resources