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?

TL;DR

Use JavaScript with Intl.DateTimeFormat to format dates based on locale (fr-FR or ar-SA) and apply the date class to relevant CMS elements.
Set the correct lang attribute (fr or ar) via page settings or JavaScript for accurate localization.
Enable RTL layout for Arabic by setting dir="rtl" on the <html> tag or container, and apply RTL-specific CSS for layout adjustments.

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

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.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer