Tag Archives: SVG

Vektorgrafikk og matematiske formler i HTML

GIER by aslakr, on Flickr

Som nevnt i forbifarten tidligere om Apple Grapher så hadde det vært kjekt om f.eks. Safari hadde støtte for MathML. Tidligere ville jeg ha trodd at det ikke ville ha vært spesielt sannsynslig siden en for å kunne vise MathML i praksis har vært nødt til å bruke XHTML1.

Situasjonen ser kanskje ut til at det bedrer seg, eller i det minste gjør det mer attraktivt og lage støtte for i webbrowsere slik som WebKit. Med utgangspunkt i «Design-By-Attrition» på Sam Rubys intertwingly og endel tidligere tidligere diskusjoner, har man startet en reell diskusjon hos W3 om å utvide HTML5 til kanskje inkludere støtte for utvidelser, konkret støtte SVG og MathML. Diskusjonen starter i mars public-html/2008Mar og fortsetter i april public-html/2008Apr. Og sannelig, de har klart å få inn MathML og SVG i nåværende fortslag til HTML5. Det ser og ut til at man har vært klar på å gjøre det mulig å inkludere MathML i SVG og motsatt.

En kunne en kanskje håpe at noen studenter henger seg på Jacques Distler tips om å bruke Google’s SoC2008 til utvikle støtte for MathML i WebKit. Se ellers Google Summer of Code 2008 WebKit Projectidéer.

Apropos MathML så kan en da begynne å se på verktøy for å genere slik. MathML er, hva skal man si, ordrik slik at det ikke er så praktisk å skrive direkte. Da kan det være kjekt å bruke verktøy slik som itex2MML.

Hvis vi tar utgangspunkt i LaTeX-snutten som Apple Grapher produserte tidligere vha. «Kopier LaTeX-utrykk»:

\frac{d}{dt}\left[ \begin{array}{c} x \\ y \\ z \end{array}
\right]=\left[ \begin{array}{c} 10\left( y-x \right) \\ 28x-y-xz \\
-\frac{8}{3}z+xy \end{array} \right],\; \left[ \begin{array}{c} x \\ y
\\ z \end{array} \right]=\left[ \begin{array}{c} -10 \\ 10 \\ 25
\end{array} \right],\; t=0…30

og med det samme forsøker å gjøre den litt mer leselig:

\frac{d}{dt} \left[ \begin{array}{c}
    x \\
    y \\
    z
\end{array} \right]
=
\left[ \begin{array}{c}
    10 \left( y-x \right) \\
    28x-y-xz \\
    -\frac{8}{3}z+xy
\end{array} \right]
,\;
\left[ \begin{array}{c}
    x \\
    y \\
    z
\end{array} \right]
=
\left[ \begin{array}{c}
    -10 \\
    10 \\
    25
\end{array} \right]
,\;
t=0…30

Det ikke ser ut til at itex2MML støtter \begin{array}{[…]}[…]\end{array} men kun bruker \array{[…]}. Hvorfor vet jeg ikke, det bør kanskje regnes som en mangel? Med det samme kan det være lurt å erstatte Unicode med \ldots:

\frac{d}{dt}
\left[ \array{
       x \\
       y \\
       z
} \right]
=
\left[ \array{
       10 \left( y-x \right) \\
       28x-y-xz \\
       -\frac{8}{3}z+xy
} \right]
,\;
\left[ \array{
       x \\
       y \\
       z
} \right]
=
\left[ \array{
       -10 \\
       10 \\
       25
} \right]
,\;
t = 0 \ldots 30

Ut av dette kommer MathML som bruker «entities» slik som − og …. «Character entnties» er noe gammelerik har funnet på, så vi erstatter dem med numeriske «entities». Det hadde vært kjekt om itex2MML gjorde dette selv, eller helst brukte Unicode.

Resultatet skal vises som MathML (fra en <object>-referanse) for de som har f.eks. Firefox2 (versjon 3 ser ut til å funke bedre enn 2), de fleste andre browsere vil vise en PNG som er generert av LaTeX3:

(lorentz.mml (alt. som tekst lorentz.txt) / lorentz-latex.png)

Med støtte for MathML i HTML5 kan utseende enklere på ligningene manipuleres vha. CSS og ikke minst en kan sikkert lage noe interaktivt vha. Javascript o.l.

<object>-løsningen som er brukt over vil sannsynligvis strippes av slikt som Planet Venus og i endel feedlesere, noe som fører til at en ikke ser MathML selv om leseren har støtte for det. På linje med at Planet Mars4 kan ta ut innholdet fra en SVG-object og putte inne i XHTML så kunne det ha vært kjekt å gjøre det samme for MathML. På lengre sikt kan en like greit alltid putte MathML inne i HTML5.


  1. Igjen, for at en kan si at en driver med XHTML en bruke MIME-typen application/xhtml+xml, noe som i praksis betyr at en ikke kan bruke de aller fleste ferdige publiseringssystemer, deriblant WordPress som denne teksten publiseres med. En skal ha tunga veldig rett i munnen for ikke å få gulskjerm

  2. Min Firefox 3 ser ut til å ha en visuell bug. Høyden på parantesene ser ikke ut til å stemme før en markerer ligninga. Mulig det kun skjer i min Firfox. 

  3. LaTeX-utgaven ser endel penere ut en det man får fra Firefox. Forhåpentligvis vil dette bedre seg etterhver. I det minste er det ikke punktgrafikk. 

  4. enda en planet-implementasjon, denne gangen i Ruby.