[Waiting for user feedback] Multi-language Synchronization, edited content being overwritten

Hello There,
Thanks for contacting WPML Support.

From your description, I understood that you Translated the contents first using WPML Translation Editor and later manually edited the Translation using Elementor Editor. Please note that the mix of translation methods you're using is not typically recommended, as it can lead to such conflicts. To avoid this issue, it's advisable to stick to one method of translation.

If you have started translating content using the ATE, please don't manually alter the translation using the WordPress Editor. Since the translation memory isn't shared between the translation method or editors, any manual changes you make will be overridden when you update the translation again using the ATE. I hope you can understand.

If you want to apply a line break using CSS for the translation, you can do that by specifically defining the CSS for that language, instead of manually making changes to the translation. You can target the Chinese language with CSS like this:

html[lang="zh-hans"] .your-css-class {
    /* Specific styles for Chinese */
    white-space: pre-wrap;
    color: red; /* Example styling */
}

Replace .your-css-class with the actual class you're using (e.g., .line-break and value for lang with the actually lang value for the Chinese language. If you inspect the Chinese version, you'll see that value in the HTML tag.).

I hope you can understand. If you have any more questions or need further assistance, please feel free to reach out. I'll be happy to help.

Best regards,
Prosenjit

Hello There!
I hope you're doing well. Sorry for the delay in responding due to the weekend

Thank you for the update. Here’s my response to each of your points below.

1) Yes. You can also add the custom CSS by going to Appearance > Customer > Additional CSS.

2) Yes. If you add the translation using ATE, you'll need to use the ATE to make any edits/updates. If you make manual changes, that will be overwritten next time when you update the translation using ATE.

3) To format text in the editor, you’ll need to apply the same formatting in the default language. For example, if you add a line break using a `<br>` tag in the default language post, you’ll see an HTML marker (screenshot: hidden link) for that sentence/paragraph when adding or updating the translation. To ensure the formatting matches the default language, place the cursor at the marker and replicate the same formatting.

However, if you want to apply the formatting to only one language, it’s best to use a CSS class. Define the class in the default language and update the translation, ensuring the class appears correctly in other languages. Then, use CSS to apply the specific styles for the language where you want the line break to appear.

If you want the CSS to apply only to a specific viewport, define the class with a line-break rule for certain screen sizes using media queries. For example, to target mobile devices:

@media (max-width: 768px) {
    .your-css-class {
        display: block;
    }
}

4) Content settings in ATE will not be overwritten unless you modify the source content in the default language.

I hope this clarifies your concerns. If you need further assistance, please don’t hesitate to reach out. I’ll be glad to help!

Best regards,
Prosenjit

Hello There,
Thank you for sharing the video.

I reviewed the Japanese page and noticed that the HTML you added in the translation editor has not been included—only the `<br>` tag is present, which is expected behavior. In the Translation Editor, any external HTML you add will be stripped out and will not appear on the frontend.

However, using the `<br>` tag, we can also apply some CSS to ensure the line break appears only on mobile devices. Below is the CSS code that will help in achieving what you're looking for.

/* Hide the break on desktop */
html[lang="jp-JP"] .elementor-element-39d6b93 br {
    display: none;
}

/* Show the break on mobile devices */
@media (max-width: 768px) {
    html[lang="jp-JP"] .elementor-element-39d6b93 br {
        display: inline;
    }
}

Explanation:
html[lang="ja-JP"]: This targets the Japanese language specifically by using the lang attribute in the HTML tag. This ensures the CSS applies only to pages set to Japanese.

.elementor-element-39d6b93: This is the parent class of the element containing the text. Inspect the page using the browser console to identify this class. For other areas where you need similar adjustments, you can find and target their respective parent classes.

CSS Rules:
Desktop Devices: The <br> tag is hidden using display: none.
Mobile Devices: The <br> tag is displayed using display: inline, ensuring the line break appears only on smaller screens.

I hope the information above will help in solving the issue. Please feel free to let me know if you need further assistance or clarification. I'll be happy to help.

Best regards,
Prosenjit

Hi There!
Thank you for the update.

Since you want to apply the CSS changes to a specific language, the process I shared earlier is optimal for this purpose. However, if you're open to making manual changes in other languages, you can use a more universal approach to apply the mobile line-break behavior across your site wherever needed.

Please note that with this approach, you will need to manually adjust the translations each time you update them using the WPML Translation Editor. I've shared the process, below.

- You can create a single CSS rule that works site-wide for any <br> tag with a specific class, regardless of the language or container:

/* General rule to hide <br> on larger screens */
br.mobile-break {
    display: none;
}

/* Show <br> only on mobile screens */
@media (max-width: 768px) {
    br.mobile-break {
        display: inline;
    }
}

- Simply add the mobile-break class to any <br> tag where you want the line break to appear only on mobile devices.

This approach allows you to reuse the same CSS across your entire site, regardless of the language or container.

Please let me know if the steps above resolve your concern or if you need further assistance. I'll be happy to help.

Best regards,
Prosenjit

Hi There!
Thank you for the update.

I reviewed the video, and aside from the desktop screen, nothing else appears throughout the 4-minute duration. Please refer to this screenshot: hidden link. It seems the correct screen may not have been selected during the video.

However, ;et me clarify what I mentioned in my previous response:

- Create a CSS rule for a class named `.mobile-break`.
- To display a break, insert a `<br>` tag and assign the `mobile-break` class to it.
- If you want the break to appear specifically in another language, open the corresponding language page/post in the editor and add the class.

This should be the approach if you want to define a universal class. But, please note that the changes will be removed once you update the translation through ATE. So, I'd recommend following the advice in this response: https://wpml.org/forums/topic/multi-language-synchronization-edited-content-being-overwritten/#post-16417618

Regarding the approach you've shared, it involves custom coding, and for static or simple styles, creating a shortcode might not be the best option. Shortcodes can add unnecessary complexity to the codebase and may lead to potential issues on the pages where they are used.

I’d like to mention that providing custom coding support is beyond the scope of our assistance. That's why, sorry to say we might not be able to assist you with the direct coding. However, we can guide you with suggestions to help achieve your goal or resolve the issue. I hope you can understand.

It would be better to go with the CSS approach instead of the Shortcode. Feel free to let me know if you have any other questions or need assistance. I'll be happy to help.

Best regards,
Prosenjit