Bringing mathematical formatting to the web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 85

Bringing Mathematical Formatting to the Web PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

Bringing Mathematical Formatting to the Web. Bebo White Stanford Linear Accelerator Center [email protected] Why?. The Web was invented to communicate scientific data Why has the display of mathematical formulae been a problem? Mathematical formatting is not easy

Download Presentation

Bringing Mathematical Formatting to the Web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Bringing mathematical formatting to the web

Bringing Mathematical Formatting to the Web

Bebo White

Stanford Linear Accelerator Center

[email protected]


Bringing mathematical formatting to the web

Why?

  • The Web was invented to communicate scientific data

  • Why has the display of mathematical formulae been a problem?

    • Mathematical formatting is not easy

    • The Web has had limited tools supporting math

    • Mathematicians/scientists are exacting about mathematical layout – they expect something like TEX or LATEX


What s my interest

What’s My Interest?

  • SLAC publishes and distributes scientific papers

  • Web-based conference proceedings

  • SLAC has a long standing commitment to the Web


Bringing mathematical formatting to the web

  • I have “adopted” this formula for my examples in this talk

  • “The Pearson product moment coefficient

  • of correlation”


The challenges

The Challenges

  • Rendering

    • bringing the granularity of LATEX to the level of HTML

    • graphical and textual representations

    • display issues - baselines, etc.

  • Generation

    • formatting tools

    • application output


The challenges cont

The Challenges (cont)

  • Interoperability

    • use of semantic information in other applications


Web math formats

Web Math Formats

  • Images

  • MathML

  • TEX or LATEX

  • SVG

  • Controls


Mathml

MathML

  • The Mathematical Markup Language, or MathML, is an XML application for describing mathematical notation and capturing both its structure and content. The goal of MathML is to enable mathematics to be served, received, and processed on the Web.


Mathml not just for the web

MathML – Not Just For the Web

MathML

Interface Mathematics Across Applications


Mathml cont

MathML (cont)

  • Pro:

    • The first W3C-endorsed XML vocabulary

    • A low-level format for coding the presentation and semantics of a mathematical object

    • Fast and high quality printing and rendering

    • Facilitates the use and re-use of math content on the Web and other applications


Mathml cont1

MathML (cont)

  • Con:

    • Complex to author – depends on tools

    • Limited browser support


Mathml1

MathML

  • MathML 2.0 - W3C Recommendation - February 2001

  • W3C Math Working Group composed of major players

  • MathML is an instance of XML


W3c math working group

AMS / Mathematical Reviews

Boeing

Design Science Inc.

IBM Research Division

MacKichan Software, Inc.

MATH.EDU Inc

Microsoft

Numerical Algorithms Group

PentaScope

Stilo Technologies

SAFIR Research Group (INRIA)

Radical Flow Inc.

Universita di Bologna

University of Western Ontario

W3C

Waterloo Maple Inc.

Wolfram Research Inc.

W3C Math Working Group

http://www.w3.org/Math/


Mathml goals

MathML Goals

  • From the “Math Activity Statement” of the W3C Math Working Group:

    • “Designed as an XML application, MathML provides two sets of tags, one for the visual presentation of mathematics and the other associated with the meaning behind equations.”

    • “MathML is not designed for people to enter by hand but specialized tools provide the means for typing in and editing mathematical expressions.”


Mathml goals cont

MathML Goals (cont)

  • To provide a low-level format for describing mathematics as a basis for machine to machine communication

  • To facilitate the use and re-use of mathematical and scientific content on the Web


Scope of mathml

Arithmetic

Algebra

Logic

Relations

Set theory

Calculus

Sequences

Series

Functions

Statistics

Linear algebra

Vector calculus

Scope of MathML


What does mathml look like

What Does MathML Look Like?


Taxonomy of mathml elements

Taxonomy of MathML Elements

  • Presentation elements - describe mathematical notation's visually oriented two-dimensional structure; e.g., <mrow>

  • Content elements - describe mathematical objects directly and what they mean; e.g., <vector>

  • Interface elements - describe how MathML can be used with other markup languages and applications; e.g., <math> passes parameters to a MathML processor


Presentation elements

Presentation Elements

  • MathML presentation markup consists of about 30 elements which accept over 50 attributes

  • Most of the elements correspond to layout schemata, which contain other presentation elements

  • Each layout schema corresponds to a two-dimensional notational device, such as a superscript or subscript, fraction or table


