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. @drrune here explains the code formatting that makes it easier for us curators to read the text, and therefore support. Thanks so much, Javier, for always being willing to support the Spanish community and Natural Medicine with your curator and other community efforts! Love, @riverflows!
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. @drrune aquí explica el formato del código que nos facilita a los curadores la lectura del texto, y por lo tanto el apoyo ¡Muchas gracias, Javier, por estar siempre dispuesto a apoyar a la comunidad hispanoparlante y a la Medicina Natural con tu curaduría y otros esfuerzos comunitarios! Con amor, @riverflows! (Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator!)
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.
30 Days Gratitude Challenge - @vaneaventuras
Project Elpis - Break the chains of depression - @danielapevs
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 [email protected]. 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.
Please consider delegating to help keep this collective going. For any questions, come ask in our friendly Discord here !
Excelente!
I'm very glad that you liked my post and take it as an example, it's an honor. I did it with love and trying to apply all the advices and training that I have received from the community. Thanks.
Keep up the good work, mi pana!
Valuable tips .. Thank you so much @naturalmedicine
My pleasure!
Buena información amigos de @naturalmedicine, lo probaré para ver si mejoro las publicaciones. Muchas gracias por la información.
Justo necesitaba esto.
For me it's quite funny reading these multi language posts because i use the google translate app on chrome. It translates any other language inline at the click of a button.. so when i see these posts i see everything written twice in english!
I share this because if you do speak a language other than English i highly reccomend you try it. Here is a link to it in the chrome app store for those of you that use chrome.
https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb/RK%3D2/RS%3DBBFW_pnWkPY0xPMYsAZI5xOgQEE-
It saves a lot of time and makes reading just about any post or website a breeze!
You can see how good it is at doing this in the image at the end of this comment. There are times when i dont even realise im looking at a page with other languages in it.. and the comments in the page also get translated!
Also if i might be so bold as to advise that the double column idea doesn't work very well for many people. This is especially so when using images!..but also i know the code is not practical for many people. Im a coder and have had many issues with columns.. especially when i use images with it.. Also since i use an auto translations extension i see everything twice.
Maybe we can offer an additional option of just putting the translated part below their native language so we can just scroll to the section that we can understand and read it seamlessly. That makes it really quick and easy to make the post, and to read it.
I hope that is useful!.. Its great to see us figure out a way to all communicate together.. SUch an influx of beautiful people from all over the world lately!
Congratulations @naturalmedicine! You received a personal badge!
Wait until the end of Power Up Day to find out the size of your Power-Bee.
May the Hive Power be with you!
You can view your badges on your board and compare yourself to others in the Ranking
Do not miss the last post from @hivebuzz:
Muchas gracias, es muy util este post
Excelente publicación. Yo opté por la opción bloque único de un idioma primero y bloque único de otro idioma después. Hasta ahora he publicado dos veces colocando el bloque en español, que es mi lengua materna de primero, para luego desarrollar el que va en inglés. Ahora bien, tomo esta opción porque al columnar los contenidos resulta difícil leerlos en el teléfono móvil, por lo que me parece más cómodo para todos los usuarios hacerlo de este modo. Muchos saludos.
Very good ideas for formatting. I love left and right formatting the most for bilingual posts.
Thanks @drrune.
This is really helpful. Thank you!!!!! Will post using it tomorrow, if all continues to go well.
Muchas Gracias me fue muy util para crear mi primer post/ Thank you very much. It was very useful for my first post.