Add a Tamil Typing Widget to Your Website
உங்கள் இணையதளத்தில் தமிழ் தட்டச்சு
Let your visitors type Tamil in English letters, right in your comment box, contact form or search field. One script tag, no account, no cost.
Short answer
Add <script src="https://typetamilonline.com/embed/v1.js" defer></script> to your page, then put data-tamil-typing on any <textarea> or text <input>. Visitors type vanakkam, press space and get வணக்கம், with other spellings one tap away.
Live Demo: A Plain Form With the Script Added
Type a word in English letters and press space.nanriநன்றி
Add It in Two Steps
Paste the script tag once per page, just before
</body>. In most site builders this is a “footer code” or “custom HTML” setting.Add
data-tamil-typingto each text box that should accept Tamil. Text inputs and textareas work; email, password and number fields are skipped on purpose.
That is all. Fields added later, for example by a form plugin or a single-page app, are picked up automatically.
Copy-Paste Snippets
<!-- once per page, before </body> -->
<script src="https://typetamilonline.com/embed/v1.js" defer></script>
<!-- on any text box -->
<textarea name="message" data-tamil-typing></textarea>
<input type="text" name="title" data-tamil-typing>// In your child theme's functions.php, or as a PHP snippet
// in a code snippets plugin. #comment is the comment box.
add_action( 'wp_footer', function () {
echo '<script src="https://typetamilonline.com/embed/v1.js"'
. ' data-selector="#comment" defer></script>';
} );// 1. Load the script once, in index.html or your root layout:
// <script src="https://typetamilonline.com/embed/v1.js" defer></script>
// 2. Mark any field. Controlled fields work: onChange fires as usual.
export function CommentBox() {
const [text, setText] = useState('');
return (
<textarea
data-tamil-typing=""
value={text}
onChange={(e) => setText(e.target.value)}
/>
);
}On WordPress you usually can’t edit the comment box markup, so the snippet uses data-selector to point at it instead: #comment is the comment field WordPress itself prints. Use a comma-separated list to add more fields, such as #comment, .wpcf7-textarea. The widget is written in plain JavaScript, so it also works with Vue, Svelte, Angular and plain HTML forms.
Options
Everything is set with data- attributes, so there is no code to write.
| Attribute | Where | What it does |
|---|---|---|
data-tamil-typing | Field | Turns Tamil typing on for this field. ="off" turns it off. |
data-selector | Script tag | A CSS selector for fields you can’t edit, such as #comment. |
data-tamil-typing-credit | Any element | Shows one credit line there, instead of one under each field. The demo above uses it. |
data-lexicon | Script tag | ="off" skips the 652 KB word list (suggestions get a little worse). A URL loads your own copy. |
data-theme | Script tag | light or dark for the suggestion box. By default it matches the field’s background. |
For pages that build their own fields in JavaScript, TamilTyping.attach(element) and TamilTyping.detach(element) switch a field on and off directly.
What Your Visitors Can Do
| Key | Action |
|---|---|
| Space or punctuation | Converts the word just typed |
| ↑ ↓, then Enter | Picks another spelling (or tap it) |
| 1 to 6 | Picks a spelling by its number |
| Esc | Keeps the word in English letters |
| Backspace right after a word converts | Brings back the English letters |
| Ctrl + G | Switches the field between Tamil and English |
The suggestion list works with screen readers: the field announces the highlighted spelling, and the list is a standard listbox. Pasted text is never changed, and email addresses and web links typed into a field stay in English letters. Ctrl+Z undoes a conversion like any other edit.
Privacy
Everything happens in the visitor’s browser. What they type is never sent to us or to anyone else, and the widget sets no cookies and loads no analytics.
The one network request is the word list, downloaded from typetamilonline.com the first time a visitor clicks into a Tamil field. Like any file fetched from another site, that request shows our hosting provider the visitor’s IP address and your site’s address, as described in our privacy policy. It never includes their text. To avoid it entirely, host both files yourself or set data-lexicon="off".
Spellings a visitor picks are remembered in their own browser’s storage for your site (under the key tamil-typing:history), so their usual words come first next time. Clearing site data removes them.
The Credit Link
By default a small line, “Tamil typing by TypeTamilOnline”, appears under each Tamil field. It is a normal link to our home page, and it inherits your text colour so it fits your design.
The credit is the one condition of free use, and it can’t be switched off. You can restyle it to match your site, or show one credit for the whole page by adding data-tamil-typing-credit to any element. If the credit is removed, hidden, made unreadable or moved off screen, the widget puts it back; if it still can’t be seen, Tamil typing pauses with a short notice until it is visible again. To use the widget without a credit, contact us.
Size and Speed
The script is about 19 KB compressed, with the core Tamil word list built in. It loads with
deferand never blocks your page.The full word list (652 KB, 200,000 Tamil words) improves suggestions. It is fetched only after a visitor focuses a Tamil field, decoded off the main thread, cached for a year, and skipped when the visitor has Data Saver on. Until it arrives, typing works with the built-in list.
No fonts are downloaded: suggestions use the Tamil font already on the visitor’s device.
Styles are scoped to the widget’s own elements, so they can’t change the look of your page, and your page’s styles can’t break the suggestion box.
Licence
The script’s code is under the TypeTamilOnline Attribution Licence: use it on any site, commercial or not, and host or modify your own copy, as long as the credit link stays visible. It also contains data adapted from the Dakshina dataset by Google Research, as does the word list. That data is licensed under CC BY-SA 4.0: using the widget on your site is fine, and if you redistribute the data files, keep the attribution in the file header and share any changed data under the same licence. Details are in the comment at the top of v1.js.
The URL ends in v1 on purpose: fixes and better word lists arrive automatically, and anything that would change how your fields behave would ship as a new version instead.