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 a HTML 5 application. I hope this article helps to create various text path applications using HTML 5 and CSS tools.
Step 1 : First open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "Path".
![wakakakakak.gif]()
Step 2 : Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "Text".
![folder.gif]()
Step 3 : Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name it "Video.aspx".
![new.gif]()
![webapplication.gif]()
Step 4 : Add a 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 text page. In the <style> tag we define some properties; they are font-family, font- size, world-spacing and letter-spacing.
Code
<style>
.example_desc
{
font-family:Comic Sans MS;
font-size:30px;
}
.wide_spacing
{
font-family: Arial;
font-size: 36px;
letter-spacing: 2px;
word-spacing: 8px;
}
</style>
Step 6 : Now in this step we define both a horizontal and vertical text path at the same time.
Code
<desc>Tom application</desc>
<text class="example_desc" x="50" y="20">Tom Developed text on path</text>
<defs>
<path id="text-path" d="M 50 70 l 170 0 l 0 130 l 200 0">
</defs>
<use xlink:href="#text-path" fill="red" stroke="sky" />
<text class="wide_spacing">
<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
<desc>Tom draw a various color on text</desc>
<text class="example_desc" x="500" y="20">Tom draw a various color on text</text>
<g font-size="25" fill="Red" stroke="gray" stroke-width="1" >
<text x="500" y="80" text-decoration="line-through" >Csharpcorner</text>
<text x="500" y="140" text-decoration="underline" >Mindcracker</text>
<text x="500" y="200" text-decoration="underline" >
<tspan>Csharpcorner </tspan>
<tspan fill="Red" stroke="purple" >is </tspan>
<tspan fill="Red" stroke="black" >best </tspan>
<tspan fill="Red" stroke="darkgreen" text-decoration="underline" >Tutorials </tspan>
<tspan fill="Red" stroke="blue" >site</tspan>
</text>
</g>
![2.gif]()
Step 8 : Now in this step we define a another text path that shows just like a digital format.
Code
<desc>Tom developed dynamically variation on text</desc>
<text class="example_desc" x="50" y="300">Tom developed dynamically variation on text</text>
<defs>
<path id="MyPath" d="M 100 420
C 110 400 210 300 310 400
C 400 500 420 520 460 500
C 620 400 670 400 690 400" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="25" fill="blue" >
<textPath xlink:href="#MyPath">
Csharp
<tspan dy="-25" fill="red" >corner,mindcracker </tspan>
<tspan dy="25"> , </tspan>
is
<tspan dy="25" fill="green"> best</tspan>
<tspan dy="-25"> , </tspan>
Tutorials site
</textPath>
</text>
![3.gif]()
Step 9 : The complete code of both text path application is given below.
Code
<html>
<head>
<style>
.example_desc
{
font-family:Comic Sans MS;
font-size:30px;
}
.wide_spacing
{
font-family: Arial;
font-size: 36px;
letter-spacing: 2px;
word-spacing: 8px;
}
</style>
</head>
<body bgcolor="#ffffcc">
<svg width="1100" height="700">
<desc>Tom application</desc>
<text class="example_desc" x="50" y="20">Tom Developed text on path</text>
<defs>
<path id="text-path" d="M 50 70 l 170 0 l 0 130 l 200 0">
</defs>
<use xlink:href="#text-path" fill="red" stroke="sky" />
<text class="wide_spacing">
<textPath xlink:href="#text-path">www.csharpcorner . com</textPath>
<desc>Tom draw a various color on text</desc>
<text class="example_desc" x="500" y="20">Tom draw a various color on text</text>
<g font-size="25" fill="Red" stroke="gray" stroke-width="1" >
<text x="500" y="80" text-decoration="line-through" >Csharpcorner</text>
<text x="500" y="140" text-decoration="underline" >Mindcracker</text>
<text x="500" y="200" text-decoration="underline" >
<tspan>Csharpcorner </tspan>
<tspan fill="Red" stroke="purple" >is </tspan>
<tspan fill="Red" stroke="black" >best </tspan>
<tspan fill="Red" stroke="darkgreen" text-decoration="underline" >Tutorials </tspan>
<tspan fill="Red" stroke="blue" >site</tspan>
</text>
</g>
<desc>Tom developed dynamically variation on text</desc>
<text class="example_desc" x="50" y="300">Tom developed dynamically variation on text</text>
<defs>
<path id="MyPath" d="M 100 420
C 110 400 210 300 310 400
C 400 500 420 520 460 500
C 620 400 670 400 690 400" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="Verdana" font-size="25" fill="blue" >
<textPath xlink:href="#MyPath">
Csharp
<tspan dy="-25" fill="red" >corner,mindcracker </tspan>
<tspan dy="25"> , </tspan>
is
<tspan dy="25" fill="green"> best</tspan>
<tspan dy="-25"> , </tspan>
Tutorials site
</textPath>
</text>
</svg>
</body>
</html>
Step 10 : Press Ctrl + F5 to run the application in a browser.
Output
![4.gif]()
Resources
Here is some useful resources: