Dynamic TextPath Typeface Example (VML)


Purpose

This example demonstrates how to dynamically control the typeface attributes of a TextPath child element.

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"/>

<p>
<v:shape id="text01" coordorigin="-100 100" coordsize="200 200"
         style='top:.1in; left:1in; width:3in; height:1.5in'
         strokecolor="black" strokeweight=".5pt" path="m 0,200 l 100,200 x e">
  <v:path textpathok="True" />
  <v:fill on="True" color="blue" type="solid"/>
  <v:textpath on="True" id="mytp" style="font:normal normal normal 36pt Arial"
              xscale="True" string="Hello VML"/>
</v:shape>
</p>

<p>
<input type="button" value="Style"  name="BtnStyle" style="width:75px">&nbsp;
<input type="button" value="Weight" name="BtnWeight" style="width:75px">&nbsp;
<input type="button" value="Size"   name="BtnSize" style="width:75px">&nbsp;
<input type="button" value="Reset"  name="BtnReset" style="width:75px">
</p>

<script language="VBScript">
<!--
Sub BtnReset_OnClick
  mytp.style.font = "normal normal normal 36pt Arial"
End Sub

Sub BtnStyle_OnClick
  If InStr(mytp.style.font, "italic") > 0 Then
     mytp.style.fontstyle = "normal"
  Else
     mytp.style.fontstyle = "italic"
  End If
End Sub

Sub BtnWeight_OnClick
  If InStr(mytp.style.font, "bolder") > 0 Then
     mytp.style.fontweight = "normal"
  Else
     mytp.style.fontweight = "bolder"
  End If
End Sub

Sub BtnSize_OnClick
  If InStr(mytp.style.font, "48pt") > 0 Then
     mytp.style.fontsize = "36pt"
  Else
     mytp.style.fontsize = "48pt"
  End If
End Sub

-->
</script>