How is formatting preserved in translations?

Learn how Translate Desk preserves HTML formatting, structure, and styling in your translated articles.

Translate Desk preserves the HTML structure, formatting, and styling of your articles during translation. This ensures your translated content looks and behaves the same as the original.

What Gets Preserved

During translation, Translate Desk preserves:

  • HTML tags: All HTML elements remain intact
  • Structure: Headings, paragraphs, lists, and other structural elements
  • Links: All links and URLs are preserved
  • Images: Image references and alt text are maintained
  • Styling: CSS classes and inline styles are kept
  • Spacing: Paragraph spacing and line breaks are preserved
  • Formatting: Bold, italic, and other text formatting stays intact

The translation system translates only the text content while leaving all HTML markup unchanged.

HTML Elements That Are Preserved

All standard HTML elements are preserved during translation:

Structural Elements

  • Headings (<h1>, <h2>, <h3>, etc.)
  • Paragraphs (<p>)
  • Lists (<ul>, <ol>, <li>)
  • Divs and spans (<div>, <span>)
  • Sections and articles (<section>, <article>)

Text Formatting

  • Bold and italic (<strong>, <b>, <em>, <i>)
  • Code blocks (<code>, <pre>)
  • Blockquotes (<blockquote>)
  • Text alignment and styling

Interactive Elements

  • Links (<a>)
  • Buttons (<button>)
  • Form elements (when present)

Media

  • Images (<img>)
  • Videos and embeds (when present)

Tables

  • Table structure (<table>, <tr>, <td>, <th>)
  • Table formatting and styling

How Formatting Is Preserved

The translation system uses HTML-aware processing that:

  1. Identifies HTML structure: Recognizes HTML tags and structure
  2. Translates text content: Only translates text within HTML elements
  3. Preserves markup: Keeps all HTML tags and attributes intact
  4. Maintains relationships: Preserves relationships between elements

This ensures that your translated articles maintain the same visual appearance and functionality as the originals.

Spacing and Layout

Translate Desk preserves spacing and layout:

  • Empty paragraphs: Empty paragraphs are preserved to maintain spacing
  • Line breaks: Line breaks within content are maintained
  • Whitespace: Intentional whitespace is preserved
  • Paragraph spacing: Spacing between paragraphs is kept

This ensures your translated articles have the same visual spacing and layout as the originals.

CSS Classes and Styling

CSS classes and inline styles are preserved:

  • CSS classes: All class attributes remain unchanged
  • Inline styles: Style attributes are preserved
  • Styling structure: The structure that supports styling is maintained

Your translated articles will use the same CSS classes and styles as the originals, so they'll look identical when published to Intercom.

Links are preserved during translation:

  • Link URLs: All URLs remain unchanged
  • Link text: Link text is translated
  • Link structure: Link attributes and structure are preserved

This ensures that links continue to work correctly in translated articles.

Images

Images are preserved:

  • Image sources: Image URLs and references are maintained
  • Alt text: Alt text is translated when present
  • Image attributes: All image attributes are preserved

Images will display correctly in translated articles, and alt text will be translated for accessibility.

Code Blocks

Code blocks are handled specially:

  • Code content: Code within <code> or <pre> tags is typically not translated
  • Code structure: Code formatting and structure are preserved
  • Syntax highlighting: If present, syntax highlighting structure is maintained

This ensures that code examples remain functional and readable in translated articles.

Tables

Tables are fully preserved:

  • Table structure: All table elements are maintained
  • Table content: Text within table cells is translated
  • Table formatting: Table styling and attributes are preserved

Tables will display correctly in translated articles with translated content.

What Doesn't Get Translated

Some content is intentionally not translated:

  • URLs: Web addresses and links remain in their original form
  • Code: Code within code blocks typically isn't translated
  • Email addresses: Email addresses remain unchanged
  • Technical identifiers: IDs, class names, and technical attributes stay the same

This ensures that functional elements continue to work correctly.

Best Practices for Formatting

To ensure the best formatting preservation:

  1. Use semantic HTML: Use proper HTML elements (headings, paragraphs, lists) rather than styled divs
  2. Avoid inline styles when possible: Use CSS classes instead of inline styles for better maintainability
  3. Test after translation: Review translated articles to verify formatting looks correct
  4. Use consistent structure: Maintain consistent HTML structure across articles
  5. Check spacing: Verify that spacing and layout look correct in translated articles

Troubleshooting Formatting Issues

If formatting doesn't look correct after translation:

  1. Check the source article: Verify that the source article has proper HTML structure
  2. Review the translation: Check the translated article to see what changed
  3. Compare side by side: Use the review feature to compare original and translated content
  4. Check CSS classes: Ensure CSS classes are preserved and applied correctly
  5. Verify HTML structure: Confirm that HTML structure is intact

Most formatting issues are rare, but reviewing translations helps catch any problems early.

Examples

Example 1: Article with Headings and Lists

Original:

<h2>Getting Started</h2>
<p>Follow these steps:</p>
<ul>
  <li>Step one</li>
  <li>Step two</li>
</ul>

Translated (Spanish):

<h2>Comenzar</h2>
<p>Sigue estos pasos:</p>
<ul>
  <li>Paso uno</li>
  <li>Paso dos</li>
</ul>

The structure is identical; only the text content is translated.

Example 2: Article with Links and Formatting

Original:

<p>Visit our <a href="/help">help center</a> for more information.</p>
<p><strong>Important:</strong> Remember to save your work.</p>

Translated (French):

<p>Visitez notre <a href="/help">centre d'aide</a> pour plus d'informations.</p>
<p><strong>Important :</strong> N'oubliez pas d'enregistrer votre travail.</p>

Links and formatting are preserved; only text is translated.

Next Steps

Previous←How does automatic syncing work?NextHow do I keep translations up to date?→