These days, I’m working on the slides for my next talk, “The humble border-radius”. It will be about how much work is put into CSS features that superficially look as simple as border-radius, as well as what advances are in store for it in CSS Backgrounds & Borders 4 (of which I’m an editor). It will be fantastic and you should come, but this post is not about my talk.

As you may know, my slides are made with HTML, CSS & JavaScript. At some point, I wanted to insert an equation to show how border-top-left-radius (as an example) shrinks proportionally when the sum of radii on the top side exceeds the width of the element. I don’t like LaTeX because it produces bitmap images that don’t scale and is inaccessible. The obvious open standard to use was MathML, and it can even be directly embedded in HTML5 without all the XML cruft, just like SVG. I had never written MathML before, but after a bit of reading and poking around existing samples, I managed to write the following MathML code:

```
<math display="block">
<mrow>
<msub>
<mi>r′</mi>
<mi>top-left</mi>
</msub>
<mo>=</mo>
<mi>min</mi>
<mo>(</mo>
<msub>
<mi>r</mi>
<mrow>
<mi>top-left</mi>
</mrow>
</msub>
<mo>,</mo>
<mi>width</mi>
<mo>×</mo>
<mfrac>
<mrow>
<msub>
<mi>r</mi>
<mi>top-left</mi>
</msub>
</mrow>
<mrow>
<msub>
<mi>r</mi>
<mi>top-left</mi>
</msub>
<mo>+</mo>
<msub>
<mi>r</mi>
<mi>top-right</mi>
</msub>
</mrow>
</mfrac>
<mo>)</mo>
</mrow>
</math>
```

I was very proud of myself. My first MathML equation! It’s actually pretty simple when you get the hang of it: `<mi>`

is for identifiers, `<mo>`

for operators and those are used everywhere. For more complex stuff, there’s `<mfrac>`

for fractions (along with `<mrow>`

to denote the rows), `<msqrt>`

for square roots and so on.

It looked very nice on Firefox, especially after I applied Cambria Math to it instead of the default Times-ish font:

However, I soon realized that as awesome as MathML might be, not not all browsers had seen the light. IE10 and Chrome are the most notable offenders. It looked like an unreadable mess in Chrome:

There are libraries to make it work cross-browser, the most popular of which is MathJax. However, this was pretty big for my needs, I just wanted **one** simple equation in **one** goddamn slide. It would be like using a chainsaw to cut a slice of bread!

The solution I decided to go with was to use Modernizr to detect MathML support, since apparently it’s not simple at all. Then, I used the `.no-mathml`

class in conjunction with selectors that target the MathML elements, to mimic proper styling with simple CSS. It’s not a complete CSS library by any means, I just covered what I needed for that particular equation and tried to write it in a generic way, so that if I need it in future equations, I only have to *add* rules. Here’s a screenshot of the result in Chrome:

It doesn’t look as good as Firefox, but it’s decent. You can see the CSS rules I used in the following Dabblet:

Obviously it’s not a complete MathML-to-CSS library, if one is even possible, but it works well for my use case. If I have to use more MathML features, I’d write more CSS rules. The intention of this post is not to provide a CSS framework to use as a MathML fallback, but to show you a solution you could adapt to your needs. Hope it helps!

Pingback: fuck google()

Pingback: angara fahise()

Pingback: VTU Notes()

Pingback: opulence for life reviews()

Pingback: slipandfall()

Pingback: lawyerforaccident.net()

Pingback: Social media marketing()

Pingback: Life Insurance()

Pingback: https://tribot.org/repository/script/id/742-delta-cooker/()

Pingback: game subway surfers()

Pingback: https://tribot.org/()

Pingback: Watch Dragon Ball Super Episodes - Dragon Ball Super English/Dubbed()

Pingback: finasterida 10mg()

Pingback: hand carved furniture()

Pingback: frive,jeugos friv,jogos friv,jeux,jocuri,frif,friv.com,games,best,play,free,online()

Pingback: download film terbaru()

Pingback: tutorial seo blog()

Pingback: mp43gpfilm()

Pingback: download triplets of belleville()

Pingback: hd1080hdkinoonline()

Pingback: download identity 2003()

Pingback: paprika movie 1991()

Pingback: download film the matrix 2 sub indo()

Pingback: more()

Pingback: government grants for convicted felons()

Pingback: download film terbaru subtitle indonesia()

Pingback: lampamafussil()

Pingback: kinoklub()

Pingback: drama2016()

Pingback: jpmsruvideotoppornovideo()

Pingback: cytomel online()

Pingback: jpmsru()

Pingback: top2017bloomingme()

Pingback: mir.dikogo.zapada.ceria.sezon()

Pingback: aisti.online.smotret.aisti.mult()

Pingback: doktor.strendj.online.kino.()

Pingback: tamoxifen citrate()

Pingback: parabolan()

Pingback: pribol()

Pingback: ribotargets ltd()

Pingback: sitemap()

Pingback: steroids for bodybuilding for sale()

Pingback: 4sezon()

Pingback: molodejka14seria()

Pingback: Молодежка 4 сезон 16 серия и 17 и 18 и 14 серия()

