Why Using Headings, Paragraphs and Line Breaks Matter in Translation

accurate.ecommerce.platform.3.spacing.in.translation.line.breaks

There are times when even the smallest details can make or break the project by significantly delaying it. In translation, line breaks, paragraphs, and headings can be just as problematic as word and phrase spacing – if you deal with large amounts of content, you need to be aware of that.

To make it easier for those who struggle and to educate those who may have such problems in the future, we publish this blog post. We will discuss why using headings, paragraphs and line breaks really matter in translation and what are the best practices to avoid issues. Let’s dive right in!

 The global master plan

Let’s imagine that you want to have a great-looking, multilingual website for your business. You choose the theme, craft beautiful content for the marketing message, pick the graphics and finally, build your website using one of the most popular drag-and-drop Content Management Systems.

Now, the best part – translating your website into more languages, so you can reach a global customer base. After you research your options, you choose the best solution – an Overlay Editor that will allow you to translate your website within the browser, fully in-context.

When you finally sit down to do the translation magic, it turns out that your content behaves like a few chunks of text thrown into the translation editor. What actually happened?

breaking.lines.in.translation1
Text United’s Overlay Editor can automatically detect if your page contains segments that exceed allowed length

The issue with line breaks in translation and drag-and-drop CMSs

Popular website editors are easy to use but very often you won’t have full control over how they will generate the HTML code in the backend of your website. In practice, this means that the text is simply not formatted well enough for translation software. If you are seeing large chunks of text in the Overlay Editor for website translation, we can guarantee that this is your case and that the line breaks used on your page are not appropriate.

Even if the content looks visually pleasing, drag-and-drop website builders force you to break large segments of text apart manually because they wrap everything in one HTML element. How to properly break the content apart and which tags to use to avoid this problem in the future?

The problem with <br>

The best solution to properly format the HTML text blocks is not to use <br> elements to create line breaks. <br> are inline breaks – you can think of them as soft breaks in a Word document.

According to official Mozilla Developer Network documentation, the HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

First highlighted note on the official <br> tag documentation is the following: Do not use <br>to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size.

Creating separate paragraphs of text using <br> is not only bad practice; it’s also problematic for people who navigate with the aid of screen reading technology.  Screen readers may announce the presence of the element, but not any content within the <br> tags – this can be a confusing and frustrating experience for the person using the screen reader.

Exchange bad practices for good practices

As you already know, the most common error is to use <br> for dividing paragraphs and create line breaks. When you think about it in a simpler way, if you want two items in different visual blocks, you probably would want them in different logical blocks. In most cases, this means using different elements to separate them, like headings and paragraphs, which will also boost your SEO.

Example of a badly formatted text block in HTML:

breaking.lines.in.translation2

Example of how a text block should be properly broken apart for translation editors:

breaking.lines.in.translation.3

As you can see in this example, the text block is divided by the <p> elements that replace the inline breaks, especially for large text blocks.

By applying this practice, you will get multiple editable segments in the translation editor instead of having one large uneditable segment.

Use headings, paragraphs, and line breaks wisely

Do you use this practice already, or maybe you just found out about it? Do you often have problems with translating your website, or you found this blog while preparing for the process?

Either way, if you have any questions related to this matter or you need advice on how to deal with website translation, feel free to reach out to us. We will gladly help you set everything up for your global success!

Gosia
Written By:

Gosia loves copywriting and product translation. Additionally, she's a content marketing and lolcats junkie.

Add a Comment

Your email address will not be published. Required fields are marked *