Apparently MathJax works with XHTML pages, but I cannot seem to get this to work. Does anyone have a sample file with this working? I have a simple example that works in HTML but not when converted to valid XHTML (validated with Oxygen XML Editor).
OK I did a bit more paring back of my work and have now crafted a basic sample that seems to render correctly via XHTML in Chrome 74. Case closed, and hope this helps someone else.
EDIT: I would note that the file suffix has to be .xhtml not .xml. If the suffix is .xml then the MathJax does not render. It appears the MIME type of the file must be "application/xhtml+xml" in order for MathJax to work.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>MathJax Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_CHTML"></script>
</head>
<body>
<p>
Equation below:
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</p>
</body>
</html>
Related
Using xslt to generate web-content (QXmlQuery), the resulting xhtml page has self-closed tags, which I am unable to make browsers to understand.
The problem relates with major browsers keeping parsing the self-closed tag as if it was HTML5, thus, including following content inside the self-closed tag.
Example:
<a><xsl:attribute name="name"><xsl:value-of select="#title"/></xsl:attribute></a>
Will generate content like:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...
<a name="Intro"/>
Some content
Which is then interpreted in the browser as:
<a name="Intro">Some content</a>
A trivial, but not elegant solution is to add a comment:
<a><xsl:attribute name="name"><xsl:value-of select="#title"/></xsl:attribute><xsl:comment/></a>
I would like to understand the problem:
Is xhtml deprecated? If this is the case, then xslt for web generation is deprecated too?
If not deprecated, how to enable proper parsing of xhtml for modern browsers? (with proper, I mean with support for self-closed tags).
I tried several DOCTYPEs, and looked about the possible xslt deprecation without results. But I have to admit that I have been out of web development for a while, forgive me if this is a trivial question.
Full example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div>
<span/>
Dummy content
</div>
</body>
</html>
Which can be seen with "Dummy content" wrongly inside span
To my eyes, this should be a valid XHTML document:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<a:html xmlns:a="http://www.w3.org/1999/xhtml">
<a:head>
<a:title>Document title</a:title>
</a:head>
<a:body>
<a:h1>Hello World!</a:h1>
</a:body>
</a:html>
However, it is not handled like XHTML by neither Firefox nor Internet Explorer, instead showing as text (with tags not visible). If I remove the namespace prefix…
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
… it is rendered fine. I would have thought that both documents are semantically equal. Why does the first one not work?
You have to make sure that browsers get the hint to interpret the document as application/xhtml+xml (or possibly one of the other XML MIME types) instead of text/html.
On a server, you can achieve this by sending the corresponding Content-Type HTTP header:
Content-Type: application/xhtml+xml
Locally, you can typically achieve this by using .xhtml instead of .html as file extension (but this might depend on your system).
I had this code in my website
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
<script type='text/javascript' src='/lib/player/swfobject.js'></script>
swfobject was not working (not loaded).
After altering the code to:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type='text/javascript' src='/lib/player/swfobject.js'></script>
It worked fine.
The document was parsed as HTML5.
I think it’s funny. Okay, granted a tag that is closed and a self-closing tag are not the same. So I would understand if jQuery couldn’t load (although I find it ridiciulous).
But what I do not understand is that jQuery loads but the following, correctly written tag, doesn’t?
In HTML, there are tags which are always self-closed. For example, <hr>Some content here</hr> does not make any sense. In the same way, there are tags which cannot be self-closed. <script> tag is one of them.
I am not sure about the reason of no self-closed <script> tags, but the reason might come from the fact that the tag was intended to always contain code inside. Again, I'm not sure.
Because it gets parsed as:
Line 1: Start tag for script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
Line 2: JavaScript (really broken JavaScript!) to execute if the external script mentioned on line 1 fails to load
<script type='text/javascript' src='/lib/player/swfobject.js'>
Line 3: End tag for script started on line 1
</script>
Okay, granted a tag that is closed and a self closing tag are not the same.
They are the same (if there is no content), but only in XML documents. An XHTML document served as application/xhtml+xml is an XML document. In an HTML document, thanks to a legacy of improper implementations by browsers, a self-closing tag is just a start tag (and so is only OK when the end tag is forbidden).
David Dorward's answer explains this from one angle, but there is a deeper reason why you can't do this:
A slash at the end of a tag does not make it self-closing in HTML
The self-closing syntax is part of XML. In a normal HTML document, it has no meaning.
#Joe Hopfgartner: Did you alter the code to test if
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js" />
<script type="text/javascript" src="/lib/player/swfobject.js" />
works? ;-)
Update:
Run the code and the <p> element gets hidden, so...looks like it works?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4531772</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"/>
<script type="text/javascript" src="4531772.js"/>
</head>
<body>
<p class="test">Testing...</p>
</body>
</html>
JavaScript (4531772.js)
$(document).ready(function() {
$('.test').hide();
});
My browser, Firefox 3.6, seems to display the Mathml equations in the W3C test suite just fine. But if I copy the code into my webpage, like from here, all Firefox produces is something like x y x y instead of how it correctly rendered the W3C page. What am I missing here>
EDIT: I just tried it in Chrome and Chrome failed the test itself by rendering it as x y x y. Needless to say, it rendered the math in my own webpage the same.
EDIT 2: I tried it on a new html document. Doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML" mode="display">
<mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>
</math>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML" mode="inline">
<mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>
</math>
</body>
</html>
I swear the W3C equations render just fine though...
Including
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"></script>
and then using
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mroot>
<mrow>
<mi>x</mi>
</mrow>
<mn>4</mn>
</mroot>
</math>
works in Chrome and Firefox
Update:
Since the mathjax cdn is shutting down, change
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/2.7-latest/MathJax.js?...">
</script>
to
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...">
</script>
as others have said you need to serve as xml for FF3, if you want to use mathml-in-html5 served as text/html you need firefox 4 (or webkit nightlies)
Putting your file in a filename named mml-prb.xhtml works. Note the extension.
You should use xml and serve it as such (i.e. use correct mimetype), which means you have to use xhtml and mathml tags with proper namespaces. Take how W3C serves the example as an example.
Note: HTML5 is NOT xml
When I tried to convert my website to xhtml, things went perfectly until I realized that IE doesn't support it.
I went to the xhtml FAQ's section about IE, and tried out the workaround there, using an identity transformation to trick IE into rendering it as html in quirks mode. Unfortunately, this seems to make firefox (and possibly other browsers?) display the css background only over the text of the page.
So here is the code:
test.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="backgroundexample.css" />
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
backgroundexample.css:
body {
background-color:red;
}
copy.xsl:
<stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>
The effect of this is that the background only displays over the text, not the whole page.
I could not find the problem here or by googling, so please tell me if this has already been asked (and i am therefore bad at searching).
Can't verify your problem. Did you have tried something like this?
html, body {
background-color:red;
}