The VML Elements

Twenty elements are defined in VML:

• <arc> Draws an arc

• <background> Adds a background

• <curve> Draws a curve

• <fill> Fills a shape

• <formulas> Specifies a formula that lets you scale shapes

• < group > Groups shapes

• <handles> Draws handles on shapes

• <image> Supports images

• < imagedata > Specifies an image to be rendered on top of a shape

• <line> Draws a line

• <oval> Draws an oval

• < path > Specifies a path for rendering

• <polyline> Draws a shape from line segments

• < roundrect > Draws a rounded rectangle

• <shadow> Adds a shadow to a shape

• <shape> Creates a basic shape

• <shapetype> Defines a reusable shape

• <stroke> Specifies how to draw a path

• <textbox> Creates a text box

• <textpath> Specifies a path for text to be drawn along

The overall structure of VML is based on two primary elements: <shape> and <group> . The <shape> element is the most basic VML element, and you use it to define general graphic shapes in VML. You can use the <group> element to group shapes together so they can be handled as a single unit.

Besides the <shape> and <group> elements, VML defines additional top-level elements to help make the editing and representation of complex graphical information more compact and convenient . For example, you can use the <shapetype> element to define a definition of a shape. A <shape> element may then reference a <shapetype> element to instantiate several copies of the same shape.

You also can use a number of predefined shapes based on the <shape> element. Using the predefined shapes means you don't have to explicitly declare the shape you want to use. These predefined shapes are <line> , <polyline> , <curve> , <rect> , <roundrect> , <oval> , <arc> , and <image> .

VML Elements' Common Attributes

You can find parts (but only parts) of the VML DTD in the VML note at www.w3.org/TR/NOTE-VML. Two important parts are the entity parameters coreattrs and shapeattrs , which define attribute lists, because many of the elements we'll see in this chapter use those attributes. Here's how coreattrs is defined:

 <!entity %coreattrs  id id #implied -- document-wide unique id -- class cdata #implied -- space separated list of classes -- style cdata #implied -- associated style info -- title cdata #implied -- advisory title/amplification - href cdata #implied -- URL link if the element is clicked on -- target cdata #implied -- target frame for href - alt cdata #implied -- alternate text if element cannot be displayed -- coordsize cdata #implied - size of coordinate space inside the element -- coordorigin cdata #implied -- coordinate at top-left corner of element -- wrapcoords cdata #implied -- outline to use for tight text wrapping -- > 

Here is the shapeattrs parameter entity:

 <!entity %shapeattrs  opacity cdata #implied -- opacity of the shape -- chromakey cdata #implied - color to be made transparent -- stroke cdata #implied -- Boolean whether to stroke the outline or not -- strokecolor cdata #implied - RGB color to use for the stroke -- strokeweight cdata #implied - weight of the line to use for stroking -- fill cdata #implied -- Boolean whether to fill the shape or not -- fillcolor cdata #implied - RGB color to use for the fill -- print cdata #implied -- Boolean whether the element is to be printed -- > 

VML Uses CSS

VML uses CSS to position and orient shapes. In addition to standard CSS layout, the VML elements may be rotated or flipped . Each element also establishes a coordinate space for its content, which allows scaling of the content with respect to the containing elements.

VML uses a number of VML styles to augment CSS2, and I'll take look at them here.

The rotation Property

You can use the rotation property to specify a rotation for a shape or group. The rotation is measured in clockwise degrees about its center.

The flip Property

You use the flip property to specify that a shape or group should be flipped about its center about either the x or the y axis. Here are the two values you can assign to the flip property:

• x Flips the rotated shape about the y axis

• y Flips the rotated shape about the x axis

The center-x and center-y Properties

You use the center-x and center-y properties to specify the center of the block that contains the shape. These properties can be used as an alternative to the customary CSS positioning properties, left and top .

Local Coordinate Space

The <shape> and <group> elements are CSS block-level elements. Inside their blocks, a local coordinate system is defined for any subelements that use the coordsize and coordorigin attributes, and all CSS2 positioning information is expressed in terms of this local coordinate space. We'll run into these attributes in this chapter when we group shapes together.

The VML coordsize attribute defines how many units there are along the width of the containing block. The coordorigin attribute defines the coordinate at the top-left corner of the containing block. For example, if a group were defined as follows :

 <v:shape style='width: 500px; height: 200px' coordsize="100,100"  coordorigin="-50,-50" /> 

the containing block would be 500 pixels wide by 200 pixels high. The coordinate system inside the block ranges from 50.0 to 50.0 along the x axis and 50.0 to 50.0 along the y axis. The point (0, 0) is right in the center of the block. Shapes inside the group are positioned and sized according to this local coordinate system. That's useful because, no matter how the width and height of the group is changed, the local coordinate system inside will remain the same.