To enter presentation mode in Opera, press [F11] and use PgDn and PgUp to navigate in the document

Scalable, beautiful web documents

Håkon Wium Lie
CTO Opera Software
howcome@opera.com
UIO 2003-04-08

Conflicts on the web

CERN

The image shows the parking lot of CERN with the Jura mountains in the background.

Inside the CERN hallways, offices are lined up with scientific orderlyness. The web was developed in the first offices on the left side.

The pipes that inspired HTML?

Going outside, a beautiful scenery emerges with Mt Blanc in the background.

Turning the camera around, the Jura mountains are almost as beautiful. In May, they are still snow-capped.

INRIA

When CERN chose to concentrate on physics, the WWW project moved to INRIA in Sophia-Antipolis, France.

The architects have developed an extenstion mechanism.

The nearby town of Antibes with the Alps in the background.

Menton, closer to the Italian border.

Presentation vs. semantics

Ladder of abstraction

  semantics

     H
     H
     H
     H
     H
     H
     H
     H
     H
     H
     H

  presentation

Ladder of abstraction

  semantics

     H
     H
     H
     H
     H  MathML
     H
     H  HTML
     H
     H  PDF
     H
     H  GIF, JPEG, PNG

  presentation

Text vs. images

HTML

   <H1>Headline</H1>

XHTML

   <h1>Headline</h1>

CSS

CSS sample

<H1>Headline</H1>

H2 {
  font: 18px Helvetica;
  color: red;
  margin-left: 2em;
}

Authors vs. users

Desktop vs. devices

Scalable pages in CSS

@media code example

<HTML>
  <STYLE>
    @media print { H1 { font-size: 12pt }}
    @media screen { H1 { font-size: 1.4em }}
    @media projection { H1 { font-size: x-large }}
    @media handheld { H1 { font-size: 8px }}
    @media speech { H1 { volume: loud }}
  </STYLE>
  <BODY>
    <H1>Headline</H1>
  </BODY>
</HTML>

Opera Small Screen Rendering

OperaShow

HTML+CSS Summary

Transformations vs. styling

Transformations in CSS

IMG { display: none }

H2:before {
  content: "Chapter: ";
  font-style: italic;
  text-decoration: blink;
}

XSL

Code example

<heading>The headline</heading>

Example 1: XML to HTML

<xsl:template match="heading">
  <h1>
    <xsl:apply-templates/>
  </h1>
</xsl:template>

The result is:

<h1>The headline</h1>

Example 2: XML to XSL-FO

<xsl:template match="heading">
  <fo:block font-size="1.3em" 
      margin-top="1.5em" margin-bottom="0.4em">
    <xsl:apply-templates/>
  </fo:block>
</xsl:template>

The result is:

<fo:block font-size="1.3em" 
    margin-top="1.5em" margin-bottom="0.4em">
  The headline
</fo:block>

Example 3: XML to HTML/CSS

<xsl:template match="Heading">
  <h1 style="font-size:1.3em; 
      margin-top:1.5em; margin-bottom:0.4em">
    <xsl:apply-templates/>
  </h1>
</xsl:template>

The result is:

<h1 style="font-size:1.3em; 
    margin-top:1.5em; margin-bottom:0.4em">
  The headline
</h1>

Observations

MathML

A fundamental challenge in defining a mathematics markup language for the Web is reconciling the need to encode both the presentation of a mathematical notation and the content of the mathematical idea or object which it represents.

MathML examples

  a-b

MathML's presentation elements:

<mrow>
  <mi>a</mi>
  <mo>-</mo>
  <mi>b</mi>
</mrow>

MathML's content elements: 

<apply>
  <minus/>
  <ci>a</ci>
  <ci>b</ci>
</apply>

MathML observations

Abstraction levels in Web document formats

GIF JPEG PNG PDF XML XSL-FO HTML MathML
application-
specific semantics?		 no no no no no yes
device-
independent?		 no no no no yes yes
roles known? no no no no yes yes
scalable? no no unknown yes yes yes
text in logical order? - no unknown yes yes yes
text available? no yes yes yes yes yes

Download Opera7!