laboratory

[ , ]
Project type
Experiment with
CSS and equations
Lab ideas?
Have ideas for experiments?
Tell me!
Posted in laboratory as ,
Date: Jul 06, 2011
2 comments

Displaying Math/Equations with CSS and HTML

Not that I spend much time browsing Calculus websites, but I have noticed there aren’t many that attempt to show math with anything other than images. Must require an awful lot of time in Photoshop. This experiment (and possibly project) is to see what it would take to do the same thing with HTML and CSS alone.

Famous math equations displayed with CSS/HTML

Oh the irony of showing an image in an experiment meant to avoid them

My hope is to establish a simple system for others to use, but these are early stages and I’ve not tested much across older browsers. Also my knowledge of higher level math fairly stinks. However I’ve got some fairly complicated equations looking pretty good in at least Chrome/Firefox/Safari.

See experiment (in progress)

Related Posts:

2

This entry was posted on Wednesday, July 6th, 2011 at 6:50 am and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Displaying Math/Equations with CSS and HTML”

  1. 1
    Results: Experiments for Week 27 | Hanami Design | Reply
    July 10, 2011 at 8:44 am

    [...] Play with typography of math formulas with CSS [Success] Created some pretty compelling solutions for displaying math in HTML without using images, but not sure yet if these solutions are as elegant as they could be. See Displaying Math/Equations with HTML and CSS. [...]

  2. 2
    Ziku | Reply
    May 14, 2012 at 3:22 am

    Awesome pioneering work here. I’ve got a few sites that are engineering/science based and I often publish tutorials.

    Marking up formulas in problem solving questions is a pain but is in my eyes far more semantic. I’m a huge fan of using special characters and creating basic shapes using css rather than hoping on photoshop for such minutia.

    So keep this up! How is it coming along anyway — any updates?

    I’ve bookmarked this and will watch keenly :-)

Leave a Reply