MiraCosta College

Browser Compatibility

Unfortunately, browser compatibility is still an issue. There are at least four different ways to format HTML so that a browser will display mathematical symbols. Two of these work with all standard browsers:  1) Use HTML entities in the same font as your other text (θ); or 2) use inline graphics (theta) to represent mathematical symbols. Only the first of these meets accessibility standards, because inline graphics cannot be scaled by the browser or read by a screen reader.

The third method specifies the symbol font, expecting the browser to choose the character in that font corresponding to the Windows character in the HTML code (q). This is totally contrary to all HTML standards, but it is the is the best way to present mathematical symbols to Internet Explorer for Windows. It is totally broken with everything else.

The fourth method is to request the symbol font and use the HTML entity to specify the character (θ). This works very well for fully compliant browsers. The hint helps the browswer find a high-quality font for displaying the mathematical symbol. Without the hint, many browsers default to a very poor quality character. Unfortunately, this is completely broken with Internet Explorer for Windows.

So, we are left with only one way to present mathematical symbols to all browsers. Unfortunately, even the newest version of Internet Explorer can't display all of the symbols this way. On my Win98 platform (running IE 6.0 SP1), I can't view the set notation, the nabla or many other characters. We could tell everyone to use Netscape, but Netscape on my Linux system displays the Greek letters in a very poor font.

The answer, when practical, is to send different HTML to different browsers. I've done a proof-of-concept on my server using a perl script, but some approach using javascript is probably more robust.

CSS font-family: symbol; (optimized for standards-compliant browsers)

α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω
Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω
√ ≥ ≤ ≠ ≈ ∞ ∀ ∃ ′ ↔ ↓ → ← ″ ∝ ∂ ∩ ∪ ⊂ ⊆ ⊃ ⊇ ∈
∉ ∇ ⋅ ∧ ∨ ∑ ⟨ ⟩ ≅ ∋ ℵ ≡ ℜ ℑ ∅ ∠ ∏ ∫ ⇒ ⇐ ⇑ ⇓ ⇔

CSS font-family: times, serif; (works across platforms)

α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω
Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω
√ ≥ ≤ ≠ ≈ ∞ ∀ ∃ ′ ↔ ↓ → ← ″ ∝ ∂ ∩ ∪ ⊂ ⊆ ⊃ ⊇ ∈
∉ ∇ ⋅ ∧ ∨ ∑ ⟨ ⟩ ≅ ∋ ℵ ≡ ℜ ℑ ∅ ∠ ∏ ∫ ⇒ ⇐ ⇑ ⇓ ⇔

CSS font-family: symbol; with mapped characters (works only with Internet Explorer for Windows)

a b g d e z h q i k l m n x o p r s t u f c y w
A B G D E Z H Q I K L M N X O P R S T U F C Y W
Ö ³ £ ¹ » ¥ " $ ¢ « ¯ ® ¬ ² µ ¶ Ç È Ì Í É Ê Î
Ï Ñ × Ù Ú å á ñ @ ' À º Â Á Æ Ð Õ ò Þ Ü Ý ß Û

Valid HTML 4.01! Steve Schaefer
Last modified: Date: 2003/01/24