Tag Archives: HTML

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. 

video og audio i HTML5

I det som sannsynligvis vil få navnet HTML 5 har man introdusert elementene <video> og <audio>. Ved hjelp av disse elementene kan en plassere video/audio i en webside uten av en bruker Adobe Flash eller andre browserplug-ins1. En kan kontrollere video/audio-en via DOM og en vil kanskje etterhvert kunne plassere video/audio inne i en SVG, slik som Opera har demonstrert. Ikke minst det vil ettehvert fungere på små enheter som bruker Opera Mobile som browser eller WebKit (iPhone/iPhone Touch og diverse Symbian S60-enheter).

Kort fortalt så kan en nå i Safari 3.1 skrive følgende:

<video src="video.m4v" controls>
    Flashgreier o.l. eller bare en lenke
    til videoen kan plasseres her.
</video>

Den eneste videoen jeg hadde på harddisken var en gammel video som hjalp til med å rippe2 for Anders Christensen. Videoen er av Arne Sølvberg med studenter3 som i 1982 demonstrerer noen programmer på en PERQ. Jeg synes den er fin som veldig enkel demonstrasjon på <video>-elementet:

I den sammenhengen så er det litt tragisk at NRK snubler litt når de innfører NRK Nett-TV med Silverlight. Jeg kan skjønne at de midlertidig gjør dette siden NRK har investert og solgt lillefingeren til det de nå bruker. Men nå er det endel akivitet fra browserutviklerene4 sin side til å få til noe ok mht. video/audio og web. Forhåpentligvis vil NRK delta aktivt med utviklingene av HTML5 og komme med tilbakemelding om eventuelle feil og mangler. De vil og forhåpentligvis delta aktivt med utvikling/finansiering av åpne verktøy for RTSP/RTP, slik at de kanskje kan erstatte de lite fleksible verktøyene de nå bruker med noe som gjør ting lettere for dem og for oss som eventuelt titte og lytte på det NRK produsere.

Jeg ha tenkt meg at noen finanserte f.eks. en mod_rtsp e.l. til Apache. mod_ftp er greit nok, men det finnes endel ftp-tjenere og ikke så mange gode RTSP-tjenere.


  1. En kan tenke seg at støtte for <video>/<audio>kommer via plug-in, eller i det minste støtte for enkelste video/audio-kodeker kommer via plug-in, men det blir litt på siden. 

  2. Den skulle nok ha vært rippet i litt høyere oppløsning. 

  3. Lene Thrap og Geir Andersen. 

  4. Opera, Safari/WebKit og Firefox/Mozilla i det minste. Microsoft Internet Explorer ser ut til å leve i begynnelsen av dette tiåret med sin beta av IE 8.