2026-06-03 · Редакция Baduno · 7 blog.readMin · Блог и знания
RTL дизайн: Какво се променя, когато посоката на четене се обърне
Арабският и ивритът се четат отдясно наляво – и обръщат мълчаливите дизайнерски предположения с главата надолу. Практически доклад от нашата дизайнерска система.
Повече от огледално
Наивният подход – 'просто огледайте всичко' – бързо се проваля: Числата и латинските марки остават от ляво на дясно, символите на медийния плейър запазват посоката си, телефонните номера се разпадат. RTL дизайнът означава за всеки елемент да се реши дали е логически (следващ посоката на четене) или физически (фиксиран по посока).
CSS: логични свойства
Модерната CSS логика прави RTL управляем: margin-inline-start вместо margin-left, inset-inline-end вместо right, text-align:start вместо left. Който от самото начало пише логично, получава втората посока на четене почти даром – който добавя по-късно, се бори със стотици изключения. Този уебсайт използва последователно логически свойства; всяка RTL версия произлиза от същия stylesheet като немската.
Типография и плътност
Арабската писменост няма главни букви, различни горни/долни дължини и изглежда по-малка и по-плътна при същия размер на шрифта. Добрата RTL типография изисква собствени, специализирани шрифтове, често с един до два пункта по-голям размер и по-щедър междуредов интервал. Дори ефектите с разредка, популярни в латиницата, не работят със свързаната писменост.
Тестване с носители на езика
Никой автоматизм не замества погледа на човек, който живее в писмеността: прекъсвания на редове в сложни думи, числа в основния текст, смесени посоки във формуляри – видовете грешки са фини. Затова нашият процес на проверка винаги включва визуален RTL преглед, не само корекция на текст.
Навигация: Къде логиката се обръща
В RTL среди навигационните структури трябва да бъдат преосмислени. Хоризонталната лента с менюта започва отдясно, първият елемент от менюто е най-левият – редът остава логичен от дясно на ляво. Падащите менюта се отварят по подразбиране долу вляво вместо долу вдясно, тъй като котвата е от дясната страна. Страничните ленти, които в LTR оформление са позиционирани отляво, в RTL случай се преместват вдясно. Особено внимание изискват хамбургер менютата: самата икона (три хоризонтални линии) е неутрална по посока, но нейното разположение (горе вляво спрямо горе вдясно) трябва да се размени. Честа грешка са подменютата, които все още показват LTR посока, защото не се управляват чрез логични CSS свойства. В нашата дизайн система затова дефинираме навигационните компоненти изцяло с inset-inline-start/end, така че те автоматично да превключват между LTR и RTL. Практичен пример: Навигацията с трохи хляб (breadcrumb) в RTL режим показва текущата страница отляво, а началната отдясно – стрелките за разделяне също трябва да променят посоката си. Ние тук използваме CSS-content с вградени стрелки, които в зависимост от стойността на dir използват различен символ.
Смесени посоки: Числа и знаци
Числата, телефонните номера, имейл адресите и латинските маркови имена запазват своята LTR ориентация, дори когато обграждащият текст е RTL. Това води до така наречените двупосочни секции, в които посоката на четене се сменя по средата на изречението. По подразбиране Unicode алгоритъмът за двупосочност (Bidi) обработва такива смесени текстове, но трябва да се уверите, че превключването на посоката е коректно. Използвайте dir атрибута на нивото на смесения елемент или символи като LRM (Left-to-Right Mark) и RLM (Right-to-Left Mark). Пример: В еврейско изречение „Телефон: 01234 56789“ последователността от цифри трябва да се чете от ляво на дясно. Без правилно маркиране браузърът може да счупи или покаже неправилно последователността. Във формуляри е от съществено значение етикетът да е отдясно, а полето за въвеждане отляво, тъй като потребителят започва да чете отдясно. Нашият подход: За всеки текстов елемент с вградени латински материали в RTL шаблона поставяме <span dir="ltr">-обвивка с LRM накрая, за да може следващият RTL символ да се премести коректно в края.
Арабският и ивритът се четат отдясно наляво – и обръщат мълчаливите дизайнерски предположения с главата надолу. Практически доклад от нашата дизайнерска система.
Символи: Фиксирана посока или логични?
Иконите и пиктограмите често носят имплицитна посока: стрелките напред сочат надясно, стрелките назад наляво. В RTL интерфейси те трябва да бъдат огледално обърнати, иначе навигацията изглежда контраинтуитивна. Не всички символи обаче са посокозависими: триъгълникът за пускане (play) винаги остава същият (защото представлява физическо действие), същото важи за иконите за имейл или телефон. Правилото: логическа посока (времеви ход, посока на четене, навигационна посока) трябва да бъде огледална; физическата или символичната стойност – не. В разработката използваме CSS трансформации за икони: scaleX(-1) за всички логически насочени SVG, управлявани чрез клас [dir=rtl] .icon--directional. Така избягваме дублиране на активи. Внимание: Стрелките на карусел, които сочат надясно, в RTL режим трябва да сочат наляво, тъй като „следващата“ страница вече е отляво. Същото важи за прогресивните ленти: напредъкът трябва да нараства от дясно на ляво. В нашата дизайн система тези компоненти са имплементирани с логични свойства (inline-size вместо width), така че запълването автоматично да се свързва с началото на лентата за напредък.
Изображения: Какво да се огледа, какво да се преначертае?
Графиките и илюстрациите често съдържат културни или насочени символи: часовници, движещи се по посока на часовниковата стрелка (в RTL контекст огледалното им изглежда нормално), ръкостискания, времеви линии. Не всяко изображение трябва да бъде напълно огледално – огледалното движение на часовниковата стрелка може да се възприеме като грешно, тъй като физическата реалност се запазва. Но времева линия отляво надясно в RTL контекст трябва да върви отдясно наляво. Логата и фирмените изображения обикновено остават неогледални, тъй като са част от фиксиран визуален стил. Предизвикателството е правилните изображения да се доставят автоматично. За всяка графика съхраняваме RTL еквивалент като отделен актив или използваме CSS трансформации за прости случаи. В сложни сценарии (напр. инфографики с текст) е необходимо ръчно преработване. Нашият работен процес: графичният дизайнер маркира всяко изображение като „без посока“, „огледално“ или „индивидуално“ в CMS. Доставянето става чрез условие, което разчита атрибута dir на родителския елемент. Пример: Изображение на библиотека с книги на латиница трябва да бъде огледално, за да изглеждат гръбчетата вдясно – това може да изглежда изненадващо на пръв поглед, но е последователно.
SEO и hreflang: RTL-специфична маркировка
За търсачките правилното обозначение на езика и посоката е от съществено значение. Освен атрибута за език (lang), атрибутът dir трябва да бъде зададен на всяка страница, за да може браузърът и търсачката да интерпретират правилно посоката на четене. При многоезичните RTL страници обозначението hreflang е особено критично: арабска страница (ar) трябва правилно да сочи към своите немски или английски съответствия. Грешните записи hreflang водят до неправилно индексиране, тъй като Google не извежда автоматично посоката на четене. Освен това трябва да обмислите отделни карти на сайта за LTR и RTL версии, за да засилите сигналите. Често срещана грешка е използването на общи тагове без отчитане на посоката на писане. Ние разчитаме на динамично генериране на hreflang, което извлича както езиковите, така и регионалните кодове от езиковата база данни. За арабските диалекти е необходимо регионално разграничение, тъй като потребителите и алгоритмите имат различни очаквания. Освен това използваме canonical таг, за да избегнем несъответствия между огледалното и неогледалното съдържание. Нашият работен поток автоматично проверява дали атрибутът dir в HTML хедъра е съвместим с данните hreflang. Защото арабски текст без dir="rtl" може да бъде неправилно визуализиран от браузърите, което от своя страна увеличава степента на отпадане. Ефективността на SEO се влияе не само от текстовете, но и от правилното обозначение на посоката на четене.
Достъпност: RTL предизвикателства за асистивни технологии
Нуждите на екранните четци и други асистивни технологии се променят с посоката на четене. Екранните четци като JAWS или VoiceOver очакват атрибута dir, за да определят правилния ред на четене. Ако този атрибут липсва, те могат да прочетат смесено езиково съдържание в грешен ред. Въпреки че ARIA ориентирите остават същите, позицията в DOM трябва идеално да следва посоката на четене: основното меню трябва да бъде в изходния код преди основното съдържание – при RTL това означава дясната страна първа. Друг момент са фокусните редове: tab индексите в RTL страниците трябва логично да преминават от дясно на ляво. Използвайте родни HTML елементи, които автоматично адаптират навигацията с клавиатура. Алтернативните текстове на изображенията трябва да бъдат специфични за езика и да отразяват перспективата на целевата култура. Пример: графика, показваща ръкостискане, трябва да бъде описана на арабски като „две ръце, които се пресичат“, тъй като културната конотация е различна. Препоръчваме да извършвате одити за достъпност както в LTR, така и в RTL изглед. Това включва проверка на контрастите, които могат да бъдат различни при RTL типография. Нашият екип използва автоматизирани инструменти в комбинация с ръчни тестове от носители на езика, за да гарантира, че потребителското изживяване е приобщаващо.
blog.faqT
Трябва ли да отразявам всички изображения, когато създавам RTL версия?
Не. Само изображения с ясна посока на четене, като времеви линии, стрелки или последователни диаграми, трябва да бъдат отразени. Лога, портрети, графики с физически обекти (часовник, глобус) остават непроменени, тъй като в противен случай значението се изкривява. Решавайте според конкретния случай.
Как да тествам RTL най-ефективно по време на разработка?
Използвайте инструментите за разработчици на браузъра, за да зададете атрибута dir на html елемента на "rtl", и проверете всеки компонент за правилно подреждане. Разширете процеса си за преглед на код с посветена RTL проверка с носители на езика, която покрива визуални дразнения и неправилни двупосочни текстови потоци.
