🌍 RTL підтримка — Right-to-Left мови

📘 Що таке RTL (Right-to-Left)?

RTL мови пишуться справа наліво:

🇸🇦 Arabic (العربية) — 310 млн носіїв
🇮🇱 Hebrew (עברית) — 9 млн носіїв
🇮🇷 Persian/Farsi (فارسی) — 70 млн носіїв
🇵🇰 Urdu (اردو) — 70 млн носіїв

Всього ~500 млн користувачів RTL мов

Частина 1: LTR vs RTL

Аспект	LTR (Left-to-Right)	RTL (Right-to-Left)
Мови	English, Ukrainian, Russian, French	Arabic, Hebrew, Persian, Urdu
Текст	Hello World →	← مرحبا بالعالم
Меню навігації	[Home] [About] [Contact] →	← [الاتصال] [حول] [الرئيسية]
Іконки	Стрілка вправо: →	Стрілка вліво: ←
Padding/Margin	margin-left, padding-right	margin-right, padding-left (дзеркальні)
Числа	1234 (LTR)	1234 (LTR навіть в RTL!)

Частина 2: HTML атрибут `dir`

Базове використання

موقع الآلات الحاسبة العلمية

مرحبا بكم

هذا نص باللغة العربية

Як користуватися шпаргалкою

Ця шпаргалка зосереджує найважливіші формули, правила та визначення теми в компактному форматі для швидкого пошуку та підготовки до іспитів. Матеріал систематизований від базових понять до просунутих результатів.

Ефективне використання

Використовуйте шпаргалку поряд з розв'язуванням задач — не для списування, а як довідник формул. Спершу спробуйте пригадати формулу самостійно, потім звіртеся з довідником. Регулярне повторення формує стійку пам'ять.

Часті запитання (FAQ)

Які ключові формули та правила містить шпаргалка з 🌍 rtl підтримка?

Ця шпаргалка з '🌍 RTL підтримка' включає: основні означення, головні формули у компактному вигляді, правила обчислень, типові підстановки та приклади застосування. Все систематизовано для швидкого пошуку.

Для кого призначена ця шпаргалка з 🌍 rtl підтримка?

Шпаргалка з '🌍 RTL підтримка' орієнтована на студентів університетів та учнів старшої школи, а також на всіх, хто хоче швидко освіжити знання перед іспитом або при вирішенні практичних задач.

Як використовувати шпаргалку з 🌍 rtl підтримка при підготовці до іспиту?

Оптимальна стратегія: спершу вивчіть теорію, потім використовуйте шпаргалку як довідник при розв'язанні задач. За 1–2 дні до іспиту перегляньте шпаргалку цілком, звертаючи увагу на формули, які ви плутаєте.

Чи охоплює ця шпаргалка всю програму курсу з 🌍 rtl підтримка?

Шпаргалка з '🌍 RTL підтримка' охоплює стандартну університетську програму: всі ключові теореми, формули та методи. Матеріал структурований від базових понять до просунутих результатів.

Де ще можна попрактикуватися з 🌍 rtl підтримка після вивчення шпаргалки?

