CSS - Свойство Unicode-bidi: Мастерство bidirectional текста
Здравствуйте, будущие веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир CSS и рассмотрим свойство, которое может показаться немного пугающим на первый взгляд: unicode-bidi. Но не волнуйтесь, к концу этого учебника вы будете работать с bidirectional текстом как профессионал!
Что такое Unicode-bidi?
Прежде чем мы углубимся в детали, давайте поймем, что такое unicode-bidi. Представьте, что вы пишете многоязычный веб-сайт, который включает как английский (слева направо), так и арабский (справа налево) текст. Как обеспечить правильное отображение каждого языка? Вот где на помощь приходит unicode-bidi!
Свойство unicode-bidi - ваш надежный помощник при работе с bidirectional текстом в CSS. Оно помогает вам контролировать, как обрабатывается bidirectional текст в документе, обеспечивая правильное отображение контента независимо от направления письма.
Possible Values (Возможные значения)
Давайте рассмотрим возможные значения свойства unicode-bidi:
| Значение | Описание |
|---|---|
| normal | Элемент не открывает дополнительный уровень嵌入式 |
| embed | Открывает дополнительный уровень嵌入式 |
| bidi-override | Создает override для bidirectional алгоритма |
| isolate | Элемент изолирован от своих兄弟 |
| isolate-override | Combines the effects of both 'isolate' and 'bidi-override' (Комбинирует эффекты 'isolate' и 'bidi-override') |
| plaintext | Элемент изолирован и bidirectional форматирование сброшено |
Не волнуйтесь, если они кажутся вам запутанными сейчас. Мы рассмотрим каждый из них подробнее с примерами!
Applies to (Применяется к)
Свойство unicode-bidi может быть применено ко всем элементам. Однако оно наиболее часто используется с инлайновыми элементами или элементами, для которых установлено display: inline.
DOM Syntax (Синтаксис DOM)
Чтобы использовать unicode-bidi в вашем JavaScript, вы можете использовать следующий синтаксис:
object.style.unicodeBidi = "value"Теперь давайте углубимся в каждое значение и посмотрим, как они работают в действии!
CSS unicode-bidi - normal Value (Значение normal)
Значение normal является стандартным параметром. Оно не открывает дополнительный уровень嵌入式 по отношению к bidirectional алгоритму.
<p style="unicode-bidi: normal;">
This is English text. هذا نص عربي.
</p>В этом примере текст будет отображаться как:
This is English text. هذا نص عربي.
Английский текст слева направо, а арабский текст справа налево, следуя своим естественным направлениям.
CSS unicode-bidi - embed Value (Значение embed)
Значение embed открывает дополнительный уровень嵌入式 по отношению к bidirectional алгоритму.
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. هذا نص عربي.
</p>Это будет отображаться как:
.هذا نص عربي This is English text.
Здесь весь абзац рассматривается как справа налево, но английский текст сохраняет свое направление слева направо в общем контексте RTL.
CSS unicode-bidi - bidi-override Value (Значение bidi-override)
Значение bidi-override создает override для bidirectional алгоритма. Оно принуждает направление текста соответствовать свойству direction.
<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. هذا نص عربي.
</p>Это будет отображаться как:
.يبرع صن اذه .txet hsilgnE si sihT
В этом случае весь текст рассматривается строго как справа налево, даже порядок символов в английском тексте изменяется.
CSS unicode-bidi - isolate Value (Значение isolate)
Значение isolate изолирует элемент от своих兄弟 в отношении bidirectional форматирования.
<p>This is <span style="unicode-bidi: isolate; direction: rtl;">هذا نص عربي</span> some English text.</p>Это будет отображаться как:
This is هذا نص عربي some English text.
Арабский текст изолирован и отображается справа налево, в то время как окружающий английский текст остается неизменным.
CSS unicode-bidi - isolate-override Value (Значение isolate-override)
Значение isolate-override комбинирует эффекты isolate и bidi-override.
<p>This is <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>Это будет отображаться как:
This is txet hsilgnE in a sentence.
Текст внутри span изолирован и строго перевернут.
CSS unicode-bidi - plaintext Value (Значение plaintext)
Значение plaintext изолирует элемент и сбрасывает bidirectional форматирование до implicit направления.
<p style="direction: rtl;">
This is <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>Это будет отображаться как:
بعض النص العربي some English text This is
Английский текст внутри span отображается в своем естественном направлении слева направо, несмотря на направление справа налево родителя.
CSS unicode-bidi - Related Properties (Связанные свойства)
工作时使用 unicode-bidi, вы часто будете использовать следующие связанные свойства:
| Свойство | Описание |
|---|---|
| direction | Устанавливает направление текста |
| writing-mode | Определяет, горизонтально или вертикально располагаются строки текста |
Помните, что свойство unicode-bidi работает в тандеме с свойством direction, чтобы контролировать поток bidirectional текста.
Заключение
Поздравляю! Вы только что погрузились в мир unicode-bidi. Это свойство может показаться сложным в начале, но оно бесценный инструмент при работе с многоязычными веб-сайтами. Помните, что практика makes perfect, так что не стесняйтесь экспериментировать с различными значениями и видеть, как они влияют на ваш текст.
Пока вы продолжаете свое путешествие в веб-разработке, вы столкнетесь с множеством ситуаций, где понимание bidirectional текста является важным. Независимо от того, создаете ли вы веб-сайт для глобальной аудитории или работаете над проектом локализации, навыки, которые вы сегодня learned, будут служить вам хорошо.
Продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие! Мир веб-разработки полон захватывающих задач, и овладение свойствами, такими как unicode-bidi, всего лишь начало вашего приключения. Счастливого кодирования!
Credits: Image by storyset