Curators often have a tough time with dual language posts. Though English curators WANT to support Spanish content, they find it hard to 'switch' between small paragraphs that alternate languages. 
Los curadores a menudo tienen dificultades con los artículos bilingües. Aunque los curadores angloparlantes QUIEREN apoyar el contenido en español, les resulta difícil 'cambiar' entre pequeños párrafos que alternan idiomas.
Este es un post muy sencillo en el cual les explicaré algunos truquitos de formato en HTML para organizar el texto más apropiadamente, en especial en artículos bilingües.
Muchos autores simplemente escriben una parte del texto en un idioma, y luego usan una cita (>) para colocar la traducción justo debajo, pero el problema con esto es que no sólo afecta el flujo de la información, sino que visualmente no es muy eficiente. Lo mejor es tener un sólo bloque de contenido en un idioma y luego pasar al otro, o tenerlos los dos coexistiendo en las mismas líneas, uno al lado del otro.
Acá les mostraré cómo hacer ambas cosas, sus ventajas y desventajas.
Opción 1 - Doble Columna
Esta es la opción que más uso yo y es realmente muy cómoda. Cuando queremos que el contenido se divida en dos columnas, debemos usar el siguiente código:
This is a very simple post where I'll explain some little tricks of HTML formatting to organize the text much more appropriately, especially in bilingual publications.
Many authors simply write one part of the text in a language, and then use a quote (>) to put the translation right below that, but the problem with this is that it not only affects the flow of information, it's not very efficient from a visual standpoint. The best practice is to have one block of content in one language and then work on the other, or to have both coexisting in the same lines, one beside the other.
Here I'll show you how to do both, their advantages and disadvantages.
Option 1 - Double Column
This is the option that I use the most and it's really quite comfortable. When we want to divide the content in two columns, we must use the following code:
<div class=pull-left>
</div>
<div class=pull-right>
</div>
Como la mayor parte de la gente lee de izquierda a derecha, el idioma que queremos que se lea primero iría en la columna de la izquierda. Esto se puede usar también con imágenes para crear formatos muy atractivos.
Al usar imágenes, no obstante, es importante recordar que el editor de texto toma en cuenta el tamaño de la imagen en píxeles. De acuerdo a su tamaño, la imagen tomará el máximo de espacio que le permita el formato. Si ya hay doble columna en un documento, la imagen se restringirá al ancho de la columna; si el objetivo es que una imagen deje espacio para texto a su lado, usen solo el código para una de las columnas y escriban el texto sin código. Esta imagen que usé acá es lo suficientemente pequeña como para permitirme escribir al lado en la misma columna, y la coloqué así usando una segunda división de columnas dentro de la primera:
Since most people read from left to right, the language that we want readers to get first would go in the left column. This technique can also be used with images in order to create pretty attractive formatting.
When using images, however, it's important to remember that the text editor takes into account the size of the image in pixels. According to its size, the image will take the maximum space that the format allows. If there is already a double column in a document, the image will be restricted to the width of the column; if the goal is for an image to leave space for text beside it, use only the code for one of the columns and write the text without code. This image I used here is small enough to allow me to write beside it in the same column, and I arranged it that way by using a second division of columns within the first:
<div class=pull-left>
<div class=pull-left>
</div>
</div>
La ventaja de escribir el contenido de esta forma es que ninguno de los dos idiomas toma preponderancia sobre el otro y además, ambos se pueden leer de forma fluida. La desventaja es que, siendo el Español y el Inglés lenguas tan distintas, puede ocurrir con frecuencia que una columna sea varias líneas más larga que la otra, lo cual es un poco chocante a nivel visual también, pero se puede arreglar con traducciones creativas y buena síntesis. Esta forma de organizar el contenido también limita bastante el formato debido a cómo usa el espacio de la publicación, por lo que les presentaré la alternativa.
The advantage of writing content this way is that none of the languages takes predominance over the other and also, both can be read in a fluid fashion. The disadvantage is that, being Spanish and English such different languages, it can often happen that one column ends up being several lines longer than the other, which is a bit irritating at a visual level too, but it can be fixed with creative translations and a good synthesis. This way of organizing content also restricts the formatting quite a bit due to how it uses the space of the publication, which is why I'll discuss the alternative method.
Opción 2 - Dos bloques de contenido
La otra forma de presentar el contenido bilingüe es escribir todo un bloque con un idioma y luego colocar la traducción, también en un bloque único, abajo. Como en la otra opción, el flujo de información permanece inalterado y además, se tiene acceso al ancho completo de la página para jugar con imágenes y símbolos. Este método tiene dos grandes desventajas: se deben repetir todas las imágenes, citas y enlaces, lo cual implica en muchos casos problemas de maquetado y traducción; el lector debe cruzar todo el texto de un idioma para llegar al otro, lo cual puede restarle interés a la publicación. Por el momento, lo único que creo que podría ayudar para facilitar el salto de un idioma a otro es usar anclas de HTML para crear una tabla de contenido y separar esa tabla por idioma/tópico/sección.
Intenté el método de anclas en este artículo, pero necesito un poco más de práctica para hacerlo funcionar. Publicaré luego más contenido al respecto.
Option 2 - Two blocks of content
The other way of presenting bilingual content is writing an entire block in a language and then putting the translation, also in a single block, below. As with the other option, the flow of information remains unchanged and you'll also have access to the entire width of the page to play around with images and symbols. This method has two great disadvantages: all images, quotes and links must be repeated, which in many cases represents issues with formatting and translation; the reader has to scroll down through the whole text in one language to reach the other, which may make the publication uninteresting. For the time being, the only thing I believe could help facilitate the jump between one language and the other is using HTML anchors to create a table of content and separate that table by language/topic/section.
I tried using the anchor method in this article, but I a bit more practice to make it work. I'll publish more content in this regard later on.
Por cierto, si no saben cómo hacer que su texto se vea justificado como lo he hecho yo en este artículo, sólo usen <div class="text-justify"></div>, que puede englobar todo el contenido, incluyendo el resto de los códigos.
¡Hay un par de otros trucos FÁCILES para que tu texto resalte!
- Coloca
#antes de tus títulos y sub-títulos para cambiar el tamaño de la fuente. - Usa
<sup>[Image source](Link Here)</sup>debajo de fotos o imágenes que no sean tuyas, para indicar la fuente -<sup>text here</sup>es como coloqué el texto minúsculo en este artículo. *Antes y después de tu texto hace que se vea así - y**hace que se vea así.
¿Tienes trucos para hacer tu texto más claro para que otros lo lean? ¿Cuáles son tus trucos de formato?
By the way, if you don't know how to make your text look justified as I did in this post, you just have to use <div class="text-justify"></div>, which can contain the entire material, including the rest of the code.
There's a couple of other EASY tricks to make your writing pop!
- Put
#in front of your headings and subheadings to change the size of the font - Use
<sup>[Image source](Link Here)</sup>under your images to indicate the source photos or images that aren't yours -<sup>text here</sup>is how I made the tiny writing in this post! *before and after your text makes your writing look like this - and**makes it look bold.
Do you have tricks to make YOUR text more clear for others to read? What are your formatting tricks?
¡Eso es todo, gente! ¡Les dejo tres artículos con excelente formato! Los autores serán beneficiarios al 5% de las recompensas de esta publicación.
That's all, folks! Here are three posts with great formatting! The authors will be set as 5% beneficiaries for the rewards of this post.
Earn Instantly For Writing Good Natural Health Content
If you would like to earn rewards for sharing your natural health content on www.naturalmedicine.io, you can sign up for a free FREE account by emailing welcome@naturalmedicine.io. Read more about us on our Welcome Page. We support writers sharing about herbalism, TCM, yoga, meditation, vegan and other healthy diets, as well as earth centred practices such as foraging, permaculture and biodynamics.
