Vector Markup Language (VML)
Vector Markup Language (or VML from hereafter) is a markup language, written in XML, put together by Microsoft, Autodesk, Macromedia, and Visio to define vectors shapes and was first implemented in IE 5. This standard was submitted to the W3C as a note but never adopted. Instead, the W3C came out with Scalable Vector Graphics (SVG). But, Microsoft has not yet (as of IE6) put in native support for SVG so I tend to stick to good ol' VML :-)
Alot of the following code/examples/snippets have no real use in life but are merely my attempts to come to grips with some of the interesting quirks of the VML language. I know I went through abit of grief trying to learn VML so perhaps some of this will come in handy for other... perhaps not.
In the near future, I might actually put some articles up covering a few things I've find out about VML (especially if people ask for them), so stay tuned.
A Few Notes
I decided that I might as well go ahead and talk about a few issues I had with VML and the workarounds. I was going to put that all off until I structured the site abit more but who knows when that will be :-) So, in no particular order:
- BUG: Horizontal Text Paths Appear as Flat Lines in IE6
- Text appearing as a flat line in IE6 happens if you have a horizontal line (e.g.,
<v:line from="0,0" to="100,0"/>) and apply a TEXTPATH to that line. What you get is something like this:<v:line from="0,0" to="100,1">) and you get something abit more readable: - HINT: IE5.5 Does support anti-aliasing
- I had just assumed that VML was not anti-aliased and accepted that as a shortcoming. That is, until I loaded up some stuff in IE6 and it was anti-aliased. So then I assumed that was something extra they had added to IE6. That is, until I was looking at some code from Microsoft and noticed this style assignment in the header:
<style type="text/css">
v:\* { behavior: url(#default#VML);
antialias: true;
}
</style>
So this hint actual covers two items, one, you can have anti-aliasing in IE5.5 and it's on by default in IE6 AND you should always look at Microsoft's own code since sometimes, their programmers use features that the documenters forget. - BUG?: VML Doesn't Print
- You spend lot's of time making some sort of wonderful VML creation and when you go to print it, nothing happens. IE says it printed yet, nothing appears :-( Here is the trick that I never found documented anywhere and I just happen to stumble across. Now, we all know about the COORDSIZE attribute right? It's the attribute on a shape that defines the virtual coordinate space that you will draw your shape in. You see lot's of examples where they have ramped the values right up there to give alot of precision in the shape paths (e.g.,
coordsize="3200,3200") even though the actual shape might only be 200 pixels wide. Well, to get the VML to print, the COORDSIZE attribute values must be an even multiple of the actual size of the shape. That is, if you shape is 200 pixels by 300 pixels your COORDSIZE values should be something like "2000,3000" or "20000,30000". Go ahead, try it and be amazed! - HINT: Microsoft's documentation of VML at MDSN doesn't seem complete
- You read through all the documentation at MSDN about VML and when you check out real-world samples (e.g., exports from Word, Excel, Powerpoint), you see all sorts of new and interesting things. Well, for the complete reference, check out the original specification they submitted to the W3C. Although it's not written as documentation, pretty much everything (except the Office extensions) is in there.