Simple TextPath Example (VML)

Purpose

This example shows how to use the TextPath child element to align text along the path of a VML shape.

Example




Code

<!-- Include the VML behavior -->
<style>v\: * { behavior:url(#default#VML); display:inline-block }</style>

<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

<v:shapetype id="MyShape" coordsize="21600,21600" adj="9931" 
 path="m0@0c7200@2,14400@1,21600,0m0@5c7200@6,14400@6,21600@5e">
  <v:formulas>
    <v:f eqn="val #0" />
    <v:f eqn="prod #0 3 4" />
    <v:f eqn="prod #0 5 4" />
    <v:f eqn="prod #0 3 8" />
    <v:f eqn="prod #0 1 8" />
    <v:f eqn="sum 21600 0 @3" />
    <v:f eqn="sum @4 21600 0" />
    <v:f eqn="prod #0 1 2" />
    <v:f eqn="prod @5 1 2" />
    <v:f eqn="sum @7 @8 0" />
    <v:f eqn="prod #0 7 8" />
    <v:f eqn="prod @5 1 3" />
    <v:f eqn="sum @1 @2 0" />
    <v:f eqn="sum @12 @0 0" />
    <v:f eqn="prod @13 1 4" />
    <v:f eqn="sum @11 14400 @14" />
  </v:formulas>
  <v:path textpathok="t" />
  <v:textpath on="t" fitshape="t" xscale="t" />
  <v:handles>
    <v:h position="topLeft,#0" yrange="0,12169" />
  </v:handles>
</v:shapetype>

<v:shape type="#MyShape" 
  style="top:30;left:30;width:261.6pt;height:71.45pt;" 
  adj="8717" fillcolor="red" strokeweight="1pt">
  <v:fill method="linear sigma" focus="100%" type="gradient" />
  <v:shadow on="t" offset="3pt" />
  <v:textpath style="font-family:"Arial Black";v-text-kern:t" 
  trim="t" fitpath="t" xscale="f" string="Hello World !" />
</v:shape>

<v:shape type="#MyShape" 
  style="top:150;left:30;width:207pt;height:63pt;" 
  adj="8717" fillcolor="blue" strokeweight="2pt">
  <v:fill method="linear sigma" focus="100%" type="gradient" />
  <v:shadow on="t" offset="3pt" />
  <v:textpath style="font-family:"Times New Roman";v-text-kern:t" 
    trim="t" fitpath="t" xscale="f" string="VML" />
</v:shape>