How can I ensure that the dates and times in the dynamic collections on my Webflow site appear correctly in French and Arabic? Additionally, how can I add an RTL code for my Arabic site?

To display dates/times correctly in French and Arabic and support right-to-left (RTL) layout for Arabic, you’ll need to use a combination of settings in Webflow and embedded code where necessary.

​

1. Format Dates and Times in the Correct Language

​

Webflow’s CMS doesn’t localize date formats by default, so you’ll need custom code using JavaScript to handle locale-based date formatting.

​

• Add a Plain Text field in your CMS to store your original plain date (if needed).
• Use custom JavaScript to format the date using Intl.DateTimeFormat, specifying the correct locale, such as "fr-FR" for French or "ar-SA" for Arabic.

​

Example usage within an <embed> or <script> tag (place in Page Settings or before </body> in Custom Code):

document.querySelectorAll('.date').forEach(el => {
  const rawDate = new Date(el.textContent.trim());
  const isArabic = document.documentElement.lang === 'ar';
  const locale = isArabic ? 'ar-SA' : 'fr-FR';

  el.textContent = new Intl.DateTimeFormat(locale, {
    year: 'numeric', month: 'long', day: 'numeric'
  }).format(rawDate);
});

​

• Add the class date to each date element in your Webflow Collection List.
• Set the correct HTML language attribute for each localized version of your site:
• Go to Page Settings, and under the Custom Code → Inside <head>, insert:
  • For French pages: <html lang="fr">
  • For Arabic pages: <html lang="ar">

​

Note: Webflow does not allow direct editing of the <html> tag. Use JavaScript or server settings to modify the lang attribute at runtime if needed.

​

2. Add RTL Support for Arabic

​

To enable right-to-left layout for Arabic pages or sections:

​

• Apply the dir="rtl" attribute to the <html> or a wrapping container on your Arabic pages.
• If using multilingual setups with different pages for French and Arabic:
• Add custom code in the Arabic version’s page settings:

    ```html

    <script>

      document.documentElement.setAttribute('dir', 'rtl');

    </script>

    ```

• Also, apply CSS to align text properly:

    ```css

    body {

      direction: rtl;

      text-align: right;

    }

    ```

​

• You can use Webflow’s custom attributes panel to add dir="rtl" manually on top-level Div Blocks if doing it page-wide isn’t possible.

​

3. Design Considerations for RTL

​

Ensure the following when building RTL layouts:

​

• Duplicate layouts where needed and flip them; avoid using the same layout for both LTR and RTL content unless dynamically adjusted.
• Text alignment, icon direction (e.g., arrows), spacing, and order of elements should be reversed in RTL.

​

Summary

​

To localize dates/times for French and Arabic on your Webflow site, use custom JavaScript with Intl.DateTimeFormat. For Arabic layout support, set dir="rtl" on your pages or wrapping elements and use RTL-aware styles. Combine these with correct lang attributes to ensure proper localization and accessibility.