Display SVG in 97% of all Web Browsers

Inspired by a blog post by John Dowdell, who was raising the question if it would be possible to trigger a SVG rendering SWF to do the work in case the user’s browser is not SVG enabled, i sat down last night to figure out if this could be solved using mod_rewrite on the serverside in combination with DENG.

It actually is possible, with a few constraints. Check out these SVGs (and make sure you have at least the Flash Player 6 installed and enabled):

You should notice that although the SVGs are physically located in /stuff/svg/ on my server, your browser loads the DENG engine (75kb, and only the first time, as then it is cached), which then loads the original SVG and renders it.

To get the SVG without the redirect, append ?raw to the URLs above.

I am using mod_rewrite to redirect requests for SVGs to DENG:

<ifmodule mod_rewrite.c>
RewriteEngine On
Options FollowSymLinks
RewriteBase /stuff/svg/
RewriteCond %{QUERY_STRING} !(raw) [NC]
RewriteCond %{HTTP_ACCEPT} !(image/svg\+xml) [NC]
RewriteRule ([A-Za-z0-9-]+).svg$ deng/index.php?filename=/stuff/svg/$1.svg.orig [L,T=text/html]
RewriteRule ([A-Za-z0-9-]+).svg.orig$ $1.svg?raw [L]
</ifmodule>

I am in no way a mod_rewrite/Apache/whatever expert, so the rules may be simplified yet, i don’t know. Comments on that are welcome.

