the hinglish project

The Hinglish Project

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.

However, one  of the reasons why they have used Flash is primarily doe to the fact that merging and blending of fonts is something that is not currently possible in HTML5 + CSS3, but it is coming…. and this is precisely what I wanted to do for a new project.  So I decided to spend a little time to research how the blending effect of the Hinglish project font could be achieved using javascript and HTML drawing canvas.  Here are the result, I have made a small tutorial below as to how to use the Hinglish font in your HTML pages to create logos for example,

hinglish

So how do we this effect in pure HTML?

The Code

Download the following archive and unzip it in your folder.

hinglish-html.zip

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 jquery is already included.  The 2nd line is a javascript file  and the 3rd line is a css stylesheet, both of which come in the archive that you downloaded above.

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.


HTML5 Canvas not supported

Experiment with different blend modes available for HTML Canvas.
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.

Want to share your thoughts?

Leave a Reply

Your email address will not be published. Required fields are marked *