How to Type Spanish Accents on an English Keyboard
8 February 2007
This page is a demo for a Javascript script which enables easy typing of
Spanish accented characters on an English keyboard. If works by defining the F2
key to mean "toggle the character before the cursor from normal ASCII
character to special Spanish character".
The script has been tested on the Windows versions of Firefox 1.5, Opera
and Internet Explorer 7. It can be installed as a GreaseMonkey script on Firefox.
The ASCII characters that it acts on are: A a E e I i N n O o U u ? ! $ ' "
The sequences of characters that toggle are: AÁ
aáª
EÉ
eé
IÍ
ií
NÑ
nñ
OÓ
oóº
UÚÜ
uúü
?¿
!¡
$€
"«»
'‹›
.
(Note that a, o, u, U, ' and "
have more than one alternative character, so you have to press F2 three times to
get back to where you started. See also this page,
which is used to generate character codes used in the script.)
Try it out now ...
For example, to type 1º frase: ¡Hola! ¿Como estás?, type the following keystrokes
into the text area below:
1 o [F2] [F2] [space] f r a s e : [space] ! [F2] H o l a ! [space] ? [F2] C o m o [space] e s t a [F2] s ?
Or here:
Rich Text Editing
The script also works in rich text fields.
To test it on this page, press F7 to
enable the text cursor (in Firefox), click anywhere to place the text cursor and then
press F2 to toggle the character just before the cursor.
Installation
To be able to use this functionality on any website, you need to do the following:
as a GreaseMonkey "user" script (GreaseMonkey prompts you to install as soon as you click on the link
to the script because it recognises the ".user.js" extension).
You can test the installation into GreaseMonkey by visiting
test-for-greasemonkey.html
which has a text area and text input similar to this page, but without the toggling function installed
(and don't forget to refresh any pages after the install to pick up the new functionality).
If You Cannot Install It ...
You can use this scratchpad page which has a large
textarea with F2 defined the same as on this page.
Bugs and Limitations
In rich text fields, the toggle function does not work if the cursor is at the beginning
of a node. Typically this will occur at the boundary between two different types of text,
e.g. normal and bold, and even then it only happens if you use arrow keys or the mouse to
move the cursor backward. The browser does not give any direct visual indication between
the end of a node and the beginning of the next node (i.e. they are in identical physical locations
on the screen). To navigate from the beginning of a node to the end of the previous
node, so that you can toggle the last character of the previous node, move back one position
and then forward one position.
In Web pages that dynamically construct new input fields, the script may fail to keep track
of whether or not it is in an HTML textarea, and HTML input or in a rich text field. This may
cause the functionality to fail when the focus is on an input field that was constructed dynamically.
(In theory there are DOM event handlers that could be used to track these changes, but they
don't seem to work to track the changes that GMail can make to the current web page. See below for
a workaround.)
In Internet Explorer (version 7), sometimes if you click on the end of a field, and then
execute F2, the cursor moves to behind the last character, after toggling it. I'm not too sure
of the cause or the cure for this problem. (It doesn't happen while you are
typing within one field.)
In Opera the demo doesn't work because F2 brings up the "Go to Page" dialog. (And there
seems to be no way to disable this within the page Javascript.) This browser definition of F2
can be disabled by going to Tools:Preferences...:Advanced:Shortcuts, editing the "Keyboard Setup",
finding "F2" in the "Application" section, and either deleting it, or changing it to "F2 alt".
If the script installed in GreaseMonkey sees what looks like a page explicitly loading
the same script, i.e. a "script" element with "src" value ending
in "/toggle-spanish-accents.user.js", then it does not activate the functionality a second time
(to avoid a double response to F2). This could lead to spurious de-activation (i.e.
someone loads a script on a page called "something/toggle-spanish-accents.user.js" which
is not actually the same script). To disable the disabling, edit the script file to set the value of
disableIfLoadedExplicitly to false.
Reset Function
As an experiment, I have assigned Alt-F2 to a function which resets the list of text
input fields (and shows a dialog box confirming the reset). This is a workaround to item 2
in the list. So, for example, if you are in GMail and you switch from "Rich Formatting" to
"Plain Text", the accent toggling will fail because the focus tracking has not been set on
the new textarea control for the plain text input. If you press Alt-F2 this will pick
up the new textarea, and it will work again.
Design Considerations
There seem to exist various means for typing Spanish accented characters on an English keyboard. The
advantages of the system provided here are:
Easy to remember: all you have to remember is that F2 toggles the character before
the cursor.
You can type without accents and then go back and add accents afterwards, without
retyping the letters.
You don't have to hold keys down (except where the original character requires this).
If you change your mind about an accented character, you can easily toggle it back to
its original state.