Pingback: Молодежка 4 сезон 16 серия и 17 и 18 и 14 серия()

Pingback: molod17()

Pingback: trumpnews()

Pingback: molodezhka4seria()

Pingback: molodejka()

Pingback: Free Classified Ads()

Pingback: molodezhka4sezon17seriya18192()

Pingback: Free Classified Ads Worldwide()

Pingback: molodejka4sezon21s()

Pingback: link2016()

Pingback: xml18112016()

Pingback: xml181120167()

Pingback: molodezhka4sezon212223seriya()

Pingback: molodejka4sezon21seria21seria22seria23()

Pingback: molodejka4seria25()

Pingback: lastssadsafdsa()

Pingback: Молодежка4сезон25серия26серия()

Pingback: muscle building for women()

Pingback: dadafdf3ddafdsa()

Pingback: dadafdf3ddafdsa()

Pingback: Classified ads as best as you gets()

Pingback: nesaporn()

Pingback: wRfqnI8IRxk()

Pingback: anybunny anybunny hd xxx porn tube video videos free online hot movies()

Pingback: rajwap hd xxx porn tube video videos free online hot movies XXX()

Pingback: sopharma clenbuterol()

Pingback: kinokradserial()

Pingback: Google()

Pingback: easy murphy bed()

Pingback: girnede satılık ev fiyatları()

Pingback: Black magic()

Pingback: thigh high()

Pingback: snuff bottles()

Pingback: work at home 2018()

Pingback: old postcards()

Pingback: butterfly sex toys()

Pingback: sex toys cleaner()

Pingback: sex toy review()

Pingback: adam & eve sex toys()

Pingback: bullet sex toy()

Pingback: pink rabbit sex toy()

Pingback: california surf()

Pingback: dvd專賣店()

Pingback: ean codes()

Pingback: adam and eve()

Pingback: RMUTT()

Pingback: coffee, 100% kona()

Pingback: coffee’s best kona()

Pingback: buy 100% kona()

Pingback: clínica de recuperação()

Pingback: download music video()

Pingback: Accessories()

Pingback: free web hosting()

Pingback: 9 inch dong()

Pingback: realistic dildo()

Pingback: g spot vibrator()

Pingback: realistic vibrating dildo()

Pingback: rabbit vibrator()

Pingback: apps for pc download()

Pingback: foreplay()

Pingback: basement renovation in Atlanta()

Pingback: slot machine games free()

Pingback: Duvet covers()

Pingback: chinese logistics()

Pingback: sfico.info xxx video xnxxx xxx hd wwwxxx()

Pingback: rampant vibrator()

Pingback: web design company()

Pingback: Venture Point Network()

Pingback: vibrator for beginners()

Pingback: most powerful vibrator()

Pingback: megogoserial.ru()

Pingback: tra()

Pingback: best butt plug()

Pingback: flesh like dildo()

Pingback: Taoist Real Sex Talk()

Pingback: Quick News Updates()

Pingback: g spot vibrator()

Pingback: AR-670-1 compliant uniform boots()

Pingback: free download for windows 8free download for pc()

Pingback: couples toys()

Pingback: realistic sex toy()

Pingback: vacate cleaning Melbourne()

Pingback: 43cc engine parts()

Pingback: label tudung()

Pingback: g spot toy()

Pingback: wife happy()

Pingback: Easy recipes for vegetarians()

Pingback: rental cleaning Melbourne()

Pingback: pest control seattle wa()

Pingback: vibrating butt plug()

Pingback: gay toys()

Pingback: best gay sex toys()

Pingback: anal toy()

Pingback: Butterfly Kiss Vibrator()

Pingback: inflatable butt pug()

Pingback: Candles()

Pingback: dr. kat()

Pingback: adam and eve()

Pingback: adam and eve sex toys()

Pingback: sinister smotret online()

Pingback: carpet cleaning Melbourne()

Pingback: смотреть()

Pingback: kinogo()

Pingback: Get the latest news and information on sports and championship events()

Pingback: kala jadu()

Pingback: interior design Singapore()

Pingback: wet wild g()

Pingback: adult toy()

Pingback: sex toys()

Pingback: Magic Massager()

Pingback: Adam and Eve Butterfly Kiss()

Pingback: Magic Wand Original()

Pingback: Best Vibrator()

Pingback: Best Female Arousal Products()

Pingback: Dolphin Vibrator()

Pingback: Head Honcho Sex Toy()

Pingback: Bondage Toys()

Pingback: Sex lube()

Pingback: xmt85c4wx5ctwxw3tcerthve56()

Pingback: adult sex toy()

Pingback: personal lubricant()

Pingback: Cheap bond back cleaning Melbourne()

Pingback: Sripatum university()

Pingback: staying hard in bed()

Pingback: pc games apps free download()

Pingback: free download for pc windows()

Pingback: transformery-posledniy-rycar-2017()

Pingback: feather tickler()

Pingback: transformery-5-posledniy-rycar-2017-kinohd720()

Pingback: robert()

Pingback: hydraulic repair()

Pingback: quick divorce in PA()

Pingback: myxxxbase.mobi()

Pingback: sex toys for gay()

Pingback: adam and eve sex toys()

Pingback: nurse costume()