Future Web Standards

Current Standards: xhtml 1.1 plus MathML 2.0 plus SVG 1.1

This site is written and validated against these standards. This particular page, however, does not validate due to the rather bleeding‐edge contents.

xhtml

The advantages of xhtml over html 4 are its xml‐enforced regularities. This makes writing clean code much simpler, and much easier to check. There isnʼt anything to demonstrate for xhtml 1.1, as the semantics are exactly the same as html 4.01. Only the syntax is different:

  • all tags have to be closed (with either a closing tag, or self‐closing <img /> <span></span>).
  • all elements and attributes are in lower case.
  • all attribute values must be quoted.
  • inline elements must be enclosed in a block element.

Utilizing xhtml also allows for easier integration of other xml applications, such as SVG, MathML, xforms, and others. Thru the use of namespaces it is possible to embed MathML, for example, directly in the page (as is done below).

MathML

MathML is an xml language for formatting complex formulas. Below is the quadratic equation which appears on the home page. Support for MathML is present in webkit browsers, Opera, Firefox and IE 10.

x = - b ± b 2 - 4 a c 2 a

SVG

SVG is a scriptable vector based xml language. Combined with javascript and xhtml it can be used to construct a user interface (similar to Flash, for example). Fonts can also be rendered in SVG (see next section). This is a clock rendered in vector graphics, as well as a simple running man graphic. As of 2010.01 webkit has a problem with background transparency in SVG, but Firefox and Opera render them correctly.

Standards in Development

Web Fonts / Typography

In addition to the avaiblability of SVG fonts, OpenType/TrueType font support is part of the upcoming html 5 spec. Not yet officially part of the spec, but proposed by Mozilla is the web open font format (woff), which utilizes a compressed version of otf/ttf fonts. For a more complete comparison, check out the web font page.

Options4 svg
Options4 ttf
Options4 woff

For even greater typographic control, there are proposals from both Mozilla and Opera for adding OpenType font feature selections to CSS via the font-variations tag. This would allow advanced features such as alternate glypes, swashes, ligatures, small caps, and character position to be properly displayed in a browser. Stayed tuned.

CSS 3

CSS 3 includes selectors and animations, among many other things. (This paragraph will change color and a box with a shadow will gradually appear when moused over, using CSS animation. Itʼll just turn blue without animation.)

The first paragraph in the x/html 5 section illustrates columns, and the logo on the home page shows the use of the text‐shadow css. The bullet point boxes illustrate the use the box-shadow and border-radius properties.

This paragraph should have been made italic using the CSS 3 :last-child selector.

CSS OpenType Features

Opentype font test, using font-feature-settings to try out various properties. Supported in Firefox 17+, Chrome 18+:

common ligatures: ff fi / ff fi

discretionary ligatures: first luck with gin

style set: GOOD & BAD

fractions: 7/25 23/121

oldstyle numerals (proportional / tabular): 0123456789 / 0123456789

small caps: Font Features

x/html 5 and xhtml 2.0

After reading several comparisons between (x)html 5 and xhtml 2.0, here are the relevant pieces for me. xhtml 2.0 is a dead spec, but this list of some of its capabilities may be instructive. parts of x/html 5 are currently supported by Safari 4+, Firefox 3.5+ and Opera 10+. Below, i try some of this stuff out, with limited success.

x/html 5
xhtml 2.0 (dead)
  • hyperlink (href) in any element
  • image (src) attribute in any element
  • navigation lists
  • handler element for scripted events
  • uses XForms instead of input

Input

  • type=email:
  • type=url:
  • type=date:
  • type=range: -
  • pattern:
  • required:

Drag(nDrop)

What fruits do you like?

  1. Apples
  2. Oranges
  3. Pears

Canvas and Video elements

Click on the box below to draw on the canvas: