The absolute Position Style

You can also position shapes in absolute terms. When you set the position style property to absolute , the shape is positioned with respect to the upper-left corner of its container. You can use the top and left style properties to position the top left of the shape with regard to the container's origin.

Here's an example. In this case, I'll position a VML shape 100 points from the top and left of the shape's container, which is the browser's display area:

Listing ch19_11.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Absolute Positioning             </H1>             Here is the rectangle:  <v:rect style='position:absolute;left:100pt;   top:100pt;width:200pt;height:100pt'   fillcolor="red" strokecolor="green"   strokeweight="4pt"/>  </CENTER>     </BODY> </HTML>

You can see the result in Figure 19-11. The rectangle is positioned in absolute terms in the browser's display area. Note that when you position shapes absolutely , they are not considered part of the text flow.

Figure 19-11. Using absolute positioning.

graphics/19fig11.gif

The z-index Position Style

It is possible to position a shape that overlaps another shape. In VML, you can control the z-order by using the z-index style attribute. You can set this attribute to zero, a positive integer, or a negative integer. The shape that has a larger z-index value appears on top of the shape that has a smaller z-index value. When both shapes have the same z-index value, the shape that was displayed last appears on top.

For example, in the following VML, the blue oval is displayed on top of the red rectangle. This is because the z-index value of the blue oval is greater than the z-index value of the red rectangle:

Listing ch19_12.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Z-Index Positioning             </H1>  <v:rect style='position:absolute;left:100pt;top:100pt;   width:200pt;height:100pt;z-index:0'   fillcolor="red" strokecolor="green"   strokeweight="4pt"/>   <v:oval style='position:absolute;left:150pt;top:60pt;   width:100pt;height:100pt;z-index:1'   fillcolor="blue" />  </CENTER>     </BODY> </HTML>

You can see the result in Figure 19-12.

Figure 19-12. Reversing z-index positioning.

graphics/19fig12.gif

If you reverse the z-index of the shapes, the blue oval would move behind the red rectangle:

 <v:rect style='position:absolute;left:100pt;top:100pt;   width:200pt;height:100pt;z-index:1'     fillcolor="red" strokecolor="green"     strokeweight="4pt"/> <v:oval style='position:absolute;left:150pt;top:60pt;     width:100pt;height:100pt;z-index:0'     fillcolor="blue" />

Positive z-index values are considered out of the screen, and negative values are considered into the screen. Note that if you provide a negative integer, you can use z-index to position graphics behind the normal flow of text.

The rotation Position Style

You can use the rotation style property to specify how many degrees you want a shape to be rotated . A positive value specifies a clockwise rotation, and a negative value specifies a counterclockwise rotation.

For example, if you specify style='rotation:45' , you can rotate this rectangle 45 ° clockwise:

Listing ch19_13.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                  VML Rotation Positioning             </H1>  <v:rect style='position:absolute;left:100pt;top:100pt;   width:200pt;height:100pt;rotation:45'   fillcolor="red" strokecolor="green"   strokeweight="4pt"/>  </CENTER>     </BODY> </HTML>

You can see the result of this VML in Figure 19-13.

Figure 19-13. Rotation positioning.

graphics/19fig13.gif

The flip Position Style

You can use the flip style attribute to flip a shape on its x or y axis. Here are the possible values of this property:

x Flips the rotated shape about the y axis
y Flips the rotated shape about the x axis

You can use either x or y or both. If you use style='flip:x y' , the shape flips on both its x and y axis. As an example, here's how to flip the shape in Figure 19-7 with respect to the y axis:

Listing ch19_14.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Flip Positioning             </H1>             <v:polyline points="0pt,0pt,90pt,-9pt,180pt,60pt,0pt,                 20pt -180pt,60pt,-90pt,-9pt,0pt,0pt"  style="flip: y"  strokecolor="red" strokeweight="2pt"/>         </CENTER>     </BODY> </HTML>

The flipped shape appears in Figure 19-14.

Figure 19-14. Flip positioning.

graphics/19fig14.gif

The < group > Element

You can group shapes with the <group> element, which allows you to treat a number of shapes as one unit. To create a group, you use the <group> element, which supports the coreattrs attributes. Here is this element's XML template:

 <group  id=null class=null style='visibility: visible' title=null href=null target=null alt=null coordsize="1000, 1000" coordorigin="0, 0" wrapcoords=null />

Here's an example. In this case, I'll group a rectangle and an oval together. I do that by creating a <group> element this way:

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">      <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Grouping Elements             </H1>  <v:group id="Group1" style='position:absolute;   left:150pt;top:60pt;width:200pt;height:100pt'   coordsize="100,100">   .   .   .   </v:group>  </CENTER>     </BODY> </HTML>

You position grouped shapes together, so I'm specifying the absolute position and dimensions of the group with the <group> element's style property.

Here's an important point: The shapes in a group use the group's coordinate system because the group is their container. To specify the group's coordinates, you can use the coordsize and coordorigin attributes. By default, the coordinate size is set to 1000 x 1000, and the origin is set to (0, 0) in a group (there are no units for these valuesthey're relative measurements expressed simply as numbers ).

In this example, I've set the coordinate size to 100 x 100, so I draw the contained shapes using that coordinate system:

Listing ch19_15.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>             v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Grouping Elements             </H1>             <v:group id="Group1" style='position:absolute;                 left:150pt;top:60pt;width:200pt;height:100pt'                 coordsize="100,100">  <v:rect   fillcolor="red" strokecolor="green"   style='width:50;height:50'   strokeweight="4pt" />   <v:oval   fillcolor="blue"   style='width:50;height:50' />  </v:group>         </CENTER>     </BODY> </HTML>

You can see the result of this VML in Figure 19-15. The group of shapes is treated as one unit, which is useful because it allows you to position and scale all the shapes in the group at once.

Figure 19-15. Grouping elements.

graphics/19fig15.gif