How do I get VML working in standards mode?

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.

Answers:

Answer

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>
Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.