My experiments on designing an image with Indic language text

I have always found languages alluring.

To me, they are mysterious and beautiful. I often find myself pondering over their origins to the point of wondering about what led to the first instinct in a man/woman to give voice to his/her thoughts. How did they structure the seemingly incoherent sounds to establish common meaning in them? How did they further give shape to these structured sounds (that we call phonetics) to form squiggles associated with each sound (that we call the alphabet)?

I am more fascinated by our ability to process not only one such complex set of structured sounds and squiggles but multiple sets of them. I mean, how do we process and understand multiple languages that are so vastly different from each other?

Most Indians I know are polyglots. I myself equally devour content in two languages: Hindi and English.

Hindi, being my mother tongue, has a special place in my heart. I enjoy reading and writing in Hindi: short stories, old poems from my school days. Such nostalgia. I also enjoy painting and designing whenever I feel like it.

Today, I was bitten by the “I want to design images” bug. I decided to design some visuals with Hindi content. Being a complete noob in digital image designing, I looked out for online graphic designing tools that came with predefined templates, free & paid images one can use, fonts that go well with them, color palettes and anything else that is necessary for basic image designing.

I finally found an free online tool, which seemed pretty handy for someone who is new to this activity.

And so it started. I selected a simple template on the tool, picked a beautiful Hindi quote I liked, and “copy-pasted” it. This is how it looked on browser:

Indic language text

Perfecto! Well, not quite. I am still a noob in digital image designing. But I quite liked what I had created. So, I wanted to set it as my wallpaper.

I downloaded the .png file and this is how it looked:

Indic language text

“Erm… what!?! Maybe, downloading in some other format would resolve the issue? PDF, maybe?”

It didn’t.

The text was completely linear! If you know Hindi or any other Indian language, you would be familiar with the term “maatra,” which can occupy any of the cardinal directions around a consonant. Grammar rule dictates that the consonant comes first followed by the maatra, as the latter is dependent on the former. So, even if it seems like, in the sequence of typing characters, that the maatra came first, it actually doesn’t. It always attaches itself to the consonant typed before it.

So what is wrong with the downloaded image? All the maatras are detached from the consonants they should have been attached to, and they are represented as independent characters. Text is cropped at the bottom even though the alignment looked perfect on the browser. This is wrong both from the language’s perspective & the UX perspective of an online tool.

I went back to the online tool, this time, to adjust the quote slightly upwards and hence to move it away from the perfect center point where I wanted it to be. The result:

Indic language text

It was near perfect. Just the way I wanted. But what if, in future, I wanted to design something which is certainly not this simple? What if the design components for my image have multiple texts, multiple font sizes and font families? All these thoughts made the online design a complicated and unpredictable option for me, particularly when it came to the inclusion of Indic-language text in images.

I decided to go with another popular and advanced image editing software. I “copy-pasted” the same Hindi quote against a grey backdrop. It looked okay till I noticed some inconsistencies. Most words were perfectly rendered while some were linear.

Indic language text

I checked the font I was using. The font used here is called “Kokila,” which is made for Hindi. So even if I make changes at the font level, rendering issues are still retained at the software level.

I was not happy with the result.

I opened a basic drawing/image tool from Microsoft that I fondly used to explore as a kid: Microsoft Paint. The default font was “Mangal,” but this simple tool, to my delight, printed the content properly. Not perfect but infinitely better.

Indic language text

While experimenting with these tools, I realized that the two of these tools had ignored the possibility of non-Latin based text entry or Indic language text and the complexities associated with it. Though a small alignment in the online tool kind of “fixed” the issue for a simple design, it is still unpredictable on text rendering, while the image is downloaded.

The second, more advanced image editing software I tried, which was more feature-rich and complex than the online tool and MS Paint, is also not error-free when it comes to Indic language text. I could have “fixed” the issue by putting the maatra first and then typing the consonant but that is not how typing in Indic languages works. Though there are virtual keyboards for Indian languages, one key mistake they do is to “allow” the entry of maatra before consonants, which is not grammatically correct.

Design tools suddenly look very “Latin-based.” Assuming that next time, I want some Tamil or Telugu content on my image and take content from somebody else, I would still be unsure on the accuracy even if I do a simple copy-paste operation. It would demand more rounds of correction and decrease productivity.

I think it is time that design tools took into consideration the presence and usage of non-linear languages like Hindi or any other Indian/non-Indian language.

The urge to design or create should not be hampered because of technical barriers for languages, which are the most basic form of communication itself.