How to Create HTML Web Pages in Gujarati

ગુજરાતીમાં આ વેબ પેજ વાંચવા માટે અહિયાં ક્લિક કરો.

This guide will show you how to can make Gujarati Web pages. Creating Gujarati Web pages is very simple if you know how to type Gujarati with Unicode fonts.

What You Need

  • Text editor: Just like any HTML page, all you need is a text editor. The built-in Windows Notepad will work. However, I like to use Notepad2 or Notepad++.
  • Gujarati language support: You need to have Gujarati language support installed in Windows or Linux. This allows you to type Gujarati anywhere in the OS. For HTML Web pages, we will be typing Gujarati in your preferred text editor.

Step 1: Save As UTF-8 Format

First, open a new text document and change the encoding to UTF-8. The images below show how the encoding is changed to UTF-8 in Windows Notepad, Notepad2, and Notepad++. In Notepad2, you can change the encoding from the File menu. In Windows Notepad, you need to select UTF-8 when saving the document. Although its functions are rudimentary, Windows Notepad will warn you if you try to save a page with Unicode characters in ANSI format.

Windows Notepad      Notepad2
Notepad++

In Notepad++, you need to choose UTF-8 without BOM.

Step 2: Set Up Web Page Header for UTF-8

You need to tell your visitors' browser the page they are viewing is UTF-8 encoded. This is done by modifying the header. You need to include the following line in your <head> section:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
....
</head>

This specifies that the Web page has Unicode characters.

Step 3: Create Your Page

That's all there is to it. Now start typing Gujarati in your Web page code. The following snippet shows Gujarati in an HTML page along with an image of how it looks in Notepad2. Note that you will see both English and native Gujarati ONLY if you use Unicode fonts in your document as seen in the Notepad2 screenshot below. If you type with non-Unicode fonts, you will not see native Gujarati.

....
<section id="content">
<h1>શ્રુતિ ફોન્ટ શું છે અને તે કેવી રીતે વાપરવો ?</h1>
<p><a href="Shruti-Font.php">Click here to read this page in English.</a></p>
<p>જો આપે માઈક્રોસોફ્ટ વર્ડમાં શ્રુતિ (Shruti) ફોન્ટ પસંદ કર્યો હશે અને ટાઈપ કર્યું હશે ત્યારે ગુજરાતીને બદલે અંગ્રેજી ટાઈપ થયું હશે અથવા ફોન્ટ બદલાઈ ગયો હશે; તો આપને પ્રશ્ન થયો હશે કે ગુજરાતી કેમ ટાઈપ નથી થતું ? શ્રુતિ ફોન્ટ ગુજરાતી માટે છે તો પણ ગુજરાતીને બદલે અંગ્રેજી કેમ લખાય છે ? કારણ કે શ્રુતિ ફોન્ટ યુનિકોડ ફોન્ટ છે જેનામાં અંગ્રેજી અને ગુજરાતી બેઉં ભાશાના અક્ષરો છે. એટલે વીન્ડોઝ કે લીનક્ષમાં ગુજરાતી લખવું હોય તો લેન્ગવેજ બારમાં ભાશા બદલવી પડે તો જ ગુજરાતી લખાય. આ વેબ પેજમાં યુનિકોડ ફોન્ટ શું છે અને તે વતી ટાઈપ કરવા શું જોઈએ તે સમજાવવામાં આવ્યું છે.</p>
....
Gujarati in Notepad2

Create Gujarati Web Pages with ANSI Encoding

The steps above are the simplest way to create Web pages in Gujarati and involve UTF-8 encoding. You can also create Web pages in Gujarati with ANSI encoding; but this requires typing the Gujarati characters' Unicode codes. The drawback of this is you won't be able to read the Gujarati text when editing the document in a text editor, but your will see Gujarati when viewing it as a Web page.

There's only one small advantage to using ANSI encoding - Gujarati language support isn't required because we're typing the Gujarati Unicode codes in English. But this is a minor advantage compared to benefits of a UTF-8 encoded Web page.

Below is the partial HTML code that contains Gujarati text in its Unicode coding, image of how it looks in Notepad2, and an image of how it looks in a web browser.

<table>
<caption>Table 1: Common Conjuncts and their Components</caption>
<tbody>
<tr><td>Components</td><td>Conjunct</td><td>English</td><td>Components</td><td>Conjunct</td><td>English</td></tr>
<tr><td>&#2724; + &#2736;</td><td>&#2724;&#2765;&#2736;</td><td>tra</td><td>&#2726; + &#2736;</td><td>&#2726;&#2765;&#2736;</td><td>dra</td></tr>
</tbody>
</table>
Gujarati in Notepad2 Gujarati in Browser

You can see in the Notepad2 screenshot that you won't be able to read the actual Gujarati text. It is much harder to edit your document with this method.