Math: Styling XML Markup Recap

1
Math Styling XML Markup (Recap)

• Thomas G. Habing
• Grainger Engineering Library Information Center
• University of Illinois at Urbana-Champaign
• http//dli.grainger.uiuc.edu
  thabing_at_uiuc.edu

2
Production Implementation

• Uses DHTML to render SGML Math
• CSS Positioning
• JavaScript to control length of horizontal and
  vertical marks (fraction bars, radicals, fences)
• Kerning (subscripts, superscripts, diacritics)
• We Have Standardized on Transforming to HTML

3
Advanced CSS Techniques Fractions

• ltspan id"dli01" class"fraction" gt ltspan
  classnumgt dltspan classromgtlt/spangtf(x)ltspa
  n classromgtlt/spangt lt/spangt ltspan
  classdengt ltspan class"sup"gt160lt/spangt d
  x ltspan class"inf"gt160lt/spangt lt/spangtlt/spa
  ngtltscript language"JavaScript"gt document.all("d
  li01").style.width"3.5em"lt/scriptgt

4
Advanced CSS Techniques Fractions

• span.dformula span.fraction positionrelative
  line-heightnormal top3ex margin-top-2exspa
  n.dformula span.fraction span.num
  displayblocktext-aligncenter
  border-bottom'thin solid black'span.dformula
  span.fraction span.den text-aligncenter

5
Advanced CSS Techniques Other

• Radicals
• Fences
• Overlines/Underlines
• Stacked Diacritics
• Limits (Sum, Integral, Products)
• Matrices

6
Recent Enhancements Upgrades

• Converting Math to Images for older browsers
• Using IE5 DHTML / CSS Rendering Engine
• Converting SGML Math to MathML
• Using XSLT
• Enhanced Rendering
• Use of MathML avoids redundant effort
• Utilizes Dynamic Properties and Behaviors