Post
Ask Question

Creating Various Text Paths Using HTML 5

Introduction

 
This is a simple application for beginners that shows how to create various text paths using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop various text path applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create various text path applications using HTML 5 and CSS tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "Path".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop.
  • Right-click on desktop->new->Folder.
  • The name of the folder is "Text".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name it "Video.aspx".
new.gif
webapplication.gif
 
Step 4: Add an HTML file to your web application.
  • Right-click on Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Textpath.html".
html.gif
 
Step 5: Now in this step we define a style that is applied on the next page. In the <style> tag we define some properties; they are font-family, font- size, world-spacing and letter-spacing.
 
Code
  1. <style>  
  2.   .example_desc  
  3.     {  
  4.      font-family:Comic Sans MS;  
  5.      font-size:30px;  
  6.       }  
  7.  .wide_spacing  
  8.    {  
  9.      font-family: Arial;  
  10.      font-size: 36px;  
  11.      letter-spacing: 2px;  
  12.      word-spacing: 8px;  
  13.        }  
  14.  </style> 
Step 6: Now in this step we define both a horizontal and vertical text path at the same time.
 
Code
  1. <desc>Tom application</desc>  
  2.   <text class="example_desc" x="50" y="20">Tom Developed text on path</text>  
  3.   <defs>  
  4.   <path id="text-path" d="M 50 70 l 170 0 l 0 130 l 200 0">  
  5.   </defs>  
  6.   <use xlink:href="#text-path" fill="red" stroke="sky" />  
  7.   <text class="wide_spacing">  
  8. <textPath xlink:href="#text-path">www.csharpcorner . com</textPath> 
1.gif
 
Step 7: Now in this step we apply a different color on a text.
 
Code
  1. <desc>Tom draw a various color on text</desc>  
  2.    <text class="example_desc" x="500" y="20">Tom draw a various color on text</text>  
  3.    <g font-size="25" fill="Red" stroke="gray" stroke-width="1" >  
  4.    <text x="500" y="80" text-decoration="line-through" >Csharpcorner</text>  
  5.    <text x="500" y="140" text-decoration="underline" >Mindcracker</text>  
  6.    <text x="500" y="200" text-decoration="underline" >  
  7.    <tspan>Csharpcorner </tspan>  
  8.    <tspan fill="Red" stroke="purple" >is </tspan>  
  9.    <tspan fill="Red" stroke="black" >best </tspan>  
  10.    <tspan fill="Red" stroke="darkgreen" text-decoration="underline" >Tutorials </tspan>  
  11.     <tspan fill="Red" stroke="blue" >site</tspan>  
  12.    </text>  
  13.  </g> 
2.gif
 
Step 8: Now in this step we define another text path that shows just like a digital format.
 
Code
  1. <desc>Tom developed dynamically variation on text</desc>  
  2.    <text class="example_desc" x="50" y="300">Tom developed dynamically variation on text</text>  
  3.    <defs>  
  4.    <path id="MyPath" d="M 100 420  
  5.    C 110 400 210 300 310 400  
  6.    C 400 500 420 520 460 500  
  7.    C 620 400 670 400 690 400" />  
  8.    </defs>  
  9.    <use xlink:href="#MyPath" fill="none" stroke="red"  />  
  10.    <text font-family="Verdana" font-size="25" fill="blue" >  
  11.    <textPath xlink:href="#MyPath">  
  12.    Csharp  
  13.    <tspan dy="-25" fill="red" >corner,mindcracker </tspan>  
  14.    <tspan dy="25"> , </tspan>  
  15.          is  
  16.     <tspan dy="25" fill="green"> best</tspan>  
  17.     <tspan dy="-25"> , </tspan>  
  18.        Tutorials site  
  19.     </textPath>  
  20.  </text> 
3.gif
 
Step 9: The complete code of both text path application is given below.
 
Code
  1. <html>  
  2.   
  3.  <head>  
  4.   
  5.    <style>  
  6.  .example_desc  
  7.     {  
  8.      font-family:Comic Sans MS;  
  9.      font-size:30px;  
  10.         }  
  11.  .wide_spacing  
  12.    {  
  13.     font-family: Arial;  
  14.      font-size: 36px;  
  15.      letter-spacing: 2px;  
  16.      word-spacing: 8px;  
  17.        }  
  18.  </style>  
  19.  </head>  
  20.   <body bgcolor="#ffffcc">  
  21.   <svg width="1100" height="700">  
  22.   <desc>Tom application</desc>  
  23.   <text class="example_desc" x="50" y="20">Tom Developed text on path</text>  
  24.   <defs>  
  25.   <path id="text-path" d="M 50 70 l 170 0 l 0 130 l 200 0">  
  26.   </defs>  
  27.   <use xlink:href="#text-path" fill="red" stroke="sky" />  
  28.   <text class="wide_spacing">  
  29.   <textPath xlink:href="#text-path">www.csharpcorner . com</textPath>  
  30.   <desc>Tom draw a various color on text</desc>  
  31.   <text class="example_desc" x="500" y="20">Tom draw a various color on text</text>  
  32.   <g font-size="25" fill="Red" stroke="gray" stroke-width="1" >  
  33.   <text x="500" y="80" text-decoration="line-through" >Csharpcorner</text>  
  34.   <text x="500" y="140" text-decoration="underline" >Mindcracker</text>  
  35.   <text x="500" y="200" text-decoration="underline" >  
  36.   <tspan>Csharpcorner </tspan>  
  37.   <tspan fill="Red" stroke="purple" >is </tspan>  
  38.   <tspan fill="Red" stroke="black" >best </tspan>  
  39.   <tspan fill="Red" stroke="darkgreen" text-decoration="underline" >Tutorials </tspan>  
  40.   <tspan fill="Red" stroke="blue" >site</tspan>  
  41.   </text>  
  42.   </g>  
  43.   <desc>Tom developed dynamically variation on text</desc>  
  44.   <text class="example_desc" x="50" y="300">Tom developed dynamically variation on text</text>  
  45.   <defs>  
  46.   <path id="MyPath" d="M 100 420  
  47.   C 110 400 210 300 310 400  
  48.   C 400 500 420 520 460 500  
  49.   C 620 400 670 400 690 400" />  
  50.   </defs>  
  51.   <use xlink:href="#MyPath" fill="none" stroke="red"  />  
  52.   <text font-family="Verdana" font-size="25" fill="blue" >  
  53.   <textPath xlink:href="#MyPath">  
  54.   Csharp  
  55.   <tspan dy="-25" fill="red" >corner,mindcracker </tspan>  
  56.   <tspan dy="25"> , </tspan>  
  57.          is  
  58.   <tspan dy="25" fill="green"> best</tspan>  
  59.   <tspan dy="-25"> , </tspan>  
  60.        Tutorials site    
  61.   </textPath>  
  62.   </text>  
  63.   </svg>  
  64.  </body>  
  65. </html> 
Step 10: Press Ctrl + F5 to run the application in a browser.
 
Output
4.gif
 
Resources
 
Here are some useful resources:


Similar Articles