I just discovered anime.js and it feels like the right tool for what I need (animating some web tutorials in 2D).
The problem is that I'm using MathML (part of the HTML5 standard), which uses "math" tags.
HTML
<math>
<mrow>
<msqrt>
<mrow>
<msup class="ml4">
<mi class="letter">b</mi>
<mn>2</mn>
</msup>
</mrow>
</msqrt>
</mrow>
</math>
JS
<script type="text/javascript" src="anime.min.js"></script>
<script>
anime.timeline({loop: true})
.add({
targets: '.ml4 .letter',
opacity: [0, 1],
scale: [0.2, 1],
duration: 800
});
</script>
When I try to simply animate letters within a math tag (opacity, scale, duration), I get:
If I use anime.min.js (2.0)
In Firefox
"TypeError: right-hand side of 'in' should be an object, got undefined"
-> anime.min.js:9:136
In Safari
"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
-> "B" -> anime.min.js:9:145
If I use anime.js (2.0)
In Firefox
"TypeError: right-hand side of 'in' should be an object, got undefined"
-> anime.min.js:346:5
In Safari
"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
-> "getCSSValue" -> anime.min.js:346
In both cases, the math formula appears just fine but the animation isn't working.
I tried previous versions of anime.js with the same result.
I toyed with the code and the animation comes back + the error message goes away on Firefox and Safari if I get rid of the "math" tag. But then, of course, the math formula is a mess, which is of no help.
But it seems the issue is related to this math tag alone.
I also tried to style, unstyle the math tag and the inner tags but the error remains.
I could understand that this tag is unsupported by animate.js but the animation works just fine and without any error within my Coda2 (web dev software) on Mac, on its own dedicated browser.
So this seems very browser dependent but so far it's the only browser that seems to consider the script as valid.
I haven't found anything on the web that is addressing both anime.js and the MathML so it's hard to say if it's a bug or an error on my part.
Thank you.
https://jsfiddle.net/bt4u23rh/1/
You can use a wrapper, or you can modify the function getCSSValue on the animejs library. Basically that function looks for the style property for that specific target.
function getCSSValue(el, prop) {
if (prop in el.style) {
return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
}
}
When the code reaches the if line, your mi .letter doesn´t have that attribute and the call to the function fails and bubble up.
Using the proposed workaround, you can create a div that contains your mathML tags:
<div class="letterWrapper">
<math>
<mrow>
<msqrt>
<mrow>
<msup class="ml4">
<mi class="letter">b</mi>
<mn>2</mn>
</msup>
</mrow>
</msqrt>
</mrow>
</math>
</div>
https://jsfiddle.net/bt4u23rh/2/
Related
In trying to learn MathML, I found that the mfenced element used in this tutorial has been deprecated, so that Firefox no longer supports it. This example in the official MathML documentation simply uses <mo>(</mo> and <mo>)</mo>, respectively, to surround fractions in parentheses. When I tried this, I found that the parentheses had normal height and did not stretch to the height of the fraction. Yet the example code had no special attribute to control the parenthesis height, suggesting that it should have adjusted automatically (as it would in LaTeX). What is missing? Below is my code.
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<p>
<math>
<mo>(</mo>
<mfrac linethickness="0">
<mrow><mn>5</mn></mrow>
<mrow><mn>2</mn></mrow>
</mfrac>
<mo>)</mo>
<mo>=</mo><mn>10</mn>
</math>
</p>
</body>
</html>
you also need mrow to surround the mo stuff:
replace <mfenced> with <mrow><mo>(</mo>
replace </mfenced> with <mo>)</mo></mrow>
As the question title states, is it okay to write just
<math>a <msup>x 2</msup> + b x + c</math>
or do you really need to write
<math>
<mrow>
<mi>a</mi> <mo>⁢</mo> <msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mi>b</mi><mo>⁢</mo><mi>x</mi>
<mo>+</mo><mi>c</mi>
</mrow>
</math>
As far as Firefox goes it doesn't render a
Invalid Markup
error, but that hardly means other browser might not in the future if the spec actually prohibits it officially.
As the question title states, is it okay to write just
<math>a <msup>x 2</msup> + b x + c</math>
No, it isn't.
do you really need to write
<math>
<mrow>
<mi>a</mi> <mo>⁢</mo> <msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mi>b</mi><mo>⁢</mo><mi>x</mi>
<mo>+</mo><mi>c</mi>
</mrow>
</math>
Yes, see http://www.w3.org/TR/MathML3/chapter2.html#fund.syntax.
As far as Firefox goes it doesn't render a "Invalid Markup" error, but that hardly means other browser might not in the future if the spec actually prohibits it officially.
At the begin browsers render a "Invalid Markup" error for anything that doesn't follow the spec. Today browsers try to correct the markup. For example
<p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<p>
is invalid since you need to use
<p></p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<p></p>
but no browser will stop rendering the page because of it.
MathML is intended for mathematics presentation markup. It is aimed to provide all information needed for correctly typesetting a mathematical formula.
In mathematical typesetting, identifiers (or, simply "variables"), operators and numbers are typeset differently. There are a lot of subtle differences, but to name a few: identifiers are normally italic style (and use a mathematical serif font), whereas numbers are roman style. Operators use subtle spacing rules on either side. These are just a few examples.
As presentation MathML is not intended to describe the meaning of a formula, merely how it looks, all this information must be encoded in the markup. The MathML renderer does not interpret the formula, either. It looks at the markup and renders accordingly.
Authoring MathML directly is not easy, and, in fact, it is mostly done programmatically, rather than inputting directly. If you need a more straightforward way, try ASCIImath or LaTeX. A renderer like MathJax renders those as well.
I got the Salesforce Design System pilot from this morning's Webinar. I uploaded the package (as 'sds.zip') as a static resource. I'm calling the CSS (immediately after '' in the .cmp file) with:
<link href='/resource/sds/index.scss' rel="stylesheet"/>
However when I attempt to save I get the error:
Failed to save undefined: No COMPONENT named markup://use found : [markup://c:contactList]: Source
I think the 'use' error is a refrence to this code block, which is later in the .cmp file:
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#user" />
</svg>
I assume I'm importing the CSS incorrectly, what's the right way to do it?
You are importing the CSS correctly. That's the way to do it from inside a Lightning Component. From inside a Visualforce page you do <apex:stylesheet value="{!URLFOR($Resource.sds, '/resource/sds/index.css')}" />.
The problem is not the CSS import but VF not understanding the use and svg tags inside the component. For Visualforce to properly parse the tags you need to declare the namespace by adding the line <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">, with its matching closing tag at the end. This works fine if you just put it in VF, and you are using the svg tag in VF.
However, if you are putting the svg tag inside a Lightning Component, you need to create a separate svg component for it, as described in this tutorial.
In all other browsers, element.style seems to work fine.
But Internet Explorer 8 doesn't know it...
Getting this error when x is a div:
Error: 'x.style.left' is null or not an object
x.style itself is undefined. I looked at http://www.quirksmode.org/dom/changess.html but it doesn't say anything about styles on specific elements, just like http://help.dottoro.com/ljuefnvw.php doesn't say anything either.
<div id="example">
Test
</div>
<script>
document.getElementById('example').style.marginLeft = '50px';
</script>
works
instead of using element.style, use the specific tag name.
I have three equations in MathML. I want to align them at equals sign. I certainly can do this using mtable and columnalign. Is there much better and clean way to do this ?
You can use <maligngroup/>
<maligngroup> and its kin were never widely implemented and have not made it into MathML Core. I haven’t found any explicit statement on what’s supposed to be used instead; the W3C MathML Polyfills repo doesn’t even try to replace them.
But I really don’t see anything in Core’s limited element set that would do the job except <mtable>. So that’s almost certainly the way to go.
Here’s a simple(?) example, together with how Firefox renders it on my system using the Latin Modern Math font.
<math display="block">
<mtable>
<mtr>
<mtd><mi>y</mi></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mfrac>
<mrow>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
</mfrac>
</mtd>
<mtd></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mfrac>
<mrow>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi><mo>+</mo><mn>2</mn>
</mrow>
<mo>)</mo>
</mrow>
<mo>⁢</mo>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
<mo>)</mo>
</mrow>
</mrow>
<mrow>
<mi>x</mi><mo>−</mo><mn>2</mn>
</mrow>
</mfrac>
</mtd>
<mtd></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd><mi>x</mi><mo>+</mo><mn>2</mn></mtd>
<mtd>
<mtext>where </mtext>
<mrow><mi>x</mi><mo>≠</mo><mn>2</mn></mrow>
</mtd>
</mtr>
</mtable>
</math>
Problem: the table content renders very small, especially in the <mfrac>.
Solution: That’s because <mtable> sets math-style: compact; by default. Use CSS to set math-style: normal; instead. (MathML Core is supposed to integrate better with CSS, so maths can be styled the same way as anything else on the Web.)
Problem: Nothing but Safari actually supports math-style as of this writing.
Solution: Bury your head in your hands and wait for a future browser release. At least Firefox has a config option to enable it, so I can show you how it should look.
Problem: You want your equations to be left-aligned.
Solution: Again, CSS is the way to go… but MathML lacks an equivalent to <col>/<colgroup> for styling a whole table column at once. Work around it using selectors (and possibly classes) to target the relevant cells. In this case, I used mtd:nth-child(3) { text-align: left; }.
Problem: There’s a big whack of spacing at the right side of the equations (the third column), and it’s not part of the cell padding nor of the space between cells.
Solution: ???