I recently came across the Hinglish Project, a lovely effort to bridge Hindi and English by blending a the 2 languages in a special font that allows the each letters to merge one over the other. They also developed some great merchandise, including fun card games, t-shirts, mugs and other fun books.
Unfortunately the sight is developped in Flash, which in today’s social-media and search-engine dominated Internet is a strict no-no due to the fact that web-spiders (those little robots that scour the net in search for new sites) are unable to reach Flash, thus making it impossible for the content of the site to be searched by Google and other search engines.
So how do we this effect in pure HTML?
Download the following archive and unzip it in your folder.
First you want to ensure that you have the following lines of codes in your header,
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="./hinglish/draw.js"></script> <link rel="stylesheet" type="text/css" href="./hinglish/stylesheet.css"></link>
If you are using WordPress, the
Finally you need to get the code for the actually canvas, you can use the code generator below to optimise your colour scheme, blend mode, font size, transparency and canvas size. The code is automatically generated for you and you just need to cut and paste it into your
<body> element of your page.
You can change the font size, colour, transparency of layers, and…
FINALLY, adjust the canvas width and height (the red lines) to ensure optimal size
Once you have finalised your text design, copy the code below and paster it in the HTML file
index.html provided with this tutorial.
To view test your canvas code, paste in the body of the
index.html file provided in the downloaded archive above. You can then open the file in your browser and view the results.