Quick HTML Code for Common Accented Letters
The English language has few words with accented letters compared to some languages. Thus, suddenly needing to type an accented letter can interrupt a productive writing stride.
Some time ago, I found a way to make it less interruptive.
There is a tool on my personal portal page — type in a letter and it responds with both the accented versions of the letter and the HTML code to create them with.
The accented letter or the HTML code can be copied and pasted, allowing a quick resumption of writing stride.
That tool was updated for presentation and so it can be published on other web sites as an optional SAAS application.
It responds with accented letters and code when one of these letters are typed into it: A, a, C, c, E, e, I, i, N, n, O, o, U, u, Y, and y.
Here is the tool, live — type in one of the letters from the list above:
When you use the tool, copy the HTML code for your web page or the accented character for your article and you're good to go.
The Accented-Letter Tool for Yourself
To make the tool available for yourself, any of these 3 methods can be adopted so you can use the tool quickly and get back to your writing.
-
Bookmark this web page or link to it on your personal portal page.
— or —
-
Paste this line of JavaScript into your web page to publish the tool. When published, the tool will have a compliments‑of link.
— or —
-
Copy and paste the software source code into your web page. You'll find the code further below in this article.
Installing the Accented-Letter Tool Software
To install the tool and its JavaScript on your web page (the third of the three options above), you'll need two chunks of code.
The first chunk:
This is the HTML code, the part that publishes the visible tool.
It's copy and paste. Pop it into your web page where you want the tool to be published.
<div style="border:3px solid #ccc; border-radius:6px; padding:6px 0; display:table;"> <div style="text-align:center; padding:0 6px;"><input type="text" style="text-align:center; width:2em; border:1px solid #999;" placeholder="A" onkeyup="GetAccentedLetters(this)"></div> <div id="accent-results-container"></div> </div>
The style may be changed, of course.
The second chunk:
This is the JavaScript, the part that gives the tool it's instant response when a letter is typed into it.
This also is copy and paste. Pop it into the same web page that contains the tool HTML code. It can be pasted into anyplace on the web page where JavaScript can run. Immediately above the closing </body> tag generally is a good place.
<script type="text/javascript">
function GetAccentedLetters(d)
{
/*
Present Accented Letters
Version 2.0 at October 26, 2019 for operational improvements.
Version 1.0 was January 24, 2010
Will Bontrager Software LLC
*/
var divstyle = '<div style="text-align:right; margin-top:6px; padding:9px 6px 0 6px; border-top:1px solid #ccc;">';
var divend = '</div>';
var instructions = "Type one of these: A a C c E e I i N n O o U u Y y";
var template = '<span style="margin-left:6px; margin-right:6px;">[[INFO]]</span>';
var letter = d.value;
d.placeholder = "";
d.value = "";
var codes = "";
if( letter.match(/^\w$/) )
{
switch(letter)
{
case "A" : codes = divstyle + "&Agrave; = <span style='font-size:120%;'>À</span>" + divend +
divstyle + "&Aacute; = <span style='font-size:120%;'>Á</span>" + divend +
divstyle + "&Acirc; = <span style='font-size:120%;'>Â</span>" + divend +
divstyle + "&Auml; = <span style='font-size:120%;'>Ä</span>" + divend +
divstyle + "&Atilde; = <span style='font-size:120%;'>Ã</span>" + divend +
divstyle + "&Aring; = <span style='font-size:120%;'>Å</span>" + divend;
break;
case "a" : codes = divstyle + "&agrave; = <span style='font-size:120%;'>à</span>" + divend +
divstyle + "&aacute; = <span style='font-size:120%;'>á</span>" + divend +
divstyle + "&acirc; = <span style='font-size:120%;'>â</span>" + divend +
divstyle + "&auml; = <span style='font-size:120%;'>ä</span>" + divend +
divstyle + "&atilde; = <span style='font-size:120%;'>ã</span>" + divend +
divstyle + "&aring; = <span style='font-size:120%;'>å</span>" + divend;
break;
case "C" : codes = divstyle + "&Ccedil; = <span style='font-size:120%;'>Ç</span>" + divend;
break;
case "c" : codes = divstyle + "&ccedil; = <span style='font-size:120%;'>ç</span>" + divend;
break;
case "E" : codes = divstyle + "&Egrave; = <span style='font-size:120%;'>È</span>" + divend +
divstyle + "&Eacute; = <span style='font-size:120%;'>É</span>" + divend +
divstyle + "&Ecirc; = <span style='font-size:120%;'>Ê</span>" + divend +
divstyle + "&Euml; = <span style='font-size:120%;'>Ë</span>" + divend;
break;
case "e" : codes = divstyle + "&egrave; = <span style='font-size:120%;'>è</span>" + divend +
divstyle + "&eacute; = <span style='font-size:120%;'>é</span>" + divend +
divstyle + "&ecirc; = <span style='font-size:120%;'>ê</span>" + divend +
divstyle + "&euml; = <span style='font-size:120%;'>ë</span>" + divend;
break;
case "I" : codes = divstyle + "&Igrave; = <span style='font-size:120%;'>Ì</span>" + divend +
divstyle + "&Iacute; = <span style='font-size:120%;'>Í</span>" + divend +
divstyle + "&Icirc; = <span style='font-size:120%;'>Î</span>" + divend +
divstyle + "&Iuml; = <span style='font-size:120%;'>Ï</span>" + divend;
break;
case "i" : codes = divstyle + "&igrave; = <span style='font-size:120%;'>ì</span>" + divend +
divstyle + "&iacute; = <span style='font-size:120%;'>í</span>" + divend +
divstyle + "&icirc; = <span style='font-size:120%;'>î</span>" + divend +
divstyle + "&iuml; = <span style='font-size:120%;'>ï</span>" + divend;
break;
case "N" : codes = divstyle + "&Ntilde; = <span style='font-size:120%;'>Ñ</span>" + divend;
break;
case "n" : codes = divstyle + "&ntilde; = <span style='font-size:120%;'>ñ</span>" + divend;
break;
case "O" : codes = divstyle + "&Ograve; = <span style='font-size:120%;'>Ò</span>" + divend +
divstyle + "&Oacute; = <span style='font-size:120%;'>Ó</span>" + divend +
divstyle + "&Ocirc; = <span style='font-size:120%;'>Ô</span>" + divend +
divstyle + "&Ouml; = <span style='font-size:120%;'>Ö</span>" + divend +
divstyle + "&Otilde; = <span style='font-size:120%;'>Õ</span>" + divend +
divstyle + "&Oslash; = <span style='font-size:120%;'>Ø</span>" + divend;
break;
case "o" : codes = divstyle + "&ograve; = <span style='font-size:120%;'>ò</span>" + divend +
divstyle + "&oacute; = <span style='font-size:120%;'>ó</span>" + divend +
divstyle + "&ocirc; = <span style='font-size:120%;'>ô</span>" + divend +
divstyle + "&ouml; = <span style='font-size:120%;'>ö</span>" + divend +
divstyle + "&otilde; = <span style='font-size:120%;'>õ</span>" + divend +
divstyle + "&oslash; = <span style='font-size:120%;'>ø</span>" + divend;
break;
case "U" : codes = divstyle + "&Ugrave; = <span style='font-size:120%;'>Ù</span>" + divend +
divstyle + "&Uacute; = <span style='font-size:120%;'>Ú</span>" + divend +
divstyle + "&Ucirc; = <span style='font-size:120%;'>Û</span>" + divend +
divstyle + "&Uuml; = <span style='font-size:120%;'>Ü</span>" + divend;
break;
case "u" : codes = divstyle + "&ugrave; = <span style='font-size:120%;'>ù</span>" + divend +
divstyle + "&uacute; = <span style='font-size:120%;'>ú</span>" + divend +
divstyle + "&ucirc; = <span style='font-size:120%;'>û</span>" + divend +
divstyle + "&uuml; = <span style='font-size:120%;'>ü</span>" + divend;
break;
case "Y" : codes = divstyle + "&Yacute; = <span style='font-size:120%;'>Ý</span>" + divend +
divstyle + "&Yuml; = <span style='font-size:120%;'>Ÿ</span>" + divend;
break;
case "y" : codes = divstyle + "&yacute; = <span style='font-size:120%;'>ý</span>" + divend +
divstyle + "&yuml; = <span style='font-size:120%;'>ÿ</span>" + divend;
break;
default : codes = divstyle + instructions + divend;
}
}
if( codes.length ) { document.getElementById("accent-results-container").innerHTML = codes; }
}
</script>
When those two chunks are pasted into your web page source code, you should be good to go.
The accented-letter tool is designed to be easy and quick. The implementation, too — with three options.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
