Super rtl
Содержание:
Bi-App-Sass
Bi-App-Sass от Анаса Накава позволяют писать одну версию стилей, которая компилируются в две разные таблицы стилей: одна для LRT, другая для RTL разметки.
Этот инструмент может быть полезен для больших проектов. В результате может быть множество таблиц стилей для каждого направления написания. Рассмотрим следующий пример:
.elem { display: flex;@include margin-left(10px);@include border-right(2px solid #000);}
Итоговый код CSS может быть следующим.
Файл app-ltr.css:
.elem { display: flex; margin-left: 10px; border-right: 2px solid #000;}
Файл app-rtl.css:
.elem { display: flex; margin-right: 10px; border-left: 2px solid #000;}
Заметьте, однако, что последний коммит в репозиторий на GitHub был четыре года назад (Ноябрь 2015).
Контент телеканала
За исключением нескольких информационных программ основной контент телеканала представляют шоу и передачи, произведённые сторонними производителями, например немецкая версия шоу «Big Brother» производства Endemol.
Значительную часть эфира канала занимают американские телесериалы, в частности ситкомы и сериалы в жанре научной фантастики (многие из которых транслируются повторно после премьеры на другом родственном телеканале RTL Television), а также аниме и анимационные сериалы. Кроме того, в 1990-х годах RTL II перекупило у телеканала ZDF права на несколько сериалов 1980-х годов. С 2004 года канал впервые на немецком телевидении еженедельно транслирует болливудские индийские фильмы с немецким дубляжом (ранее уже производились трансляции на других каналах, но с субтитрами).
Последовательность символов внутри строки
Физически в строке символы расположены последовательно, но за итоговое отображение этой последовательности на экране отвечает unicode bidirectional algorithm.
Вкратце:
- Для каждого символа в строке вычисляется направленность;
- Строка бьётся на блоки одинаковой направленности;
- Блоки выстраиваются в порядке, заданном базовым направлением.
На направленность каждого символа влияет его тип и направленность соседних символов.
Три типа символов
1) Сильно направленные (или строго типизированные, strongly typed) — например, буквы. Их направленность заранее определена — для большинства символов это LTR, для арабских и иврита — RTL.
Слова на картинке целиком строго типизированы:
2) Нейтральные — например, знаки пунктуации или пробелы. Их направленность не задана явно, они направлены так же, как соседние сильно направленные символы.
Запятая между направленными слева направо «o» и «w» в строке «Hello, world» принимает их направленность и при базовом LTR, и при RTL:
Но что, если нейтрально направленный символ попадает между двумя сильно направленными символами разной направленности? Такой символ принимает базовую направленность.
Вот тут расположение «++» в одном случае между однонаправленными «C» и «a», а в другом — между разнонаправленными «C» и арабским «و», приводит к разному результату:
То же самое случается с нейтральными символами в конце строки:
3) Слабо направленные (или слабо типизированные, weakly typed) — например, числа. Они имеют свою направленность, но никак не влияют на окружающие символы.
Непрерывные слова из цифр выстраиваются слева направо, но два числа подряд, разделённые нейтральным символом, будут идти друг за другом справа налево, если задана базовая RTL–направленность:
Ещё более наглядный случай — число, в котором разряды разделены пробелом:
При этом допускается разделять числа точкой, запятой, двоеточием — эти разделители тоже слабо направлены (подробнее можно посмотреть в ):
Направленные блоки (directional run)
Последовательные символы одинаковой направленности объединяются в блоки (directional run). Эти блоки выстраиваются друг за другом в порядке, определённым базовым направлением:
Слабо направленные числа, несмотря на то, что имеют свою направленность, не влияют на формирование блоков, что может приводить к такому результату — они продолжают предыдущий направленный блок:
Зеркальные символы
Некоторые символы в разных контекстах имеют разную форму — например, открывающая скобка в RTL будет выглядеть как закрывающая в LTR (что логично, ведь контент в скобках будет идти после — то есть, слева от неё).
В большинстве случаев это не создаёт проблем, но если скобки случайно окажутся разной направленности, визуально они будут смотреть в одну сторону. Например, если скобка висит в конце строки:
Программы
Развлекательные
- Armes Deutschland: Dürfen die Das?
- Armes Deutschland: Stempeln oder Abrackern?
- Autopsie: Mysteriöse Todesfälle
- Babys!: Kleines Wunder, grosses Glück
- Berlin: Tag & Nacht
- Das Messie-Team: Start in ein Neues Leben
- Die Bauretter
- Die Geissens: Eine Schrecklich glamouröse Familie
- Die Kochprofis
- Die Reimanns: Ein Aussergewöhnliches Leben
- Die Schnäppchenhäuser: Der Traum vom Eigenheim
- Die Strassencops: Jugend in Visier
- Die Wollnys: Eine Schrecklich grosse Familie
- Der Jugendknast
- Der Trödeltrupp: Das Geld liegt im Keller
- Frauentausch
- Frauentausch: Kulthäppchen
- Grip: Das Motormagazin
- Hartes Deutschland: Leben in Brennpunkt
- Hilf Mir! Volle Dröhnung
- Köln 50667
- Krass Schule: die Jungen Lehrer
- Love Island: Heisse Flirts und wahre Liebe
- Mein neuer Alter
- Pop Giganten
- Privatdetektive im Einsatz
- Tattoo Stories: Das Geht unter die Haut
- Traumfrau Gesucht
- Zuhause im Glück
- Catching Killers
- Crime Town
- Extreme Forensics
В чём состоит задача?
С первого взгляда она мне показалась необъятной — нужно переделать весь интерфейс под требования, которые никто не сможет нормально объяснить.
Посмотрев несколько примеров арабских сайтов, я понимаю, что сделать арабскую версию — это:
- Перевести данные на арабский язык. Эта часть понятнее всего, но легче не становится — это огромные объёмы данных;
- Перевести интерфейс на арабский язык. Для нас это не так просто, потому что до этого мы переводили только с русского, а переводчиков с русского на арабский у нас нет. Придётся сначала переводить строки и комментарии на английский, а потом — с английского на арабский;
- Адаптировать весь интерфейс под «справа налево». Это вроде просто «перевернуть всё в другую сторону». Надо разобраться, как это происходит. И для этого точно есть какие-то готовые решения.
С переводами вроде всё понятно. С переворачиванием интерфейса — ничего не понятно. Остановимся на этом подробнее.
Первым делом я добавил тегу html атрибут dir=»rtl»:
Всё изменилось, но не совсем так, как я ожидал. Я осознал, что совсем не понимаю, что происходит. По какому принципу выстраиваются элементы друг за другом?
Documentation Status
The RtlInitUnicodeString function is documented
in all known editions of the Device Driver Kit (DDK) or Windows Driver Kit (WDK)
since at least the DDK for Windows NT 3.51. Though this documentation is of the
kernel-mode function as an export from the kernel, it is mostly applicable to the
user-mode implementation too, both being plausibly compiled from the same source
file.
Starting with the WDK for Windows 7, Microsoft documents the availability of
RtlInitUnicodeString as “Windows 2000 and later versions
of Windows.”
Documentation of RtlInitUnicodeString explicitly
for user mode was added to the Software Development Kit (SDK) in 2002, concurrently
with its declaration in WINTERNL.H, apparently for Microsoft’s compliance with a
settlement concerning unfair use of internal Windows APIs by “middleware” products
such as Internet Explorer. (For instance, it is linked to by the WININET.DLL version
6.0 from Windows versions 5.1 and 5.2 and Internet Explorer version 6.0.)
Programming
RTL 7 broadcasts a large number of sports programmes such as football, darts and motorsports, but in which motorsports is their main broadcast item. This include live coverage of Formula One and the MotoGP as the most notable. But also the A1 Grand Prix, Dakar Rally, 24 Hours of Le Mans and the Indianapolis 500 are broadcast live on RTL 7. Movies, series and entertainment programmings also broadcast on this channel.
Imported
- The A-Team
- The Blacklist
- Bakugan: Battle Planet
- Beyblade Burst
- Blazing Team: Masters of Yo Kwon Do
- Hardcore Pawn
- Inazuma Eleven
- Les Dalton
- Married… with Children
- Mr. Bean
- Ninjago
- Oggy and the Cockroaches
- Pawn Stars
- Pokémon
- Power Rangers Beast Morphers
- Resident Advisors
Актуальные программы собственного производства
Съёмка репортажа.
Тележурналы
- RTL Exclusiv (с мая 1994) — тележурнал
- RTL Explosiv (с мая 1992) — тележурнал
- RTL Extra (с октября 1994) — тележурнал
- Guten Morgen Deutschland (1987—27 ноября 1994, перезапуск в 2013) — утренний эфир
- Punkt 12 (с июня 1992) — дневной информационный обзор
- RTL aktuell (с апреля 1988) — основная информационная программа канала
- RTL Nachtjournal (с 3 января 1994) — ночной информационный обзор
- RTL Regional — региональные журналы для различных регионов Германии
- Spiegel TV Magazin (с мая 1988) — тематический тележурнал
- Stern TV (с апреля 1990) — тематический тележурнал
- future trend (с июля 1997) — тематический тележурнал
Развлекательные шоу
- Wer wird Millionär? (с сентября 1999) — телеигра
- 5 gegen Jauch (с сентября 2009) — телеигра
- Die 2 — Gottschalk & Jauch gegen ALLE (с 2013) — телеигра
- 500 — Die Quiz-Arena (с июля 2016) — телеигра
- Adam sucht Eva — Gestrandet im Paradies (с 2014) — дейтинг-шоу
- Bauer sucht Frau (с 2005) — дейтинг-шоу
- Das Supertalent (2007—2011, перезапуск в 2009) — шоу талантов
- Deutschland sucht den Superstar (с 2002) — музыкальное кастинг-шоу
- Ich bin ein Star — Holt mich hier raus! (с 2004) — приключенческое реалити-шоу
- Let’s Dance (с 2006) — танцевальное шоу
Телесериалы собственного производства
- Хорошие времена, плохие времена (с мая 1992 года)
- Между нами (с ноября 1994 года)
- Всё, что имеет значение (с сентября 2006 года)
- Спецотряд «Кобра 11» (с марта 1996 года)
- Der Lehrer (с августа 2009 года)
- Männer! — Alles auf Anfang (с января 2015)
- Magda macht das schon! (с января 2017)
- Sankt Maik (с января 2018)
- Beste Schwestern (с января 2018)
- Beck is back! (с января 2018)
История
RTL 4 was launched on 2nd October 1989 as RTL Veronique. Launch of the broadcast for news, entertainment and movies.
On 1st September 1990, RTL Veronique is renamed as RTL 4.
On 11th January 1992, RTL 4 was rebranded and the new idents were changed.
On 1st September 1997, RTL 4 was rebranded and the new logo and idents were changed.
On 28th July 1998, RTL 4 was rebranded and the new logo and idents were changed created by Pittard Sullivan.
On 13th August 2005, RTL 4 was rebranded and the new logo and idents were changed along with this channels.
On 1st March 2007, RTL 4 switched to 16:9 image format.
On 30th November 2009, RTL 4 stopped its 4:3 image format then became a full 16:9 image format and was launched in high-definition version.
On 26th August 2013, RTL 4 was rebranded and the new logo and idents were changed.
On 1st September 2016, RTL 4 was rebranded and the new logo was changed.
2007-present
| Mediengruppe RTL Deutschland |
|---|
|
Part of RTL Group Divested assets:RTL Shop Notes: |
|
Part of Bertelsmann
Former assetsDefunct: Switzerland: RTL/ProSieben Schweiz6 | Poland: RTL7 | India: Big RTL Thrill | United States: LBS Communications, Inc. 7 Divested: United Kingdom:8 Channel 5, 5USA and 5Star | Greece: Alpha TV and 902 TV | Southeast Asia:9 RTL CBS Entertainment (HD) and RTL CBS Extreme (HD) | Russia: Ren TV | Luxembourg: RTL911 Notes: |
Шапка сайта
Я специально сделал макет, чтобы показать, какой использую подход для реализации RTL-версии разметки.
Давайте начнём с компонентов шапки. Чтобы правильно реализовать это в коде, я схематично изобразил его общую структуру
Обратите внимание, что я разделил шапку на основную секцию и подсекцию. Также, добавил начальный и конечный классы для дочерних элементов
.header__main,.header__sub { display: flex; justify-content: space-between;}
Поскольку работа CSS Flexbox учитывает направление, заданное на странице, как объяснялось раньше в этом руководстве, он автоматически развернётся при RTL-разметке.
Следующий момент — это разделительная линия между логотипом и навигацией. Сначала я думал использовать border-right. Это работает, но не идеально. Лучше использовать псевдоэлемент, поскольку он развернётся вслед за направлением страницы.
.c-brand:after { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 38px; border-radius: 5px; background: #e4e4e4; margin-inline-start: 1.25rem;}
Вот текущий результат:
Далее я буду работать с компонентом разделов (тем, который находится в подсекции шапки и содержит названия и счетчики). Ниже представлен макет того, как этот компонент должен выглядеть в LTR..
На первый взгляд это может показаться простым, но на самом деле требует указания нескольких свойств padding и margin. Вот макет, демонстрирующий это:
.topics-heading { margin-inline-end: 1.5rem;}.topics-list { margin-inline-end: 1rem;}.c-topic { padding-inline-start: 0.5rem;}.c-topic:not(:last-child) { margin-inline-end: 10px;}.c-topic__counter { margin-inline-start: 1rem;}
Как вы можете видеть, я использую логические свойства CSS вместо значений left и right.
Следующим шагом является ссылка “See All”
Обратите внимание на стрелку в конце. У неё должно быть следующее поведение:
- При наведении цвет стрелки должен меняться
- При наведении, к стрелке должна применяться анимация
Я решил использовать встроенный SVG для этой задачи.Когда задал стрелке смещение translate, задумался об RTL. Не существует логических свойств, подходящих для этой ситуации и мне нужно рассмотреть другое решение. Подошел вариант с изменением margin.
.c-link svg { margin-inline-start: 4px; transition: 0.15s ease-in;}.c-link:hover svg { margin-inline-start: 8px;}
Хотя анимирование margins не очень хорошо сказывается на производительности, всё же это работает. Другим решением является определение направления страницы и указания, на основании этого, соответствующего направления для смещения.
.c-link:hover svg { transform: translateX(6px);}/* I’m using dir=rtl in the header for the purpose of clarity. It should be added to the root element. */.c-header .c-link svg { transform: scaleX(-1);}.c-header .c-link:hover svg { transform: scaleX(-1) translateX(6px);}
Обратите внимание, что для RTL направления страницы я добавил scaleX(-1), чтобы развернуть иконку по горизонтали. Также можно использовать rotate(180deg), но вариант с масштабированием мне кажется более простым
Дальше идёт поле поиска. Требования следующие:
- Иконка поиска должна появляться в конце поля
- Расположение иконки поиска должно быть динамическим
.c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center;}.c-header .c-input--search { /* We replace the original icon with a flipped one. */ background-image: url("data:image/svg+xml..."); background-position: right 6px center;}
Также, когда пользователь печатает текст в этом поле, текст не должен накладываться на иконку. Чтобы избежать этого, добавим padding с обеих сторон поля.
В результате получается следующая разметка для LTR и RTL режимов:
Следующим идёт мобильное меню. Для его обозначения я буду использовать гамбургер-иконку. Расположение иконки будет меняться в зависимости от направления (LTR или RTL). То же касается и направления анимации смещения.
Можете ознакомиться с демо на CodePen
Благодарность
Особая благодарность моей жене Kholoud за её постоянную поддержку и множественное вычитывание руководства. Также выражаю благодарность Adebiyi Adedotun Lukman и Šime Vidas за их поразительный отзыв.
Источники и вспомогательные статьи
- Right to Left (The Mirror World
- Let’s Talk About RTL
- Basic Concepts of Flexbox
- Basic Concepts of Grid Layout
- Right-to-Left Development: Tips and Tricks
- Arabic Numerals
RTL7
2017-present
| Part of RTL Group
Television channels:RTL 4 (HD) | RTL 5 (HD) | RTL 7 (HD) | RTL 8 (HD) | RTL Z (HD) | RTL Lounge | RTL Crime | RTL Telekids Video-on-demand: RTL XL | Videoland |
|
Part of Bertelsmann
Former assetsDefunct: Switzerland: RTL/ProSieben Schweiz6 | Poland: RTL7 | India: Big RTL Thrill | United States: LBS Communications, Inc. 7 Divested: United Kingdom:8 Channel 5, 5USA and 5Star | Greece: Alpha TV and 902 TV | Southeast Asia:9 RTL CBS Entertainment (HD) and RTL CBS Extreme (HD) | Russia: Ren TV | Luxembourg: RTL911 Notes: |
| Television channelsNPO 1 (HD) | NPO 2 (HD) | NPO 3 (HD)/NPO Zapp/NPO Zappelin | BVN (HD) |
Программы
Развлекательные
- Stern TV
- Explosiv: Das Magazin
- Exclusiv: Das Starmagazin
- Extra: Das RTL-Magazin
- Wer wird Millionär?
- Life: Menschen, Momente Geschichten
- Deutschland sucht den Superstar
- Der Bachelor
- Let’s Dance
- Guten morgen, Deutschland
- Take Me Out
- Best Of…!: Deutschlands schnellste Rakingshow
- Kitsch oder Klasse
- Ohne Filter: So sieht mein Leben aus!
- Martin Rütter: Die Welpen kommen
- Hotel Verschmitzt
- Marco Schreyl
Сериалы
Собственного производства
- Gute Zeiten, schlechte Zeiten
- Unter Uns
- Alarm für Cobra 11: Die Autobahnpolizei
- Alles was zählt
- Der Lehrer
- Sekretärinnen: Überleben von 9 bis 5
- Schwester, Schwester: Hier liegen Sie richtig!
Чужого производства
- CSI: Crime Scene Investigation
- Bones
- Universal Studios
- Focus Features
- Warner Bros. Pictures
- New Line Cinema
- Metro-Goldwyn-Mayer
Group stages
Group A took place on 18 March.Co Stompé played the first match against Jelle Klaasen, a former BDO world champion. The game was tied at 2–2 before Stompé clinched five legs in a row as Klaasen failed to finish on a three times. Stompé won the game 8–3 on his fourth try at finishing on a double ring. The next match featured Stompé and the 2004 UK Open winner Roland Scholten. Stompé held a 2–1 lead with finishes on the double 4 and 20 rings and won 8–1 with a 161 in leg seven, to go through into the quarter-finals. The final match of the group was between Klaasen and Scholten. The first ten legs were shared to enter a five-leg shootout before Scholten won 8–5 to qualify for the quarter-finals and knock out Klaasen with finishes on the double 8, 7 and 10 rings in the final three legs.
Group B was played on 19 March.Phil Taylor, the 15-time world champion, was drawn to play Terry Jenkins. Taylor led 3–0 from checkouts of 84 and 124 before Jenkins took leg four on a 100 checkout. Taylor won the next two legs on the double 4 and 20 rings. Jenkins took leg seven with 12 dart throws and the eighth from a 104 checkout completed on the double 12 ring. Taylor won three of the next four legs to win 8–5. Taylor and the 2011 world champion Adrian Lewis played the group’s second fixture. The first two legs were shared before Taylor took a 4–1 lead. Checkouts of 124 and 100 gave Lewis legs six and seven before Taylor won entry to the quarter-finals 8–4 on the double 12 ring. Both men each made six . The final game between Lewis and Jenkins went to 2–2 before the former won three legs in a row to go 5–2 in front. Jenkins won leg eight after Lewis failed to complete an 103 checkout. Lewis took three more legs to win 8–3 and entry into the quarter-finals.
Group C was staged on the same day.Raymond van Barneveld and the 2007 UK Open runner-up Vincent van der Voort played the group’s first game. The match was tied 1–1 early on and later went to 5–5 before Van Barneveld won the 11th and 12th legs for a two-leg lead. The 13th leg was won by Van Der Voort after Van Barneveld missed three chances to win the game. Van Barneveld completed a 8–6 victory on the double 20 ring after Van Der Voort failed to hit the bullseye ring. The next group match was between Michael van Gerwen and Van Barneveld. Tied at 2–2, checkouts of 64 and 88 gave Van Barneveld a clear 5–2 lead. The next three legs were shared before Van Barneveld made a 113 checkout and a 13-dart finish to win 8–5 and progress to the quarter-finals. Van Der Voort began the final third group match against Van Gerwen by leading 3–1 until the latter won three legs in a row to tie at 4–4. Van Der Voort took four consecutive legs to win 8–4 and reach the quarter-finals.
Group B was held on 20 March.Gary Anderson and James Wade played the group’s first match, which was tied at 3–3 after six legs. Anderson moved two legs ahead with 12 and 14-dart finishes respectively before Wade finished on the double ten ring. Anderson used two misses from Wade on the bullseye ring to win 8–4 on 15 dart throws in leg 12.Simon Whitlock began the group’s second game against Anderson with victories in the opening three legs from checkouts of 161 and 165. Anderson then tied the match with checkouts of 104 and 140 and later took a 7–3 lead. Whitlock won one further leg and Anderson took an 8–4 victory for qualification into the quarter-finals with a finish on the double 10 ring. The final group game between Wade and Whitlock included three checkouts over 100 and went to a final leg decider that Wade won 8–7 on the double 14 ring to become the last player to qualify for the quarter-finals.
Типы файлов RTL
Ассоциация основного файла RTL
.RTL
| Формат файла: | .rtl |
| Тип файла: | Raster Transfer Language File |
Файл плоттер и принтер производится Raster Transfer Language НР (HP-RTL). Он используется для инструктирования плоттера на расположение объектов изображений, таких как отсканированные фотографии и областей помощи тени.
| Создатель: | Hewlett-Packard |
| Категория файла: | Файлы растровых изображений |
| Ключ реестра: | HKEY_CLASSES_ROOT\.rtl |
Программные обеспечения, открывающие Raster Transfer Language File:
SwiftView, разработчик — SwiftView, Inc.
Совместимый с:
| Windows |
| Linux |
Ассоциации других файлов RTL
.RTL
| Формат файла: | .rtl |
| Тип файла: | Yahoo! Instant Messenger Ringtone Settings File |
Файл RTL сохраняет настройки звука для Yahoo! Instant Messenger.
| Создатель: | Yahoo! |
| Категория файла: | Файлы настроек |
Программы, открывающие файлы Yahoo! Instant Messenger Ringtone Settings File :
Yahoo! Instant Messenger, разработчик — Yahoo!
Совместимый с:
| Windows |
| Mac |
| Android |
| Linux |
| Solaris |
| Symbian OS |
| FreeBSD |
.RTL
| Формат файла: | .rtl |
| Тип файла: | Runtime Library File |
Файл RTL используется некоторыми программами Borland для библиотеки времени выполнения файлов.
| Создатель: | Embarcadero Technologies |
| Категория файла: | Исполнимые файлы |
Программы, открывающие файлы Runtime Library File :
C++Builder, разработчик — Embarcadero Technologies
Совместимый с:
| Windows |
| Mac | |
| iOS |
| Android |
.RTL
| Формат файла: | .rtl |
| Тип файла: | Text Document |
Файл с RTL расширения является обычно в формате обычного текста. По умолчанию эти файлы связаны с Microsoft Windows 7. Они могут быть легко доступны с помощью большинства текстовых зрителей.
| Создатель: | Stefan Hagel |
| Категория файла: | Текстовые файлы |
Программы, открывающие файлы Text Document :
Microsoft Notepad, разработчик — Microsoft Corporation
Совместимый с:
| Windows |
| Mac |
| Linux |
Notepad++, разработчик — Don Ho
Совместимый с:
| Windows |
| Mac |
| Linux |
Microsoft WordPad, разработчик — Microsoft Corporation
Совместимый с:
| Windows |
Gedit, разработчик — GNOME
Совместимый с:
| Linux |
Dimenzo Text Editor, разработчик — Dimenzo, Inc.
Совместимый с:
| Windows |
Classical Text Editor, разработчик — Stefan Hagel
Совместимый с:
| Windows |
Берём порядок под контроль
Как мы увидели выше, часто текст по этим правилам форматируется не так, как нам хотелось бы.
В этом случае нам пригодятся инструменты для встраивания желаемого направления в существующий контекст или переопределения направлений конкретных символов.
Изоляция (isolate)
С заданием базового направления мы уже познакомились выше: это делает атрибут dir. Это глобальный атрибут, он применим к любому элементу.
создаёт новый уровень встраивания (embedding level) и изолирует содержимое от внешнего контекста. Контент внутри направлен согласно значению атрибута, а внешняя направленность самого контейнера становится нейтральной.
Явная установка атрибута позволяет избежать почти всех проблем форматирования смешанного текста:
Если направленность контента неизвестна заранее, можно указать auto в качестве значения атрибута dir. Тогда направление содержимого определится с помощью «некоторой эвристики» — оно просто возьмётся у первого попавшегося строго типизированного символа.
Аналогично работает тег и css-правило :
Встраивание (embed)
Можно открыть новый уровень встраивания без изоляции — правило в комбинации с нужным значением правила определяют и направление внутри элемента, и его направленность снаружи. Но это на практике не нужно почти никогда.
Переопределение (override)
или . Переопределяет направление каждого символа внутри элемента. Нужно использовать крайне редко (например, если нужно поменять местами два конкретных символа) и не забывать изолировать дочерние элементы.
При этом снаружи элемент трактуется как сильно направленный. Чтобы он вёл себя как снаружи, но как внутри, нужно использовать .
Управляющие символы (marks)
Вставка управляющих символов — неприятный способ, но он полезен, когда у нас нет доступа к разметке, но есть доступ к контенту. Например, это могут быть просто невидимые сильно направленные символы, и (/ или /). Они помогают задать нужное направление нейтральному символу.
Например, в этом случае, чтобы восклицательный знак в конце строки принял направление LTR, нужно, чтобы он находился между двумя LTR символами:
Также любая описанная выше логика реализуется через управляющие символы. Для изоляции — LRI/RLI, для переопределения — LRO/RLO, и т.д. — смотри подробное руководство по управляющим символам.
Различия размера слов в разных языках
Иногда, когда сайт переводится на арабский язык, размер элементов меняется из-за того, что некоторые слова после перевода становятся больше или меньше. Рассмотрим следующий пример, в котором я сымитировал навигацию сайта Smashing Magazine.
В арабской версии некоторые из слов имеют почти такой же размер, как их английские версии, некоторые равны в точности, а некоторые — больше. Чтобы было понятнее, вот сравнение каждого слова и его арабского перевода.
Вы можете удивиться, почему я говорю о различии размера слов в разных языках, поскольку это нормально и ожидаемо. Рассмотрим следующий реальный пример с LinkedIn.
Кнопка “Done” переведена на арабский как “تم”, из-за чего становится достаточно маленькой и вообще выглядит странно. Специально для таких случаев, было бы лучше задать для кнопки свойство min-width. Я добавил его через панель разработчика, чтобы показать, как это должно выглядеть:
А вот очень похожий пример из Twitter:
Обратите внимание, что указанные выше проблемы у LinkedIn и Twitter были обнаружены на момент написания статьи (13 декабря 2019 года)
