Text direction: Arabic

by Manuel Souto Pico

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تحقق من معلوماتك</title>
</head> 
<body>
    <div class="form-container">
        <a href="#" class="help-link">هل تحتاج إلى مساعدة؟</a>
        <h1>تحقق من معلوماتك</h1>
        <p>يرجى إدخال معلوماتك أو التحقق منها أدناه:</p>
        <form>
            <label for="first-name">*الاسم الأول:</label>
            <input type="text" id="first-name" name="first-name" placeholder="">

            <label for="last-name">الاسم الأخير:</label>
            <input type="text" id="last-name" name="last-name" placeholder="">

            <label for="email">*عنوان البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" placeholder="">

            <label for="location">مكان الإقامة:</label>
            <select id="location" name="location">
                <option value="">حدد رابطًا</option>
                <!-- Add more options as needed -->
            </select>

            <p class="footer">
                هذا الضمان لا ينتقل للقوانين عدم التمييز والخصوصية للمعمول بها.
            </p>
        </form>
    </div>
</body>
</html>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        .form-container {
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
        }
        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        .footer {
            font-size: 12px;
            color: #666;
        }
        .logo {
            text-align: left;
            font-size: 18px;
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .help-link {
            text-align: right;
            font-size: 14px;
            margin-bottom: 10px;
            color: #007bff;
            cursor: pointer;
            text-decoration: none;
        }

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  /* change directionality if the target language is Arabic (and derivates) or Hebrew */
  const bodyText = document.body.innerText
  const regex = /\p{Script=Arabic}|\p{Script=Hebrew}/u
  const bidiFound = bodyText.match(regex)
  if (bidiFound) {  document["dir"] = "rtl" }
});