A Word-for-Word Inline Translation Utility in JavaScript

Posted on 2017/02/27 by thiscouldbebetter

The JavaScript program below, when run, prompts the user for a passage to be translated into a foreign language and a dictionary that provides translations, then presents the translated text interleaved with the original text.

The translation is word-for-word, which obviously is not sufficient to translate meaning in most languages. But it does provide a good basis for further practice in learning to read a foreign language.

inlinetranslation


<html>
<body>

<!-- ui -->

	<div>
		<label>Passage to Translate:</label>
		<input type="file" onchange="inputFilePassageToTranslate_Changed(this);"></input>
		<br />
		<textarea id="textareaPassageToTranslate" cols="40" rows="5">This is a test!</textarea>
	</div>

	<div>
		<label>Dictionary to Translate with:</label>
		<input type="file" onchange="inputFileDictionaryToTranslateWith_Changed(this);"></input>
		<br />
		<textarea id="textareaDictionaryToTranslateWith" cols="40" rows="5">
this=esto
is=es
a=un
test=prueba
		</textarea>
	</div>

	<div>
		<button onclick="buttonTranslate_Clicked();">Translate</button>
	</div>

	<div>	
		<label>Interleaved Translation:</label>
		<br />
		<textarea id="textareaTranslationInterleaved" cols="40" rows="10"></textarea>
	</div>

<!-- ui ends -->

<script type="text/javascript">

// ui events

function inputFilePassageToTranslate_Changed(inputFilePassageToTranslate)
{
	var fileToLoad = inputFilePassageToTranslate.files[0];
	var fileReader = new FileReader();
	fileReader.onload = inputFilePassageToTranslate_Changed_FileLoaded;
	fileReader.readAsText(fileToLoad);
}

function inputFilePassageToTranslate_Changed_FileLoaded(event)
{
	var passageToTranslate = event.target.result;
	var textareaPassageToTranslate = document.getElementById
	(
		"textareaPassageToTranslate"
	);
	textareaPassageToTranslate.value = passageToTranslate;
}

function inputFileDictionaryToTranslateWith_Changed(inputFileDictionaryToTranslateWith)
{
	var fileToLoad = inputFileDictionaryToTranslateWith.files[0];
	var fileReader = new FileReader();
	fileReader.onload = inputFileDictionaryToTranslateWith_Changed_FileLoaded;
	fileReader.readAsText(fileToLoad);		
}

function inputFileDictionaryToTranslateWith_Changed_FileLoaded(event)
{
	var dictionaryAsText = event.target.result;
	var textareaDictionaryToTranslateWith = document.getElementById
	(
		"textareaDictionaryToTranslateWith"
	);
	textareaDictionaryToTranslateWith.value = dictionaryAsText;
}

function buttonTranslate_Clicked()
{
	var textareaPassageToTranslate = document.getElementById
	(
		"textareaPassageToTranslate"
	);
	var passageToTranslate = textareaPassageToTranslate.value;

	var textareaDictionaryToTranslateWith = document.getElementById
	(
		"textareaDictionaryToTranslateWith"
	);
	var dictionaryAsText = textareaDictionaryToTranslateWith.value;

	var dictionaryAsLookup = Translator.dictionaryParse(dictionaryAsText);

	var translator = new Translator(dictionaryAsLookup);

	var textareaTranslationInterleaved = document.getElementById
	(
		"textareaTranslationInterleaved"
	);

	var charsPerLine = textareaTranslationInterleaved.cols;

	var textTranslatedAndInterleaved = translator.translateAndInterleave
	(
		passageToTranslate,
		charsPerLine
	);

	textareaTranslationInterleaved.value = textTranslatedAndInterleaved;
}

// extensions

function StringExtensions()
{
	// extension class
}
{
	String.prototype.padRight = function(charToPadWith, lengthToPadTo)
	{
		var returnValue = this;

		while (returnValue.length < lengthToPadTo)
		{
			returnValue += charToPadWith;
		}	

		return returnValue;
	}
}

// classes

function Translator(dictionary)
{
	this.dictionary = dictionary;
}
{
	Translator.dictionaryParse = function(dictionaryAsText)
	{
		var returnValue = {};

		var entriesAsStrings = dictionaryAsText.split("\n");
		for (var i = 0; i < entriesAsStrings.length; i++)
		{
			var entryAsString = entriesAsStrings[i];
			var entryAsKeyAndValue = entryAsString.split("=");
			var key = entryAsKeyAndValue[0];
			var value = entryAsKeyAndValue[1];
			returnValue[key] = value;
		}

		return returnValue;
	}

	// instance methods

	Translator.prototype.translateAndInterleave = function(passageToTranslate, charsPerLine)
	{
		var passageInterleaved = "";

		var wordsToTranslate = passageToTranslate.split(" ");

		var charsInCurrentLine = 0;
		var lineToTranslateCurrent = "";
		var lineTranslatedCurrent = "";
	
		for (var i = 0; i < wordsToTranslate.length; i++)
		{
			var wordToTranslate = wordsToTranslate[i];
			var wordToTranslateAsKey = 
				wordToTranslate.toLowerCase().split("!").join("");

			var wordTranslated = this.dictionary[wordToTranslateAsKey];
			if (wordTranslated == null)
			{
				wordTranslated = "[" + wordToTranslate + "]";
			}

			var wordToTranslateLength = wordToTranslate.length;
			var wordTranslatedLength = wordTranslated.length;

			var wordLengthGreater = Math.max
			(
				wordToTranslateLength,
				wordTranslatedLength
			);
		
			var wordToTranslatePadded = wordToTranslate.padRight
			(
				" ", wordLengthGreater
			);

			var wordTranslatedPadded = wordTranslated.padRight
			(
				" ", wordLengthGreater
			);

			charsInCurrentLine += (1 + wordLengthGreater);
			if (charsInCurrentLine >= charsPerLine)
			{
				passageInterleaved += 
					lineToTranslateCurrent + "\n"
					+ lineTranslatedCurrent + "\n"
					+ "\n";

				lineToTranslateCurrent = wordToTranslatePadded;
				lineTranslatedCurrent = wordTranslatedPadded;
				charsInCurrentLine = wordLengthGreater;	
			}
			else
			{
				lineToTranslateCurrent += wordToTranslatePadded + " ";
				lineTranslatedCurrent += wordTranslatedPadded + " ";
			}
		}

		// hack
		passageInterleaved += 
			lineToTranslateCurrent + "\n"
			+ lineTranslatedCurrent + "\n"
			+ "\n";

		return passageInterleaved;		
	}
}

</script>

</body>
</html>
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

1 Response to A Word-for-Word Inline Translation Utility in JavaScript

  1. outsourcedguru says:
    2017/03/01 at 00:32

    Awe, you need to add the punctuation in there. In this case, ¡spanish!

    Reply

Leave a comment