Archive for September, 2010

Supporting HTML5 elements without JavaScript

by George Paterson.

HTML5 is the newest standard for HTML development, it has a range of additional features that will change the way we interact with the web. This is great for web development, there is a problem though, older browser versions specifically IE 6, 7 and 8 do not support the new HTML5 elements so that you cannot attach CSS to those elements.

Fortunately Sjoerd Visscher, Remy Sharp and John Resig amongst others have promoted a technique in mitigating this problem by using JavaScript to create a new DOM element of the same name as the required HTML 5 element, this then allows the browser to attach CSS to the element.

The fundamental problem of this though is that you are reliant on JavaScript for this to work and if the new elements have a structural role in the design then your design is going to fall apart.

Web Fonts – Em square

by George Paterson.

To properly understand how to typeset web fonts it is necessary to understand how the font fits with the other structures on the page.

The em square is a fundamental property of a web font, the square is a container for a two-dimensional coordinate system. Each unit of this grid is called a font unit, the greater the number of font units per em square the greater the resolution of the font.[1]

Web Fonts

by George Paterson.

With the @font-face CSS declaration now supported cross browser it is possible to attach fonts to web documents. Implementation though is a maturing subject supporting a number of different formats. Some background and techniques are described in this article.

Font formats

TrueType

TrueType is a spline-based font standard originally developed by Apple.[1]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.

OpenType

OpenType was developed by Microsoft with Adobe contributing and was intended to supersede TrueType.[2]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.

Embedded OpenType

Designed by Microsoft to be embedded into a web document, the file is an encrypted OpenType or TrueType font that has a list of allowed host domains compiled into it, the font can also be subsetted when the EOT is generated. Since EOT is a propriety format it was rejected by the W3C.[3]

EOT’s are generated by Microsoft’s Web Embedding Font Tool.

Supported by Internet Explorer 4+.