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:

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:

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.

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.

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?