{"id":474,"date":"2011-03-08T12:50:10","date_gmt":"2011-03-08T17:50:10","guid":{"rendered":"http:\/\/blogs.vassar.edu\/acs\/?p=474"},"modified":"2022-09-13T11:29:08","modified_gmt":"2022-09-13T15:29:08","slug":"math-on-the-web","status":"publish","type":"post","link":"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/","title":{"rendered":"Math on the web"},"content":{"rendered":"<script>fsg_json['fsg_post_474'] = [\n{id: 479, image: 'http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi.png', extlink: '', thumb: 'https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi-150x124.png', permalink: '<div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/ipi\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div>', layer: '<div class=\"galleria-infolayer\"><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div><div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/ipi\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div>'},\n{id: 480, image: 'http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode.jpg', extlink: '', thumb: 'https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode-150x150.jpg', permalink: '<div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/latexcode\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div>', layer: '<div class=\"galleria-infolayer\"><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div><div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/latexcode\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div>'},\n{id: 481, image: 'http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot.jpg', extlink: '', thumb: 'https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot-150x150.jpg', permalink: '<div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/latexplot\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div>', layer: '<div class=\"galleria-infolayer\"><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div><div class=\"galleria-layeritem\"><a title=\"Permalink\" href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/latexplot\/#0\"><div class=\"galleria-link-bookmark\"><\/div><\/a><\/div><div class=\"galleria-layeritem\" style=\"padding-right: 20px;\"><\/div>'}\n];<\/script>\n<p><em>by Cristi\u00e1n Opazo<\/em><a data-postid=\"fsg_post_474\" data-imgid=\"479\" href=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-479\" title=\"ipi\" alt=\"\" src=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi.png\" width=\"400\" height=\"124\" srcset=\"https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi.png 400w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi-300x93.png 300w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/ipi-150x46.png 150w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>Since its inception, the World Wide Web has gradually evolved in order to accommodate user&#8217;s needs, particularly in regards to input and output of text and images. What started as very rudimentary displays based on the <a href=\"http:\/\/en.wikipedia.org\/wiki\/ASCII\" target=\"_blank\">ASCII character set<\/a>, has now become expanded, standardized systems like <a href=\"http:\/\/www.unicode.org\/standard\/WhatIsUnicode.html\" target=\"_blank\">Unicode<\/a>, <a href=\"http:\/\/www.w3.org\/TR\/html401\/\" target=\"_blank\">HTML4<\/a> (and hopefully soon <a href=\"http:\/\/html5.org\/\" target=\"_blank\">HTML5<\/a>), <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets\" target=\"_blank\">CSS<\/a> and all other <a href=\"http:\/\/www.webstandards.org\/learn\/faq\/\" target=\"_blank\">web standards<\/a> in use today.<strong> But what about the most universal of human languages, mathematics?<\/strong> The evidence tells us that the ability to display mathematical expressions on the web has evolved very slowly, and is very far from reaching a point of widespread adoption, which is somewhat surprising considering the great amounts of potential users around the world.<\/p>\n<p>Even though a standard for math on the web, <a href=\"http:\/\/www.w3.org\/Math\/\" target=\"_blank\"><strong>MathML<\/strong><\/a>, has existed <a href=\"http:\/\/www.w3.org\/TR\/1998\/REC-MathML-19980407\/\" target=\"_blank\">since 1998<\/a>, with its latest version <a href=\"http:\/\/www.w3.org\/TR\/MathML3\/\" target=\"_blank\">MathML 3.0 adopted very recently<\/a>, it is a tool with remarkably little use on the web. There are many reasons for this: the reluctance of users to learn a new coding language from scratch, the availability of &#8220;user-friendly&#8221; tools like <a href=\"http:\/\/www.dessci.com\/en\/products\/mathtype\/\" target=\"_blank\">MathType<\/a> and <a href=\"http:\/\/en.wikipedia.org\/wiki\/Microsoft_Equation_Editor\" target=\"_blank\">Microsoft Equation Editor<\/a> (now bundled into <a href=\"http:\/\/office.microsoft.com\/en-us\/word-help\/write-insert-or-change-an-equation-HA010370572.aspx\" target=\"_blank\">Office 2010<\/a>), but particularly the widespread, cult-like use of <a href=\"http:\/\/en.wikipedia.org\/wiki\/TeX\" target=\"_blank\">TeX<\/a> and <a href=\"http:\/\/www.latex-project.org\/\" target=\"_blank\">LaTeX<\/a>, the gold-standard of typesetting systems, which has been adopted by academics, scientists (and more importantly, <a href=\"http:\/\/www.tug.org\/interest.html#publishers\" target=\"_blank\">publishers<\/a>) since its development in the late 1970&#8217;s. As you may have experienced, the divide between those who are willing to publish some math (that may not look perfect but was generated with little effort), and those whose mathematical expressions must look <em>nothing-less-than-perfect<\/em> (no matter the effort), is enormous; the first camp prefers limited (but easy-to-use) equation editors, whereas the other favors TeX or LaTeX, and publish math online by rendering their documents into PDFs, in a way avoiding the web altogether.<\/p>\n<p><strong>So, in order to <em>do the right thing<\/em> we all should learn MathML, right? Wrong.<\/strong> The same way that most of us who publish web content on a regular basis (through blogs, Facebook, Twitter, etc.) do not type HTML code from scratch, there are many ways to generate MathML code from other sources. <a href=\"http:\/\/www.w3.org\/Math\/Software\/mathml_software_categories.html\" target=\"_blank\">Here&#8217;s a nice list of software tools<\/a> that will allow you to render (or convert) your math expressions into MathML. Just keep in mind that, in order to be able to display MathML code natively (i.e. without a special plug-in), you must use a <em>good<\/em> web browser (i.e. one that cares about open standards). Until recently, everybody&#8217;s favorite <a href=\"http:\/\/www.mozilla.org\/projects\/mathml\/start.xhtml\" target=\"_blank\">Firefox was the only browser that supported MathML natively<\/a>, but since August, 2010, <a href=\"http:\/\/www.webkit.org\/blog\/1366\/announcing%E2%80%A6mathml\/\" target=\"_blank\">Safari and Google Chrome also do<\/a>. (Perhaps unsurprisingly, Internet Explorer does not support MathML natively -only through the third-party plug-in <a href=\"http:\/\/www.dessci.com\/en\/products\/mathplayer\/\" target=\"_blank\">MathPlayer<\/a>.)<\/p>\n<p>Now, how can we generate beautiful math expressions in <a href=\"http:\/\/wordpress.org\/\" target=\"_blank\">WordPress<\/a> sites\u2014 like this one? Sure, you could reconfigure your WordPress server by <a href=\"http:\/\/visnet.ch\/smartbuildings\/how-to-include-mathml-in-a-wordpress-blog\/\" target=\"_blank\">hacking into the the PHP<\/a>, but there are easier ways. Since WordPress is an open-source application, developers are continuously creating new functionality for it: <a href=\"http:\/\/wordpress.org\/extend\/plugins\/search.php?q=latex\" target=\"_blank\">here&#8217;s the latest list of all LaTeX plugins for WordPress<\/a>. We&#8217;ve only tried a few of these, but the main difference between them is the fact that most generate math expressions as graphics (GIFs or PNGs), whereas only a few of them generate proper MathML code. (Also, in some cases, the code compilation and rendering of images occurs locally, whereas in other cases, it happens remotely, which is a relevant point to discuss with your systems administrator.)<\/p>\n<p>Here at Vassar, we have just installed the <a href=\"http:\/\/www.holoborodko.com\/pavel\/quicklatex\/\" target=\"_blank\">QuickLaTeX<\/a> plug-in and are very happy with its performance\u2014 if what you want to do is typing or copy\/pasting your good &#8216;ol LaTeX commands. All you need to do is to start your post with the expression &#8220;latexpage&#8221; (between square brackets), and then enter your LaTeX code below.<\/p>\n<p>Here&#8217;s an example:<\/p>\n<blockquote><p>\nThis is a really famous equation:<\/p>\n<p class=\"ql-center-displayed-equation\" style=\"line-height: 17px;\"><span class=\"ql-right-eqno\"> (1) <\/span><span class=\"ql-left-eqno\"> &nbsp; <\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-15b45d2db4d634c78e4ed55447ea9d63_l3.png\" height=\"17\" width=\"68\" class=\"ql-img-displayed-equation \" alt=\"&#92;&#98;&#101;&#103;&#105;&#110;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125; &#69;&#61;&#109;&#99;&#94;&#123;&#50;&#125; &#92;&#101;&#110;&#100;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125;\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n<p>If you would like to include inline equations, you can just type them between &#8216;&#36;&#8217; signs, like this: <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-9bb2d3246010b67f0cc9d273e9d134d4_l3.png\" class=\"ql-img-inline-formula \" alt=\"&#97;&#94;&#123;&#50;&#125;&#43;&#98;&#94;&#123;&#50;&#125;&#61;&#99;&#94;&#123;&#50;&#125;\" title=\"Rendered by QuickLaTeX.com\" height=\"16\" width=\"93\" style=\"vertical-align: -1px;\"\/>.<\/p>\n<p>If you want to number only some of your equations, use the <strong>displaymath<\/strong> command instead of the <strong>equation<\/strong> command to skip those that should go un-numbered, like this one:<\/p>\n<p class=\"ql-center-displayed-equation\" style=\"line-height: 18px;\"><span class=\"ql-right-eqno\"> &nbsp; <\/span><span class=\"ql-left-eqno\"> &nbsp; <\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-10d771753a8f1e157bb25479f5533e2d_l3.png\" height=\"18\" width=\"137\" class=\"ql-img-displayed-equation \" alt=\"&#92;&#98;&#101;&#103;&#105;&#110;&#123;&#100;&#105;&#115;&#112;&#108;&#97;&#121;&#109;&#97;&#116;&#104;&#125; &#92;&#115;&#105;&#110;&#94;&#123;&#50;&#125;&#92;&#116;&#104;&#101;&#116;&#97;&#43;&#92;&#99;&#111;&#115;&#94;&#123;&#50;&#125;&#92;&#116;&#104;&#101;&#116;&#97;&#61;&#49; &#92;&#101;&#110;&#100;&#123;&#100;&#105;&#115;&#112;&#108;&#97;&#121;&#109;&#97;&#116;&#104;&#125;\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n<p>Here are two nice, more sophisticated equations featuring an infinite sum and an indefinite integral:<\/p>\n<p class=\"ql-center-displayed-equation\" style=\"line-height: 51px;\"><span class=\"ql-right-eqno\"> (2) <\/span><span class=\"ql-left-eqno\"> &nbsp; <\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-07b53757f59154e6525f560b397bca73_l3.png\" height=\"51\" width=\"134\" class=\"ql-img-displayed-equation \" alt=\"&#92;&#98;&#101;&#103;&#105;&#110;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125; &#92;&#108;&#105;&#109;&#95;&#123;&#110;&#32;&#92;&#116;&#111;&#32;&#92;&#105;&#110;&#102;&#116;&#121;&#125;&#32;&#92;&#115;&#117;&#109;&#95;&#123;&#107;&#61;&#49;&#125;&#94;&#110;&#32;&#92;&#102;&#114;&#97;&#99;&#123;&#49;&#125;&#123;&#107;&#94;&#123;&#50;&#125;&#125;&#61;&#92;&#102;&#114;&#97;&#99;&#123;&#92;&#112;&#105;&#94;&#123;&#50;&#125;&#125;&#123;&#54;&#125; &#92;&#101;&#110;&#100;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125;\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n<p class=\"ql-center-displayed-equation\" style=\"line-height: 41px;\"><span class=\"ql-right-eqno\"> (3) <\/span><span class=\"ql-left-eqno\"> &nbsp; <\/span><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-f763a88d54009bea7bc21dc9f16704ff_l3.png\" height=\"41\" width=\"186\" class=\"ql-img-displayed-equation \" alt=\"&#92;&#98;&#101;&#103;&#105;&#110;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125; &#92;&#105;&#110;&#116;&#92;&#102;&#114;&#97;&#99;&#123;&#100;&#92;&#116;&#104;&#101;&#116;&#97;&#125;&#123;&#49;&#43;&#92;&#116;&#104;&#101;&#116;&#97;&#94;&#50;&#125;&#32;&#61;&#32;&#92;&#116;&#97;&#110;&#94;&#123;&#45;&#49;&#125;&#32;&#92;&#116;&#104;&#101;&#116;&#97;&#43;&#32;&#67; &#92;&#101;&#110;&#100;&#123;&#101;&#113;&#117;&#97;&#116;&#105;&#111;&#110;&#42;&#125;\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n<\/blockquote>\n<p>As you can see, the equations are rendered as PNG image files (sure, it&#8217;s not <a href=\"http:\/\/www.mozilla.org\/projects\/mathml\/start.xhtml\" target=\"_blank\">MathML<\/a>, but it&#8217;s the next best thing.) Here&#8217;s the code that generates the expressions above:<\/p>\n<p><a data-postid=\"fsg_post_474\" data-imgid=\"480\" href=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-480\" title=\"latexcode\" alt=\"\" src=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode.jpg\" width=\"739\" height=\"498\" srcset=\"https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode.jpg 739w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode-300x202.jpg 300w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode-150x101.jpg 150w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexcode-400x269.jpg 400w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/a><\/p>\n<p><strong>QuickLaTeX can also render graphics on the fly<\/strong> through the <a href=\"http:\/\/www.ctan.org\/tex-archive\/graphics\/pgf\/contrib\/pgfplots\/\" target=\"_blank\">pgfplots package<\/a>. Here&#8217;s an example:<\/p>\n<p class=\"ql-center-picture\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pages.vassar.edu\/acs\/wp-content\/ql-cache\/quicklatex.com-eac37c0108d4faa0233112ea2b12aeb3_l3.png\" height=\"282\" width=\"344\" class=\"ql-img-picture \" alt=\"Rendered by QuickLaTeX.com\" title=\"Rendered by QuickLaTeX.com\"\/><\/p>\n<p>Here&#8217;s the code that generated the 3-D plot above:<\/p>\n<p><a data-postid=\"fsg_post_474\" data-imgid=\"481\" href=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-481\" title=\"latexplot\" alt=\"\" src=\"http:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot.jpg\" width=\"432\" height=\"193\" srcset=\"https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot.jpg 432w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot-300x134.jpg 300w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot-150x67.jpg 150w, https:\/\/pages.vassar.edu\/acs\/files\/2011\/03\/latexplot-400x178.jpg 400w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.holoborodko.com\/pavel\/quicklatex\/#gstarted\" target=\"_blank\">Here&#8217;s a quick start guide to QuickLaTeX<\/a>, featuring some neat examples.<\/p>\n<p>As you can see from the results above, this plugin is already available on our <a href=\"http:\/\/pages.vassar.edu\/\" target=\"_blank\">WordPress production system<\/a>. Please let us know what you think!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Cristi\u00e1n Opazo Since its inception, the World Wide Web has gradually evolved in order to accommodate user&#8217;s needs, particularly in regards to input and output of text and images. What started as very rudimentary displays based on the ASCII &hellip; <a href=\"https:\/\/pages.vassar.edu\/acs\/math-on-the-web\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[11447,4808,4811],"tags":[9703,961,9701,9702],"class_list":["post-474","post","type-post","status-publish","format-standard","hentry","category-cristian-opazo","category-web-publishing","category-web-standards","tag-latex","tag-math","tag-mathml","tag-tex"],"_links":{"self":[{"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/posts\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":26,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":1328,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/posts\/474\/revisions\/1328"}],"wp:attachment":[{"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/media?parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/categories?post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pages.vassar.edu\/acs\/wp-json\/wp\/v2\/tags?post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}