The constraints are:

  • I am checking the HTTP_ACCEPT header field for image/svg+xml and do not redirect in case it is set. Unfortunately, neither Opera 8 nor IE6 with the Adobe SVG control set this mime type, that’s why DENG is always triggered in those browsers. I don’t know how Firefox 1.1 is going to behave, but my guess is that this is actually going to work in Firefox.
  • This method obviously does not work if you want to embed SVG inline (like via <img src="flashenabled.svg"> or <object>
  • DENG1 is still somewhat limited, so if you want to have full SVG-T compliance, you’d have to wait for DENG2

DENG 2.0

DENG 1.0 has been around for a long time now (almost three years), and there hasn’t been any new code release for quite a while, so some of you might wonder what we’ve been up to, and what the plans are.

We started developing DENG in difficult times. DotCom had just crashed hard, and demand for XForms renderers was low (the W3C XForms WG was still working on it). It was very hard to find contributors as most Flash developers generally disliked everything the W3C produced, and the proprietary nature of Macromedia products made it hard for people outside of the Macromedia world to join such a project. Also, it was nearly impossible to get funding. Nevertheless, we worked hard to make DENG a reality, found a few contributors who saw the potential, and even had a bit of funding (well, at least enough to pay the rent for a while).

A big up goes to Stefano Debenedetti, who was working on a Flash XHTML/CSS renderer for Benetton at the same time i was working on DENG. He quit his day job just a few weeks after we made first contact to come from Italy to Germany for a few months to join the core team and work on DENG fulltime. He eventually implemented the DENG XForms module, as well as an experimental SMIL module.

After we got DENG 1.0 out the door, open source, and with a lot of features (significant subsets of CSS3, XHTML, XForms, SVG, XFrames, etc), we started an open discussion about the future of DENG. The Flash Player 7 was released by Macromedia, introducing Actionscript 2 (an ECMAScript 4 implementation), but not much more that would be relevant for DENG. We thought about porting DENG to Actionscript 2, even wrote some proof of concept modules (Jim Cheng did a DOM implementation, i ported the DENG CSS parser etc).

The UGO initiative was given birth, at first as an attempt to develop an open source framework for the Flash Player. UGO was drawing the attention of quite some developers (both Flash and non-Flash), and some very interesting discussions were going on. The UGO initiative today focuses on providing reliable standards support on ECMAScript-like platforms and is an ongoing project. Current results are a deployment system, a module loader and a non-Flash, ECMAScript XForms implementation for current browsers, developed by Stefano, who luckily found a new employer (Dreamlab) being very pro open source and open standards and actually made all this possible.

I was very busy the last year, working on commercial Flash projects (and I still am). I also moved to Brazil some months ago, and currently am in progress of setting up a company here, so time was very limited thus far to work on DENG or UGO. I feel very bad for that, but unfortunately this was necessary.

With the Flash Player 8 on the horizon, i am now going to catch up with the development of DENG, and push it to version 2.0.

DENG 2.0 will be targeted for Flash Player 8. That means that the current code base will be completely refactored and DENG will leverage all the new features that are going to be introduced by the new Player (many of the new features are not yet published by Macromedia, but some are, like big improvements in drawing API and performance) – along with features developed in the UGO initiative (standards compliant API).

I have high expectations. I am working towards 100% compliance of XForms, SVG Tiny and CSS3 and as much of XHTML compliance as possible, with a strong focus on CSS3 and XForms.

Please contact me at claus at codeazur.com.br in case you want to contribute code (although it will take some time yet for code contributors to be able to join as the Flash Player 8 is not released yet) or in case you are looking for an open source, zero install, pure clientside, lightweight, modular renderer of XForms, XHTML, SVG etc (you name it) with CSS3. I also haven’t given up hope to get decent funding for that project, in order to make this a fulltime job again, either for me, or for other contributors. Thanks.

CSS3 Selectors

Recently, i continued porting the DENG1 CSS parser to ECMAScript 4 (AS2, to be specific), and making it fully compliant to the CSS3 specification. The current AS1 version of the parser already has many CSS3 features implemented, but not all of them (like the nth-child(), nth-last-child(), nth-of-type() and nth-last-of-type() pseudo classes for example, that required a special type of argument that wasn’t supported by the parser yet).

Part of the work was commenting changes in the grammar, to know what was added or changed from the CSS2.1 grammar, and to verify if the existing code fully conforms to the CSS3 grammar.

I figured this might be an interesting read for some of you, so here it is. Disclaimer: Please note that the comments might not be accurate or complete. In doubt, please refer directly to the Selectors module of the CSS3 specification at W3C.

Commented grammar for CSS3 Selectors Module

It is now specified that only one pseudo element is allowed in a selector, and that this pseudo element has to occur as the very last element. Pseudo classes can occur anywhere in a simple selector sequence.

selector
  /* there is at least one sequence of simple selectors */
  /* in a selector and the pseudo-elements occur only */
  /* in the last sequence; only one pseudo-element may */
  /* occur */
  : [ simple_selector_sequence combinator ]*
       simple_selector_sequence [ pseudo_element ]?
  ;

New combinators ~ (indirect adjacent combinator) and * (descendant combinator) have been introduced (the * combinator is not contained in the current CSS3 grammar though).

combinator
  /* combinators can be surrounded by white space */
  : S* [ '+' | '>' | '~' | /* empty */ ] S*
  ;

Typeselectors and the universal selector (*) have an optional namespace prefix now. Both the typeselector and the universal selector are optional.

The grammar for negation is missing in the current CSS3 grammar, it should look similar to the rule for pseudo_class, with a function identifier not() and one or more negation_args as function argument. The grammar is incomplete here. Example: a:not([href]).

simple_selector_sequence
  /* the universal selector is optional */
  : [ type_selector | universal ]?
        [ HASH | 
          class | 
          attrib | 
          pseudo_class | 
          negation ]+ |
    type_selector | universal
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

element_name
  : IDENT
  ;

A namespace prefix, if used, needs a preceding @namespace rule, where the namespace prefix is associated with a namespace URL. Let’s assume we want to mix SVG and XHTML markup in the same document. Both SVG and XHTML feature the <a> element. We most likely want the <a> element to appear different in the SVG context (i.e. shape appears with a stroke) than in the XHTML context (text appears underlined).

Using the @namespace rule and namespaced prefixes we can write rules that apply either to SVG’s or to XHTML’s <a> element:

@namespace xhtml url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
xhtml|a[href] { text-decoration: underlined; }
svg|a[href] { stroke-width: 2px; }
namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

Attribute simple selectors allow an optional namespace prefix for the attribute ident now.

Prefixmatch (^=), suffixmatch ($=) and substringmatch (*=) operators have been introduced.

Example: we want to style <a> elements with the href attribute set to an URL starting with "http://wahlers.com.br" differently than other <a> elements. we are using the prefixmatch operator:

a[href] {
   font-weight: bold;
}
a[href ^= "http://wahlers.com.br"] {
   font-style: italic;
}

All <a> elements with the href attribute set appear bold, <a> elements with a href attribute starting with "http://wahlers.com.br" appear bold and italic.

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo_class
  /* a pseudo-class is an ident, or a function taking */
  /* an ident or a string or a number or a simple  */
  /* selector (excluding negation and pseudo- */
  /* elements) or a an+b expression for argument */
  : ':' [ IDENT | functional_pseudo ]
  ;

"an+b" expressions have been introduced as argument for functional pseudo classes (select nodes depending on their position). Allowed argument types include string, number, "an+b" expression and negation now, in addition to ident (the only allowed argument type in CSS2.1).

Example: style even and odd rows of a table differently:

tr { background-color: #eee; }
tr:nth-child(2n) { background-color: #ccc; }
functional_pseudo
  : FUNCTION S* [ IDENT | STRING | NUMBER |
      expression | negation_arg ] S* ')'
  ;

expression
  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] |
      INTEGER
  ;

negation_arg
  : type_selector |
    universal |
    HASH |
    class |
    attrib |
    pseudo_class
  ;

Pseudo elements are now prefixed by :: (instead of : in CSS2.1) to distinguish between pseudo elements and pseudo classes. For backwards compatibility with CSS2.1 and previous, user agents have to accept the : notation for pseudo elements defined in earlier specs (like :before and :after).

pseudo_element
  : [ ':' ]? ':' IDENT
  ;
Posted in CSS

XForms For The Masses

The FormFaces project team announced their open source ECMAScript XForms solution today. The engine processes XForms entirely on the client side and runs on any ECMAScript and DOM Level 2 powered Webbrowser (Internet Explorer, Mozilla, Opera, Konquerer, Safari and others). All the author has to do is add one JavaScript include to her XHTML/XForms document: <script type="javascript" src="xforms.js"></script>.

Given that the engine lives up to its promise, this release may mark the end of the UGO Project as we know it today. The goal would have been achieved and developers can finally start writing sophisticated forms applications without the hassle of messing with error-prone, homegrown JavaScript to overcome the limits of current HTML forms implementations.

FormFaces is currently in alpha and scheduled to be released in April.

My Search Engine Friendly Flash Site

I am currently working on a unobtrusive method to deploy Flash on top of XHTML websites. The method is based on a simplified version of the sIFR (Scalable Inman Flash Replacement) JavaScript code. It solves several problems Flash developers have to deal with when deploying Flash:

  • Search Engine friendly
  • Permalink friendly
  • Unobtrusive Flash detection/integration
  • <embed> issue in XHTML
  • 100% height issue in XHTML

The main idea is to show a Flash version of the site if and only if the user has JavaScript, CSS and Flash enabled in her browser, and show the original XHTML document otherwise. If the user’s browser qualifies for showing Flash content, the XHTML document is loaded back from the Flash movie and serves as the data provider.

A beta version of this method is available here:
http://codeazur.com.br/stuff/fugsp/

The code is tested in the following browsers so far:

  • Firefox (Windows, Linux, OSX)
  • IE 6 (Windows)
  • Opera 7.* (Windows)

I know the code is still with problems on Safari. If you’re on a Mac and have some minutes, could you be so kind and debug the JavaScript on Safari? I have no Mac here to test, and it would help me a lot as i want the code to be fully crossbrowser. Thanks a lot!

UGO and DENG on InfoWorld

InfoWorld has a five-page article online today, featuring a review of three XForms engines (DENG, Orbeon Integration Suite and PureEdge 8x Suite 2.6)

DENG is a marvelously clever client-side implementation of XForms — clever because it’s crafted largely in Flash, with a touch of ECMAScript. This means virtually any browser that supports Flash Player 6 (or better) can run DENG.

The article also includes a summary on UGO, a project devoted to help provide reliable standards support on all ECMAScript-like platforms like current web browsers or the Flash Player:

The beneficiary of this effort will be the user community. UGO is entirely open source. In addition, UGO will retain DENG’s wide deployment capability. For example, not only will you be able to deploy UGO in any browser implementing ECMAScript 3, but UGO will also run atop Macromedia’s Flash Player.