Skip to content

Instantly share code, notes, and snippets.

@cben

cben/README.md

Last active April 11, 2018 13:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cben/17ce7022d7139de7bdb2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cben/17ce7022d7139de7bdb2 to your computer and use it in GitHub Desktop.
Download ZIP
testing mathml->image fallback in email
Raw
README.md

Test mail1.html

Tested 2 fallback ways inside semantics tag:

  1. <annotation-xml encoding="MathML-Presentation"><mtext><img ... (the math was display="block")
  2. <annotation-xml encoding="text/html"><img ... (the math was inline)

Didn't try altimg fallbacks, nor <annotation encoding="image/png" src=...> as I figure it's unlikely any clients that don't understand MathML would honor them. img can be honored simply by skipping all the unfamiliar tags.

I tried to use xmlns in a way that (hopefully) would work both in HTML5 and older parsers... EDIT: forgot one xmlns on the inline math.

Results at https://www.emailonacid.com/app/acidtest/display/result/rfoqIo77O3gXiDbcer4IPM30eMOvQUCDUGA0rP6GYGwDJ/66/shared/ (but see next test instead, has colors)

Test mail2.html

  • repeat test 1 with colors: MathMLs are yellow, PNGs are green.
  • added xmlns that I forgot on the inline math in mail1.html
  • added <object> tag (putting fallback image inside it instead of inside semantics). bug: used relative ` which can't work.

    Results at https://www.emailonacid.com/app/acidtest/display/summary/2X0QCL4ff2zFJC4GcZMGqvjsW1SQSAK8gxZT25gLFHQAt/shared

    Test mail3.html

    • fixed object link to math.xml.
    • styled objects as display: inline;

    Results at https://www.emailonacid.com/app/acidtest/display/summary/Mj3AC85OrXar1OWsifpf5ggbzN2Wa5Y1ogiE6tCIqn5GZ/shared

    Results (TODO: not updated to mail3)

    math > semantics > annotation-xml

    Good news: ALL tested clients that don't render MathML show the image :-) Less good news: Most clients show both the text portions of the MathML (n!=2πn nen 1+O 1n, 2 x) and the image. (With images off, most do show the ALT text or at least a "broken image" outline)

    Clients that show neither image nor MathML:

    • Lotus Notes 6.5 and 7: those don't support PNG so they show a broken image outline with ALT text. 7 was released in 2005, so I don't care.
    • T-Online.de Chrome (win): with images off shows only ALT text for the <annotation-xml encoding="text/html"><img ... image; with images on, shows neither formula!

    Clients that do hide the MathML and show only images:

    Clients that render the MathML:

    • Apple Mail 6
    • Apple Mail 7
    • iPad 2
    • iPad Mini
    • iPhone 5S (iOS 7, 8)
    • iPhone 5S (iOS 8)
    • iPhone 6 (iOS 8)
    • iPhone 6+ (iOS 8)
    • Thunderbird
    • surprise: Outlook 2011 (Mac) (it uses WebKit)

    Disappointingly, no webmail client renders the MathML - though many were tested via firefox or on mac

    object > img

    Worked OK in browsers (up to object's rigid size): http://codepen.io/cben/pen/jEJpQO/

    Alas, completely blocked in all clients — show everywhere as blanks, with forced line break (despite display: inline): object thunderbird

    What next?

    Try somehow putting MathML text externally (or pseudo-externally via data URI) so it's invisible to clients that skip math and display the image? The options I see are:

    • object tag — blocked.
    • share tag within MathML? It's Content MathML (and new in version 3?), so I'm concerned it may not be understood by clients that do understand MathML enough to hide the image annotation, resulting in not showing anything.
    • some clever CSS that makes text invisible, but wouldn't apply to math (or would be overriden by math attributes)?
Raw
mail1.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MathML fallback</title>
<meta charset="utf-8"/>
</head>
<body>
<p>Stirling's approximation:
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<semantics>
<mrow><mi>n</mi><mo>!</mo><mo>=</mo><msqrt><mrow><mrow><mn>2</mn><mi>&#960;</mi><mi>n</mi></mrow></mrow></msqrt><msup><mrow><mrow> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mi>n</mi></mrow></mrow><mrow><mrow><mi>e</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mrow><mrow><mi>n</mi></mrow></msup> <mfenced open='(' close=')' ><mrow><mn>1</mn><mo>+</mo><mi>O</mi> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mn>1</mn></mrow></mrow><mrow><mrow><mi>n</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mfenced></mrow>
<annotation-xml encoding="MathML-Presentation"><mtext><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?n%21%20%3D%20%5Csqrt%7B2%20%5Cpi%20n%7D%20%7B%5Cleft%28%20%5Cfrac%7Bn%7D%7Be%7D%20%5Cright%29%7D%5En%20%5Cleft%28%201%20&plus;%20O%20%5Cleft%28%20%5Cfrac%7B1%7D%7Bn%7D%20%5Cright%29%20%5Cright%29" alt="ALT TEXT" width=246 height=45/></mtext></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="MathML-Presentation" -> mtext -> img)
</p>
<p>The fraction
<math>
<semantics>
<mfrac>
<mn>2</mn>
<mi>x</mi>
</mfrac>
<annotation-xml encoding="text/html"><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cinline%20%5Cfrac%7B2%7D%7Bx%7D" alt="ALT"/></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="text/html" -> img) diverges around 0.
</p>
</body>
</html>
Raw
mail2.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MathML fallback</title>
<meta charset="utf-8"/>
</head>
<body>
<p>The objects
<object data="data:application/mathml+xml;charset=utf-8,<math xmlns='http://www.w3.org/1998/Math/MathML' mathbackground='yellow'><mfrac><mn>y</mn><mi>3</mi></mfrac></math>" style="width: 1em; height: 4ex;">
<img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7By%7D%7B3%7D" alt="ALT"/>
</object>
(data uri) and
<object type="application/mathml+xml" data="math.xml" style="width: 1em; height: 4ex;">
<img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7Bz%7D%7B4%7D" alt="ALT"/>
</object>
(external file) are fractions.
</p>
<p>Stirling's approximation:
<math xmlns="http://www.w3.org/1998/Math/MathML" mathbackground="yellow" display="block">
<semantics>
<mrow><mi>n</mi><mo>!</mo><mo>=</mo><msqrt><mrow><mrow><mn>2</mn><mi>&#960;</mi><mi>n</mi></mrow></mrow></msqrt><msup><mrow><mrow> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mi>n</mi></mrow></mrow><mrow><mrow><mi>e</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mrow><mrow><mi>n</mi></mrow></msup> <mfenced open='(' close=')' ><mrow><mn>1</mn><mo>+</mo><mi>O</mi> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mn>1</mn></mrow></mrow><mrow><mrow><mi>n</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mfenced></mrow>
<annotation-xml encoding="MathML-Presentation"><mtext><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20n%21%20%3D%20%5Csqrt%7B2%20%5Cpi%20n%7D%20%7B%5Cleft%28%20%5Cfrac%7Bn%7D%7Be%7D%20%5Cright%29%7D%5En%20%5Cleft%28%201%20&plus;%20O%20%5Cleft%28%20%5Cfrac%7B1%7D%7Bn%7D%20%5Cright%29%20%5Cright%29" alt="ALT TEXT" width=246 height=45/></mtext></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="MathML-Presentation" -> mtext -> img)
</p>
<p>The fraction
<math xmlns="http://www.w3.org/1998/Math/MathML" mathbackground="yellow">
<semantics>
<mfrac>
<mn>2</mn>
<mi>x</mi>
</mfrac>
<annotation-xml encoding="text/html"><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7B2%7D%7Bx%7D" alt="ALT"/></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="text/html" -> img) diverges around 0.
</p>
</body>
</html>
Raw
mail3.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MathML fallback</title>
<meta charset="utf-8"/>
</head>
<body>
<p>The objects
<object data="data:application/mathml+xml;charset=utf-8,<math xmlns='http://www.w3.org/1998/Math/MathML' mathbackground='yellow'><mfrac><mn>y</mn><mi>3</mi></mfrac></math>" style="width: 1em; height: 4ex; display: inline;">
<img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7By%7D%7B3%7D" alt="ALT"/>
</object>
(data uri) and
<object type="application/mathml+xml" data="https://rawgit.com/cben/17ce7022d7139de7bdb2/raw/86928e5421c63a2ce82b831d1a356fbfd1018bd8/math.xml" style="width: 1em; height: 4ex; display: inline;">
<img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7Bz%7D%7B4%7D" alt="ALT"/>
</object>
(external file) are fractions.
</p>
<p>Stirling's approximation:
<math xmlns="http://www.w3.org/1998/Math/MathML" mathbackground="yellow" display="block">
<semantics>
<mrow><mi>n</mi><mo>!</mo><mo>=</mo><msqrt><mrow><mrow><mn>2</mn><mi>&#960;</mi><mi>n</mi></mrow></mrow></msqrt><msup><mrow><mrow> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mi>n</mi></mrow></mrow><mrow><mrow><mi>e</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mrow><mrow><mi>n</mi></mrow></msup> <mfenced open='(' close=')' ><mrow><mn>1</mn><mo>+</mo><mi>O</mi> <mfenced open='(' close=')' ><mrow><mfrac linethickness="1"><mrow><mrow><mn>1</mn></mrow></mrow><mrow><mrow><mi>n</mi></mrow></mrow></mfrac></mrow></mfenced></mrow></mfenced></mrow>
<annotation-xml encoding="MathML-Presentation"><mtext><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20n%21%20%3D%20%5Csqrt%7B2%20%5Cpi%20n%7D%20%7B%5Cleft%28%20%5Cfrac%7Bn%7D%7Be%7D%20%5Cright%29%7D%5En%20%5Cleft%28%201%20&plus;%20O%20%5Cleft%28%20%5Cfrac%7B1%7D%7Bn%7D%20%5Cright%29%20%5Cright%29" alt="ALT TEXT" width=246 height=45/></mtext></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="MathML-Presentation" -> mtext -> img)
</p>
<p>The fraction
<math xmlns="http://www.w3.org/1998/Math/MathML" mathbackground="yellow">
<semantics>
<mfrac>
<mn>2</mn>
<mi>x</mi>
</mfrac>
<annotation-xml encoding="text/html"><img xmlns="http://www.w3.org/1999/xhtml" src="http://latex.codecogs.com/png.latex?%5Cbg_green%20%5Cinline%20%5Cfrac%7B2%7D%7Bx%7D" alt="ALT"/></annotation-xml>
</semantics>
</math>
(that was annotation-xml encoding="text/html" -> img) diverges around 0.
</p>
<p>MathMLs are yellow, PNGs are green.</p>
</body>
</html>
Raw
math.xml
<math xmlns='http://www.w3.org/1998/Math/MathML' mathbackground='yellow'><mfrac><mn>z</mn><mi>4</mi></mfrac></math>
@cben
Copy link
Author

cben commented Mar 27, 2015

mail1.html: forgot xmlns on the inline math.

@cben
Copy link
Author

cben commented Mar 30, 2015

  • WIP: test2 results need (1) retest on working math.xml URL (2) review on fixed xmlns

@cben
Copy link
Author

cben commented Aug 30, 2015

Bah. The emailonacid tests are gone. It seems they only keep results for 30 days :-(
Will have to rerun and copy into the gist for posterity...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment