Why is my content getting broken up?

When Localize is searching for content in your website or app, it does its best to intelligently group together adjacent text in your app. Sometimes you may notice an inaccurate grouping and wonder why. Usually, it is due to the complexity of the underlying HTML.

<br> tag

One example is when there is a <br> tag embedded within your content.

When a phrase contains a <br> and there are other sub-HTML-elements in the phrase (like links or bolded text), the phrase will be broken up in strange ways unless the parts of the phrase before the <br> are wrapped in a container (like a <span> or <div> tag).

An Alternate Solution

If you always want to keep content together that has a <br> element, then you can set the allowInlineBreakTags option to true in your Localize.initialize() call.

If true, whenever you have a <br> element in your content, Localize will not break up the parent element's content but instead will keep all sibling child elements together in the parent or containing element.

<figure> tag

Another example is when there is a <figure> tag embedded within your content.

When a phrase contains a <figure> and there are other sub-HTML-elements in the phrase (like links or bolded text), the phrase will be broken up in strange ways unless the parts of the phrase outside of the <figure> are wrapped in a container (like a <span> or <div> tag).

Placing a <span> tag around the text part of the content will solve this problem.

For more information, please visit the Why is my content getting broken up? article in the Help Center.