[Résolu] Special characters/ html entities break layout during translation

[Auteur]

Publications

[carletto0282]

Hi,

I have built a template containing a table with several math symbols like "greater than" or "less than".

It seems that those symbols break the layout during the translation with the WPML advanced editor.

If I try to substitute the special character with the corresponding HTML entity it looks like it works but when I reload the template editing page the editor converts the HTML entity back to the symbol and it breaks the layout again

Is there a way to avoid conversion of HTML entities inside the content template editor?
Thanks

[Christian Cox]

Hi, if I understand correctly you need a way to include symbols like "<" and ">" in your templates so that the HTML markup isn't broken by entity conversion during edits in wp-admin, or by translation in the WPML translation editor. There's no simple HTML entity preservation option in the editor, so we may need to explore different encoding methods and symbol representation. I'd like to set up a similar table template in my local test environment so I can try editing that template and submitting it for translation to see exactly how the entities and characters are being encoded and converted during those processes. Sometimes symbols and entities encoded in the reply editor here will be converted automatically, so it might be most effective for me to work with a text file containing the Content Template code copied directly from your site. Can you copy + paste your template contents into a simple text file I can download? If you upload that text file to Drive or Dropbox and post a link here in the forum, I can download the text file and work with it locally to try to come up with the best solution. Links you share in your replies here will be automatically hidden from public view for your privacy.

Also, can you tell me if your translators use the WPML Advanced Translation Editor, or the WPML Classic Translation Editor? I will try to replicate your workflow as closely as possible so the results are consistent.

[carletto0282]

Hi Christian,

sorry for the delay.

Here you can find the txt file hidden link

I've tried both the named format and the numeric one of html entities and both have the same issue.

The process I followed:

1. add the content to content template
2. translate the template through WPML advanced editor (the translation should work)
3. edited the content template (occasionally noted that the editor converted the html entity to the actual symbol
4. updated the translation
5. noticed the broken layout on the frontend

Hope you can help solve this issue
Thanks

[Christian Cox]

I think the best solution here is a custom shortcode to display greater than and less than symbols, since the Content Template editor is occasionally converting entities back to their HTML equivalents. I can provide a couple of custom shortcodes for you to use instead of the entities. The Content Template editor and the translation editor will not convert these shortcodes, and you can translate around them effectively. Please add these custom shortcodes to your child theme's functions.php file, or create a new custom snippet in Toolset > Settings > Custom code:

add_shortcode( 'gt-symbol', 'gt_symbol_sc');
function gt_symbol_sc($atts)
{
  return '>';
}


add_shortcode( 'lt-symbol', 'lt_symbol_sc');
function lt_symbol_sc($atts)
{
  return '<';
}

Then you can place the shortcodes [gt-symbol][/gt-symbol] and [lt-symbol][/lt-symbol] in your template content like so:

<table class="table table-sm table-striped small mb-5">
  <tbody>
    <tr>
      <th scope="row">Power factor (full-load)</th>
      <td>[gt-symbol][/gt-symbol] 0,90</td>
    </tr>
    <tr>
      <th scope="row">Lifetime</th>
      <td>[gt-symbol][/gt-symbol] 100.000 h</td>
    </tr>
    <tr>
      <th scope="row">Power supply failure rate for 50,000 hours</th>
      <td>[lt-symbol][/lt-symbol] 10%</td>
    </tr>
  </tbody>
</table>

<table class="table table-sm table-striped small mb-5">
  <tbody>
    <tr>
      <th scope="row" class="w-50">LED</th>
      <td>Ceramic based power LED</td>
    </tr>
    <tr>
      <th scope="row" class="w-50">Module Efficiency</th>
      <td>up to 170 lm/W</td>
    </tr>
    <tr>
      <th scope="row">Color temperature</th>
      <td>4000 K</td>
    </tr>
    <tr>
      <th scope="row">Color rendering index</th>
      <td>[gt-symbol][/gt-symbol] 80</td>
    </tr>
    <tr>
      <th scope="row">L90B10</th>
      <td>[gt-symbol][/gt-symbol] 217.000 h</td>
    </tr>
    <tr>
      <th scope="row">L90 (TM-21)</th>
      <td>[gt-symbol][/gt-symbol] 72.600 h</td>
    </tr>
    <tr>
      <th scope="row">Optical system</th>
      <td>Reflection optics</td>
    </tr>
  </tbody>
</table>

Let me know if you have questions about that. I've noticed you have an open ticket in WPML as well, and I've informed the WPML supporter there that I'm working on a custom shortcode approach.

[carletto0282]

Hi Christian,

thank you. I was hoping for a more clean solution.
But I've ended up doing the same thing as you suggested (hoping it was just a temporary workaround).

Thank you very much
Best regards
Carlo