Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to change the input text orientation based on locale language?

i want to change the text orientation based on local language as if the locale language is arabic , want text orientation to be from right to left while if the local language is english , want the text orientation to be from left to right ,

Tags:

3

Answers


  1. 0

    Fatal error: Uncaught Error: mysqli object is already closed in C:xampphtdocshoteladmin.php:32 Stack trace: #0 C:xampphtdocshoteladmin.php(32): mysqli_query(Object(mysqli), ‘SELECT * FROM `…’) #1 {main} thrown in C:xampphtdocshoteladmin.php on line 32

    Login or Signup to reply.
  2. 0

    I guess by your tags you are using react so i will give you an example of how it can be implemented in react + javascript:

    import React, { useState, useEffect } from "react";
    
const App = () => {
  const [direction, setDirection] = useState("ltr");
  const [text, setText] = useState("This is a sample text. The orientation will change based on the language locale.");

  useEffect(() => {
    //With this locale const you detect navigator language
    const locale = navigator.language || navigator.userLanguage;

    if (locale.startsWith("ar")) {
      // If the locale is Arabic, switch to RTL
      setDirection("rtl");
      setText("هذا نص تجريبي. ستتغير الاتجاه بناءً على لغة الموقع.");
    } else {
      // For other locales, default to LTR
      setDirection("ltr");
      setText("This is a sample text. The orientation will change based on the language locale.");
    }
  }, []);

  return (
    <div style={{ direction: direction, textAlign: direction === "rtl" ? "right" : "left" }}>
      {text}
    </div>
  );
};

export default App;
    Login or Signup to reply.
  3. 0 
    import React, { useState, useEffect } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const TextEditor = () => {
  const [direction, setDirection] = useState("ltr");
  const [textAlign, setTextAlign] = useState("left");

  useEffect(() => {
    const userLocale = navigator.language || "en";

    if (userLocale.startsWith("ar")) {
      setDirection("rtl");
      setTextAlign("right");
    } else {
      setDirection("ltr");
      setTextAlign("left");
    }
  }, []);

  const modules = {
    toolbar: [
      [{ 'align': [] }],
      ["bold", "italic", "underline"],
      [{ 'list': "ordered" }, { 'list': "bullet" }],
    ],
  };

  return (
    <div>
      <ReactQuill
        theme="snow"
        modules={modules}
        style={{ direction: direction, textAlign: textAlign }}
        placeholder="Type your text here..."
      />
    </div>
  );
};

export default TextEditor;

    this worked for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search