I would like to be able to use vml objects on a page rendering in standards mode rather than quirks mode. I've found fragments of answers scattered around but can't figure it out. Raphael pulls it off somehow but I can't reverse it to figure out what's happening. Any basic working example would be great.
A:
Why don't you simply use Raphael itself instead of using raw VML? The Raphael guys have done a great job producing a standard library which works almost everywhere - make use of their hard work.
Crimson
2010-10-07 19:58:27
I have an existing project with lots of vml working in quirks mode. I'd like to know what it takes to change the page mode rather than swapping out all the vml for raphael calls.
lincolnk
2010-10-07 20:06:33
+1
A:
I think I have it figured out. Step 1 is importing the vml namespace though javascript.
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
This got some random vml samples to work in quirks mode but not standards. They key is that elements require a unit for measurements where quirks mode will assume px if a unit is not provided. Also shapes have to be styled with position:absolute; although lines apparently do not need this part.
Here's a sample with 2 ovals. Both ovals will render in quirks mode but the blue oval will not show in standards mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<script>
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
</script>
<v:oval style="width: 100; height: 50" fillcolor="blue"></v:oval>
<v:oval style="position: absolute; width: 100px; height: 50px" fillcolor="green"></v:oval>
</body>
</html>
lincolnk
2010-10-08 13:36:09