Type Greek

Convert text to Greek characters as you type. Type Greek now.


This tutorial walks step-by-step through adding the Greek typing functionality of Type Greek to an existing web page. (Please contact me if you have questions or other feedback. If you find these instructions too technical for you to follow, try downloading an example page with TypeGreek already installed.)In order to add Greek typing functionality to an existing page, that page must have an HTML <FORM> containing an HTML <TEXTAREA>. Both of these elements must have a value for the NAME attribute. (Alternatively, you can download the sample page that these instructions use an example.)

1. Add Call to typegreek.js

Within the <HEAD> element, add the following code to call the typegreek.js file:

<script type="text/javascript" src="http://www.typegreek.com/typegreek.js"></script>

(If you would prefer to host a copy of the Javascript file yourself, you can download the current version from the Software and Downloads section.)

2. Add Javascript Events to <TEXTAREA>

You will need to add two Javascripts events as attributes to the code for the <TEXTAREA>, one for onKeyPress and one for onKeyUp. Assuming your code looks something like this …

<textarea rows=10 cols=55 name="textArea" tabindex="3">

… modify the code so that it looks like this …

<textarea rows=10 cols=55 name="textArea" onKeyPress="return convertCharToggle(this, true, event);" onKeyUp="return convertStr( this, event );" tabindex="3">

3. Add CSS Styling

I recommend using CSS styling to set the font used by the <TEXTAREA>. To achieve this, you’ll need to complete the following two tasks.

First, add a CLASS value to the <TEXTAREA> by modifying the code in the previous step (I’m using greektext as the name of the class, but it can be whatever you want):

<textarea ... tabindex="3" class="greektext">

Second, add the following <STYLE> element to the <HEAD> of the document (make sure to use the class name from the previous step):

<style type="text/css">

.greektext {

font-family: "TITUS Cyberbit Basic", "Gentium", "New Athena Unicode", "Palatino Linotype", "Arial Unicode MS", "Georgia Greek";




4. Add Ability to Turn Off Conversion (Optional)

At this point, the existing page will work correctly and convert every key-press into a Greek character. If you would like, you can add the checkbox that allows the user to turn the Greek conversion on and off. To achieve this, you will need to complete the following three steps.

First, you’ll want to create a function that will set the focus on the <TEXTAREA>. That way, after the user checks or unchecks the checkbox, the focus will go back to where they can type. Add the following code to the <HEAD> element …

<script type="text/javascript">

function setFocus() { document.greek.textArea.focus(); }


… where greek is the name of the <FORM> and textArea is the name of <TEXTAREA>.

Second, add the checkbox (with a call to this function):

<input type="checkbox" name="convertGreek" onclick="setFocus();"> Convert Greek

Third, replace a parameter in the code for the <TEXTAREA>. In step 2 we passed in a value of true to one of the Javascript function, which means that the key-presses should be converted. If we modify that true to the name of the checkbox, it will pass in true when it is checked but false when it is not checked. Change this line …

<textarea ... onKeyPress="return convertCharToggle(this, true, event);" ... >

… to this …

<textarea ... onKeyPress="return convertCharToggle(this, document.greek.convertGreek.checked , event);" ... >

… where greek is the name of the form and convertGreek is the name of the checkbox.


Once you have completed these steps, your existing web page should now convert key-presses to Greek characters!