Textos bilingües

English Spanish

Este post no va dirigido a temas de informática gráfica. Presento una manera de poder mostrar 'posts' en dos idiomas. El sistema es muy sencillo y se puede utilizar en blogspot como voy a demostrar. No he perdido mucho tiempo buscando por internet mecanismos similares. Debido a la sencillez he preferido realizarlo por mi mismo.

Para llevar a cabo esto se usará Javascript. Expongo los pasos:

• Modificación de la plantilla


• Creación de los links de idioma en el post


• Definición de los bloques de idioma en el post

Modificación de la plantilla
En las opciones de blogger de 'Diseño' se modifica la plantilla HTML. Añadiendo lo siguiente:

<script language='javascript' type='text/javascript'>
function showBlk_1 ()
{
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'none';
}
function showBlk_2 ()
{
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'none';
}
</script>

El código es sencillo. Si se invoca a showBlk_1 se cambia el estilo del bloque identificado como 'blk_1' a visible, y el identificado como 'blk_2' a invisible.

La otra función realiza la operación inversa.

Creación de los links de idioma en el post

Simplemente definimos etiquetas 'span' o 'a' con un href apuntando a '#' y esto es lo importante: Una función onclick.

Por ejemplo:

<a href='#'><span onclick="showBlk_1()">Spanish</span></a>
<a href='#'><span onclick="showBlk_2()">English</span></a>

Definición de los bloques de idioma en el post

Finalmente ahora se escriben los textos en los dos idiomas. El texto en el idioma asociado al bloque 1 (blk_1) estará dentro de un div identificado con blk_1.
Los textos en el otro idioma estarán metidos dentro del otro bloque.

Por ejemplo:

<div id="blk_1" style="display: inline;">Esto es un texto en idioma Español.</div>
<div id="blk_2" style="display: none;">This is an English text.</div>

Uno de los bloques ha de ser visible y los demás invisbles para que por defecto se muestre sólo un idioma.
Aquí por claridad se ha añadido un retorno de carro para separar los divs pero en el post han de estar los 'divs' pegados. Si no, el segundo idioma aparecerá con un retorno de línea extra.

Conclusión

Se ha presentado una manera muy sencilla de generar posts en dos idiomas. Este modelo es a su vez fácilmente escalable para esquemas de múltiples idiomas.

This post is not related to computer graphics. I present a way to show posts in two languages. The mechanism is very simple and can be used in blogspot as I'm going to show. I haven't wasted too much time in finding over internet similar mechanisms. Due to the simplicity of this method I had prefered doing it by myself.

In order to achieve this javascript will be used. I expose the steps:

• Modifying the template


• Creation of the language links in the post


• Definition of the language blocks in the post

Modifying the template
The template can be modified in Design options of blogger. It's possible to add this:

<script language='javascript' type='text/javascript'>
function showBlk_1 ()
{
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'none';
}
function showBlk_2 ()
{
    var nodeObj = document.getElementById('blk_2')
    nodeObj.style.display = 'inline';
    var nodeObj = document.getElementById('blk_1')
    nodeObj.style.display = 'none';
}
</script>

The code is simple. If showBlk_1 is invoked, the style of the block identified by blk_1 is changed to visible, and the one identified with blk_2 is set to invisible.
The other function does the oposite operation.

Creation of the language links in the post
Simply we define the tags 'span' o 'a' with a href targeting '#' and this is the important thing: An onclick function:
For example:

<a href='#'><span onclick="showBlk_1()">Spanish</span></a>
<a href='#'><span onclick="showBlk_2()">English</span></a>

Definition of the language blocks in the post
Finaly now the texts in the two languages are written. The text in the language associated to the block 1 (blk_1) will be inside in a div block identified with blk_1.
The texts in the other language will be inside the other block.
For example:

<div id="blk_1" style="display: inline;">Esto es un texto en idioma Español.</div>
<div id="blk_2" style="display: none;">This is an English text.</div>

One of the blocks has to be visible and the other ones invisibles so by default only one language will be shown.

Here, for clarity it has been added a return carriage to separate the divs but in the post the 'divs' shouldn't be separated. If not, the second language will appear with an extra line.

Conclusion
It has been shown a very easy way to generate posts in two langages. This model it's also easily scalable to manage schemes with multiple languages.