Auto detect the direction of text (rtl and ltr)

[taablo.site]

How can we enable users to write in both RTL and LTR languages in every writable section of the front-end?(without changing the WordPress language)

[andrii]

Hi,

Unfortunately, there’s no such feature; it would require a custom implementation. Most likely, you need a tool or plugin that will automatically detect whether it’s RTL or not and somehow load the styles.

[taablo.site]

thanks andrii,
I could resolve it using the following JavaScript code: (for Farsi)
I hope this piece of code can be beneficial to others facing a similar situation.
//////////////////////////////////////////////////////////////////////////////////

(function() {
  // Function to detect the language of a given text
  function detectLanguage(text) {
    // Regular expression to match English characters
    const englishRegex = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/;
    
    // Counters for English and Farsi characters
    let englishChars = 0;
    let farsiChars = 0;

    // Loop through each character in the text
    for (let i = 0; i < text.length; i++) {
      const char = text.charAt(i);

      // Check if the character is English or Farsi
      if (englishRegex.test(char)) {
        englishChars++;
      } else {
        farsiChars++;
      }
    }

    // Return the language based on character counts
    return (englishChars > farsiChars) ? 'en' : 'fa';
  }

  // Function to set the direction of paragraphs
  function setParagraphDirections() {
    const paragraphs = document.getElementsByTagName('p');

    for (let i = 0; i < paragraphs.length; i++) {
      const paragraph = paragraphs[i];
      const text = paragraph.textContent.trim();

      // Detect the language of the paragraph
      const lang = detectLanguage(text);

      // Set the direction based on the language
      paragraph.dir = (lang === 'fa') ? 'rtl' : 'ltr';
    }
  }

  // Wait for the document to load before setting paragraph directions
  document.addEventListener('DOMContentLoaded', setParagraphDirections);
})();