Basic presentation elements

Basic Presentation Elements

  • <mi> – identifier, such as a variable, function name, constant, etc.

  • <mo> – operator, such as a summation, fence (parentheses, brace, etc.), accent, etc.

    • example: <mo>(</mo>rendering: (

    • example: <mo>&sum;</mo>rendering: S


Basic presentation elements cont

Basic Presentation Elements (cont)

  • <mi> – identifier, such as a variable, function name, constant, etc.

  • <mo> – operator, such as a summation, fence (parentheses, brace, etc.), accent, etc.

  • <mn> – number


Basic presentation elements cont1

Basic Presentation Elements (cont)

  • <mi> – identifier, such as a variable, function name, constant, etc.

  • <mo> – operator, such as a summation, fence (parentheses, brace, etc.), accent, etc.

  • <mn> – number

  • What is this expression?<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo>


Basic presentation elements cont2

Basic Presentation Elements (cont)

  • <mi> – identifier, such as a variable, function name, constant, etc.

  • <mo> – operator, such as a summation, fence (parentheses, brace, etc.), accent, etc.

  • <mn> – number

  • What is this expression?<mi>x</mi><mo>–</mo><mo>(</mo> <mn>3</mn><mo>+</mo><mi>y</mi><mo>)</mo>

x – (3 + y)


Other presentation elements

Other Presentation Elements

  • Presentation elements are grouped:

    • Token Elements

      • <mi>identifier

      • <mn>number

      • <mo>operator, fence, or separator

      • <mtext>text


Other presentation elements1

Other Presentation Elements

  • Presentation elements are grouped:

    • Token Elements

    • General Layout

      • <mrow>to group subexpressions

      • <mfrac>form fraction from 2 subexpressions

      • <mroot>radical with a specified index

      • <mfenced>surround content with a pair of fences


Other presentation elements2

Other Presentation Elements

  • Presentation elements are grouped:

    • Token Elements

    • General Layout

    • Scripts and Limits

      • <msub>, <msup>, <msubsup>

      • <munder>attach a script under a base

      • <mover>attach a script over a base

      • <munderover>attach a script both under and over a base


Other presentation elements3

Other Presentation Elements

  • Presentation elements are grouped:

    • Token Elements

    • General Layout

    • Scripts and Limits

    • Tables

      • <mtable>table or matrix

      • <mtr>row in a table or matrix

      • <mtd>one entry in a table or matrix


Other presentation elements4

Other Presentation Elements

  • Presentation elements are grouped:

    • Token Elements

    • General Layout

    • Scripts and Limits

    • Tables

    • Actions

      • <maction>binds actions to a subexpression


Token elements

Token Elements

  • Some MathML elements, (e.g., <mfrac>) have other MathML elements in their content

  • Other presentation elements do not (e.g.,<mi>, <mo>, and <mn>)

    • These are token elements

    • Token elements are the only elements which directly contain character data


Scripts sub super

Scripts – Sub & Super

  • Elements which, by definition, have more than one argument

    • Subscript: <msub> basescript </msub>

    • Superscript: <msup> basescript </msup>

    • Usage:x1<msub><mi>x</mi><mn>1</mn></msub>

      x2<msup><mi>x</mi><mn>2</mn></msup>

      <msubsup><mi>x</mi><mn>1</mn><mn>2</mn></msubsup>


Content elements

Content Elements

  • Content markup consists of about 100 elements accepting roughly a dozen attributes

  • The majority of these elements are empty elements corresponding to a wide variety of operators, relations and named functions

  • There are also elements used to apply operations to expressions and to make new mathematical objects from others


Content elements1

Content Elements

  • Most fundamental to content markup is the <apply> element, which enables the explicit application of a function to its argument.


Content elements2

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

    • <cn>content number (e.g., <cn type="real"> 12345.7 </cn> )

    • <ci>content identifier (e.g., <ci type="vector"> V </ci> )


Content elements3

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

  • Basic Content Elements

    • <inverse/>generic inverse

    • <compose/>compose 2 or more functions

    • <piecewise>piecewise defined function


Content elements4

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

  • Basic Content Elements

  • Arithmetic, Algebra, and Logic

    • <divide/>division

    • <power/>to the power of

    • <root/>nth root

    • <conjugate/>complex conjugate


Content elements5

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

  • Basic Content Elements

  • Arithmetic, Algebra, and Logic

  • Relations

    • <eq/>equal

    • <geq/>greater than or equal

    • <factorof/>the “divides” operator


Content elements6

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

  • Basic Content Elements

  • Arithmetic, Algebra, and Logic

  • Relations

  • Calculus and Set Theory

    • <partialdiff/>partial derivative

    • <lowlimit>lower limit (of integral, etc.)

    • <union/>union or meet


Content elements7

Content Elements

  • <apply>application of a function to argument.

  • Token Elements

  • Basic Content Elements

  • Arithmetic, Algebra, and Logic

  • Relations

  • Calculus and Set Theory

  • Further element groups include sequences & series, elementary classical functions, statistics, linear algebra, semantic mapping elements, and constants.


Presentation and content

Presentation and Content

<math>

<reln>

<eq/>

<ci>E</ci>

<apply>

<times/>

<ci>m</ci>

<apply>

<power/>

<ci>c</ci>

<cn>2</cn>

</apply>

</apply>

</reln>

</math>

<math>

<mrow>

<mi>E</mi>

<mo>=</mo>

<mrow>

<mi>m</mi>

<mo>&InvisibleTimes;</mo>

<msup>

<mi>c</mi>

<mn>2</mn>

</msup>

</mrow>

</mrow>

</math>


Enlivening markup

Enlivening Markup

<math>

<maction actiontype="audio">

<mrow>

<mi>E</mi>

<mo>=</mo>

<mrow>

<mi>m</mi>

<mo>&InvisibleTimes;</mo>

<msup>

<mi>c</mi>

<mn>2</mn>

</msup>

</mrow>

</mrow>

<mtext>emc.wav</mtext>

</maction>

</math>

Enlivening markup allows coding of various kinds of actions on notation, such as occur in an expression which toggles between two pieces of notation.


Interface elements

Interface Elements

  • Interface elements describe how MathML can be used with other markup languages and applications

  • <math> passes parameters to a MathML processor

  • <semantics> contains references and attributes for external program processing

  • <annotation> contains arbitrary data. This data may be in the form of text, computer algebra encodings, C programs, or whatever a processing application expects


Examples of element attributes

Examples of Element Attributes

<mfrac linethickness='0'>…</mfrac>

<mspace width='12'/>

<mtable columnalign="center">…</mtable>


Generating mathml

Generating MathML

  • Not intended to be authored “by hand”

  • Programs such as Mathematica, Maple, MathType support/export MathML

  • MathML editing/authoring environments

  • Most tools can generate either

    • Embedded MathML (in HTML, XHTML, or XML files)

    • MathML (.mml) files


Mathml tools computing

MathML Tools: Computing

  • Maple: an interactive math computational system from Waterloo Maple http://www.maplesoft.com/standards/MathML/info.html

  • Mathematica: a technical programming environment from Wolfram Research http://www.wolfram.com/products/mathematica/

  • REDUCE: algabraic calculator reads and writes MathML (1999). http://www.uni-koeln.de/REDUCE/


Mathml equation editors

MathML Equation Editors

  • Amaya (editor and browser) - http://www.w3.org/Amaya/

  • MathType (editor and MSWord plug-in) -http://www.mathtype.com/

  • WebEQ (developers suite) - http://www.mathtype.com/en/products/webeq/


Mathml converters

MathML Converters

  • MathType

  • TtM (TEX to MathML) - http://hutchinson.belmont.ma.us/tth/mml/


Mathml and browsers

MathML and Browsers

  • Internet Explorer (IE)

  • Netscape (NS)

  • Mozilla

  • Amaya


Mime types and mathml

MIME Types and MathML

Therefore:

  • To use NS, use an XML document

  • To use IE use an HTML document.

  • Or, in practice use an XHTML document, and adjust the MIME type

    • On the server using scripts, etc.

    • On the client using XSL stylesheets

  • An example after two more points…

    • DOCTYPEs

    • Namespaces


Doctypes

DOCTYPEs

  • A DOCTYPE is a special declaration at the beginning of an HTML or XML document that defines what kind of markup is in the document.

    • DOCTYPEs are really for validation, not identification.

    • DOCTYPEs point to a DTD, which defines the syntax of the markup in the document.


Doctypes cont

DOCTYPEs (cont)

Typical DOCTYPE declarations:


Doctypes cont1

DOCTYPEs (cont)

  • NS 7 requires a DOCTYPE, but doesn’t actually look at the DTD to which it points:

    • Instead the DTD must match one of a few predefined values.

  • IE doesn’t require a DOCTYPE, but it does download the DTD and use it if there is one

  • Therefore, use XHTML and a DOCTYPE


Namespaces

Namespaces

Complexities arise when two XML dialects must mix. One case of interest is XHTML + MathML. The solution is to use namespaces.

  • XML languages are identified by a URI.

    • MathML is http://www.w3.org/1998/Math/MathML

    • XHTML is http://www.w3.org/1999/xhtml

  • They can be referenced in two ways:

    • By using an xmlns attribute on an element

    • By adding a prefix to element names


Namespaces cont

Namespaces (cont)

Use the xmlns attribute on the outermost element of the embedded markup. This places the element on which the attribute is set, and its children in the indicated namespace.


Namespaces cont1

Namespaces (cont)

To use prefixes, it is necessary to:

  • Associate a prefix and a namespace using an xmlns:prefix attribute on a containing element.

  • Use the prefix to identify elements that should be in the namespace.


Mathml browser plug ins

MathML Browser Plug-ins

  • MathPlayer (Design Science) - http://www.mathtype.com/en/products/mathplayer/

  • techexplorer (IBM) - http://www3.ibm.com/software/network/techexplorer/

    • Displays MathML and TEX


Bringing mathematical formatting to the web

HTML File: Gif Image + MathML rendered by MathPlayer


Internet explorer behaviors

Internet Explorer Behaviors


Internet explorer behaviors cont

Internet Explorer Behaviors (cont)


Bringing mathematical formatting to the web

HTML File: Gif Image + TEX code rendered by techexplorer


Mozilla

Mozilla

  • You’ll see that some of my examples use the Mozilla browser

  • http://www.mozilla.org

  • Mozilla 1.1 is latest version

  • http://www.mozilla.org/projects/mathml/


Bringing mathematical formatting to the web

XML File: Gif Image + MathML


Amaya

Amaya

  • Open source Web browser/editor developed and supported by the W3C

  • http://www.w3.org/Amaya/

  • Latest version is 6.4

  • Supports HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, many CSS 2 features, and SVG


A real life example slac

A “Real Life” Example - SLAC

  • SPIRES-HEP Database Catalog

  • The first “killer app” on the Web at the first U.S. Web site

  • Approximately 500,000 papers - most with math

  • Control over display via pre-processing response


Sample usage scenario 1

Sample Usage Scenario 1

  • Create a MathML or TEX file and/or image of an equation using the MathType plug-in in MSWord


Sample usage scenario 1 cont

Sample Usage Scenario 1 (cont)

  • Select “display” or “inline” format

  • Equation is saved in MSWord file as a GIF image which can be re-sized, copied, “cut and pasted,” etc.

  • Document can be converted to Web page with MathML or TEX


Sample usage scenario 2

Sample Usage Scenario 2

  • Use traditional mathematical notation or Mathematica syntax notation to generate MathML markup and verify rendering


Sample usage scenario 2 cont

Sample Usage Scenario 2 (cont)

  • Go to http://www.mathmlcentral.com/Tools/MSP/ToMathML, enter expression and generate MathML

  • “Cut and paste” results in text editor and save as filetype “.mml”

  • Verify rendering with Amaya


Sample usage scenario 2 cont1

Sample Usage Scenario 2 (cont)


Sample usage scenario 3

Sample Usage Scenario 3

  • Select a library function description, edit it and verify rendering


Sample usage scenario 3 cont

Sample Usage Scenario 3 (cont)

  • Go to http://functions.wolfram.com, select a function, copy the MathML form provided

  • “Cut and paste” results in text editor and save as filetype “.mml”

  • Edit and verify rendering with Amaya


Sample usage scenario 3 cont1

Sample Usage Scenario 3 (cont)


Mathml references

MathML References

  • W3C - http://www.w3.org/Math/

  • http://ltsn.mathstore.ac.uk/reports/mathml.shtml


Thank you

Thank You!

  • E-mail : [email protected]

  • Superset of slides (presentation from SC2002) at http://www.stanford.edu/~bebo/classes/MathML.ppt


  • Login