Двухнаправленный текст с использованием HTML BDO

Введение

HTML-тег <bdo> используется для изменения направления текста, особенно в ситуациях, когда разные языки смешиваются вместе. Тег полезен в случаях, когда необходимо отображать языки, читающиеся справа налево, например арабский или иврит, вдоль языков, читающихся слева направо, таких как английский. В этом лабораторном занятии вы научитесь создавать двухнаправленный текст с использованием HTML-тега <bdo>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70712{{"Двухнаправленный текст с использованием HTML BDO"}} html/head_elems -.-> lab-70712{{"Двухнаправленный текст с использованием HTML BDO"}} html/lang_decl -.-> lab-70712{{"Двухнаправленный текст с использованием HTML BDO"}} html/text_dir -.-> lab-70712{{"Двухнаправленный текст с использованием HTML BDO"}} html/inter_elems -.-> lab-70712{{"Двухнаправленный текст с использованием HTML BDO"}} end

HTML-Тег

Создайте новый файл и назовите его "index.html".

Добавьте следующий код в файл index.html, чтобы открыть HTML-тег:

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text using bdo tag</title>
  </head>
  <body></body>
</html>

Добавление тега `<bdo>`

Вмежду тегов <body> добавьте следующий код, чтобы создать двухнаправленный текст с использованием тега <bdo>:

<h3>Bi-Directional Text using bdo tag:</h3>
<bdo dir="rtl">مرحبا بالعالم</bdo><br />
<bdo dir="ltr">Hello world</bdo>

Здесь мы создали простой пример двухнаправленного текста. Атрибут dir добавляется для указания направления текста в теге <bdo>. Значение rtl сообщает браузеру читать текст справа налево, в то время как значение ltr сообщает браузеру читать текст слева направо.

Сохраните файл index.html и откройте его в веб-браузере. Теперь на странице должно быть отображено двухнаправленный текст.

Резюме

Тег <bdo> используется для создания двухнаправленного текста на веб-странице. Он помогает отображать языки, читающиеся справа налево, вдоль языков, читающихся слева направо. Атрибут dir используется для указания направления текста в теге <bdo> и может иметь два значения: ltr или rtl. Используйте тег с осторожностью, так как он может изменить смысл текста.