Після роботи зі шпаргалкою рекомендуємо: тренажери вправ на calculator.party (миттєвий зворотний зв'язок), розв'язані задачі (показують метод покроково) та онлайн-калькулятори для перевірки власних результатів.

مرحبا بكم في الآلات الحاسبة العلمية
هذا مثال على النص العربي. يتم عرضه من اليمين إلى اليسار.

Локальний dir для окремих елементів

This is English text (LTR)

هذا نص عربي (RTL)

Back to English (LTR)

Частина 3: CSS Logical Properties

⚠️ Фізичні властивості НЕ адаптуються:

/* ❌ ПОГАНО: фізичні властивості */
.element {
    margin-left: 20px;   /* в RTL буде СПРАВА, але треба зліва! */
    padding-right: 10px;
    text-align: left;    /* текст зліва в RTL виглядає некоректно */
}

Logical Properties — адаптуються автоматично

Фізична властивість	Logical властивість	LTR	RTL
`margin-left`	`margin-inline-start`	Зліва	Справа ✨
`margin-right`	`margin-inline-end`	Справа	Зліва ✨
`padding-left`	`padding-inline-start`	Зліва	Справа ✨
`padding-right`	`padding-inline-end`	Справа	Зліва ✨
`border-left`	`border-inline-start`	Зліва	Справа ✨
`left: 0`	`inset-inline-start: 0`	Зліва	Справа ✨
`text-align: left`	`text-align: start`	Зліва	Справа ✨

Приклад адаптивного CSS

/* ✅ ДОБРЕ: адаптується автоматично */
.card {
    margin-inline-start: 20px;  /* LTR: зліва, RTL: справа */
    padding-inline-end: 15px;   /* LTR: справа, RTL: зліва */
    border-inline-start: 3px solid #00d9ff;
    text-align: start;          /* LTR: left, RTL: right */
}

.button {
    /* Іконка буде з правильного боку */
    padding-inline-start: 40px;  /* місце для іконки */
}

.button::before {
    content: '→';
    position: absolute;
    inset-inline-start: 10px;    /* LTR: left:10px, RTL: right:10px */
}

/* В RTL стрілка автоматично дзеркалиться */
[dir="rtl"] .button::before {
    content: '←';  /* замінити стрілку на протилежну */
}

Частина 4: CSS `direction` property

/* Альтернатива HTML dir="rtl" */
html {
    direction: rtl;  /* весь документ RTL */
}

.ltr-section {
    direction: ltr;  /* цей блок LTR навіть в RTL документі */
}

✅ Краще використовувати HTML dir:

Семантичніше — явно вказує мову
Accessibility — screen readers розуміють
SEO — пошукові системи індексують правильно

Частина 5: BiDi — Bidirectional Text

📘 BiDi (Bidirectional Text):

Текст може містити обидва напрямки в одному реченні:

مرحبا! كيف حالك؟ Visit our website scientific-calculators.com للحصول على الآلات الحاسبة!

Тут Arabic RTL + English LTR + домен LTR в одному реченні!

Unicode BiDi контрольні символи

Символ	Unicode	Призначення
LRM	&lrm; (U+200E)	Left-to-Right Mark
RLM	&rlm; (U+200F)	Right-to-Left Mark
LRE	U+202A	Start LTR embedding
RLE	U+202B	Start RTL embedding
PDF	U+202C	Pop directional formatting

السعر: 100‎$

Частина 6: JavaScript для RTL

Детекція RTL

// Перевірити чи документ RTL
const isRTL = document.documentElement.dir === 'rtl' ||
              getComputedStyle(document.documentElement).direction === 'rtl';

console.log('Is RTL:', isRTL);

// Змінити напрямок динамічно
function setDirection(dir) {
    document.documentElement.dir = dir;  // 'ltr' або 'rtl'
    document.documentElement.lang = dir === 'rtl' ? 'ar' : 'en';
}

// Toggle RTL/LTR
function toggleDirection() {
    const current = document.documentElement.dir;
    setDirection(current === 'rtl' ? 'ltr' : 'rtl');
}

Адаптувати CSS класи

// Додати клас .rtl на 
if (document.documentElement.dir === 'rtl') {
    document.body.classList.add('rtl');
}

// CSS
.icon { margin-left: 10px; }
.rtl .icon { margin-left: 0; margin-right: 10px; }

Частина 7: Frameworks підтримка

Bootstrap 5 RTL

Tailwind CSS RTL

// tailwind.config.js
module.exports = {
    plugins: [
        require('tailwindcss-rtl'),
    ],
}

Частина 8: Тестування RTL

Chrome DevTools

Відкрийте DevTools (F12)
Console → введіть:
document.documentElement.dir = 'rtl';
Перевірте чи все дзеркалиться правильно

Bookmarklet для швидкого toggle

javascript:(function(){
    const dir = document.documentElement.dir;
    document.documentElement.dir = dir === 'rtl' ? 'ltr' : 'rtl';
})();

Збережіть як закладку → клік миттєво перемикає RTL/LTR

Висновок

Checklist для RTL підтримки:

✅ Додати <html dir="rtl" lang="ar"> для RTL мов
✅ Використовувати CSS Logical Properties (margin-inline-start)
✅ text-align: start замість left
✅ Дзеркалити іконки стрілок (→ стає ←)
✅ Перевірити BiDi текст (Arabic + English)
✅ Тестувати на real Arabic/Hebrew контенті
✅ Frameworks: використати RTL версії (Bootstrap RTL, Tailwind RTL)

📚 Ресурси: