Основен dir атрибут
Атрибутът dir със стойност 'rtl' е основата за всяко RTL уеб дизайн. Обикновено се задава върху тага <html> или <body> и влияе върху подравняването на текста, стандартния ред на клетките в таблици и посоката на CSS свойства като 'text-align'. Без този атрибут съдържанието остава ляво подравнено, което изглежда неестествено за RTL езици. Освен това трябва да презапишете 'dir' на ниво контейнер, когато има смесени посоки. Липсващ или грешен dir атрибут води до трудно четими оформления и затова трябва да бъде приоритизиран.
Огледално оформление и логически CSS свойства
Вместо физически свойства като 'left' и 'right' използвайте логически CSS свойства като 'margin-inline-start' и 'padding-inline-end'. Те автоматично се адаптират към посоката на писане и избягват ръчни презаписвания. Огледалното оформление означава, че навигационната лента започва отдясно, а съдържанието отляво. С логически стойности като 'float: inline-start' или 'text-align: start' постигате това без медийни заявки. Модерните CSS Grid и Flexbox свойства като 'justify-content: flex-start' действат правилно според атрибута dir. Винаги тествайте с реално съдържание, тъй като логическите свойства не се интерпретират еднакво от всички браузъри.
Числа и вградена латиница
В RTL текстовете числата и вградените латински букви остават подравнени отляво надясно. Това създава предизвикателства, тъй като могат да нарушат посоката на четене. Използвайте атрибута 'unicode-bidi' или 'direction: ltr' за такива елементи, за да осигурите последователно представяне. При формати на дати или числа е препоръчително да адаптирате реда към RTL културата. Обърнете внимание и на оформлението на формуляри, където полетата за числа трябва да останат подравнени отляво. Внимателното боравене с тази смесена посока предотвратява визуални прекъсвания и подобрява четливостта.
Шрифтове и типография
Изборът на шрифт е от решаващо значение: арабски, персийски и иврит изискват шрифтове с подходяща поддръжка на глифове. Популярни опции са 'Noto Naskh Arabic', 'Vazir' за персийски и 'Noto Sans Hebrew'. Дефинирайте резервни варианти, напр. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Обърнете внимание на достатъчни размери на шрифта и междуредие, тъй като RTL шрифтовете често са по-тесни или по-сложни. Избягвайте курсив, тъй като той не съществува в много арабски шрифтове. Тествайте изобразяването на различни устройства, за да сте сигурни, че шрифтовете се зареждат правилно и са четливи.
Икони и отразяване
Иконите, които показват посока (напр. стрелки, символи за напред/назад), трябва да бъдат отразени в RTL оформления. Това се постига с CSS трансформации като 'transform: scaleX(-1)' или чрез използване на набори от икони, които автоматично поддържат RTL (напр. Font Awesome с атрибут 'dir'). Символи без отношение към посоката (напр. къща, настройки) остават непроменени. Уверете се, че отразяването не изкривява семантиката. Тествайте всички икони в RTL изглед, тъй като нежелани отражения могат да влошат потребителското изживяване.
